@payloadcms/ui 3.44.0-canary.10 → 3.44.0-canary.2

package/dist/elements/BulkUpload/FileSidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAiBzB,OAAO,cAAc,CAAA;AAMrB,wBAAgB,WAAW,sBA0K1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,OAAO,cAAc,CAAA;AASrB,wBAAgB,WAAW,sBA8K1B"}

package/dist/elements/BulkUpload/FileSidebar/index.js

@@ -15,17 +15,16 @@ import { Drawer } from '../../Drawer/index.js';
 import { ErrorPill } from '../../ErrorPill/index.js';
 import { Pill } from '../../Pill/index.js';
 import { ShimmerEffect } from '../../ShimmerEffect/index.js';
-import { createThumbnail } from '../../Thumbnail/createThumbnail.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
 import { Actions } from '../ActionsBar/index.js';
+import './index.scss';
 import { AddFilesView } from '../AddFilesView/index.js';
 import { useFormsManager } from '../FormsManager/index.js';
 import { useBulkUpload } from '../index.js';
-import './index.scss';
 const addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files';
 const baseClass = 'file-selections';
 export function FileSidebar() {
-  const $ = _c(34);
+  const $ = _c(36);
   const {
     activeIndex,
     addFiles,
@@ -33,6 +32,7 @@ export function FileSidebar() {
     isInitializing,
     removeFile,
     setActiveIndex,
+    thumbnailUrls,
     totalErrorCount
   } = useFormsManager();
   const {
@@ -88,28 +88,27 @@ export function FileSidebar() {
   }
   const t4 = t3.join(" ");
   let t5;
-  if ($[7] !== activeIndex || $[8] !== breakpoints.m || $[9] !== closeModal || $[10] !== forms || $[11] !== handleAddFiles || $[12] !== handleRemoveFile || $[13] !== i18n || $[14] !== initialFiles || $[15] !== isInitializing || $[16] !== maxFiles || $[17] !== openModal || $[18] !== setActiveIndex || $[19] !== showFiles || $[20] !== t || $[21] !== t4 || $[22] !== totalErrorCount || $[23] !== totalFileCount) {
+  if ($[7] !== activeIndex || $[8] !== breakpoints.m || $[9] !== closeModal || $[10] !== forms || $[11] !== handleAddFiles || $[12] !== handleRemoveFile || $[13] !== i18n || $[14] !== initialFiles || $[15] !== isInitializing || $[16] !== maxFiles || $[17] !== openModal || $[18] !== setActiveIndex || $[19] !== showFiles || $[20] !== t || $[21] !== t4 || $[22] !== thumbnailUrls || $[23] !== totalErrorCount || $[24] !== totalFileCount) {
     let t6;
-    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
       t6 = () => setShowFiles(_temp2);
-      $[25] = t6;
+      $[26] = t6;
     } else {
-      t6 = $[25];
+      t6 = $[26];
     }
     let t7;
-    if ($[26] !== closeModal) {
+    if ($[27] !== closeModal) {
       t7 = () => closeModal(addMoreFilesDrawerSlug);
-      $[26] = closeModal;
-      $[27] = t7;
+      $[27] = closeModal;
+      $[28] = t7;
     } else {
-      t7 = $[27];
+      t7 = $[28];
     }
     let t8;
-    if ($[28] !== activeIndex || $[29] !== handleRemoveFile || $[30] !== i18n || $[31] !== setActiveIndex || $[32] !== t) {
+    if ($[29] !== activeIndex || $[30] !== handleRemoveFile || $[31] !== i18n || $[32] !== setActiveIndex || $[33] !== t || $[34] !== thumbnailUrls) {
       t8 = (t9, index_0) => {
         const {
           errorCount,
-          formID,
           formState
         } = t9;
         const currentFile = formState?.file?.value || {};
@@ -119,9 +118,9 @@ export function FileSidebar() {
             className: `${baseClass}__fileRow`,
             onClick: () => setActiveIndex(index_0),
             type: "button",
-            children: [_jsx(SidebarThumbnail, {
-              file: currentFile,
-              formID
+            children: [_jsx(Thumbnail, {
+              className: `${baseClass}__thumbnail`,
+              fileSrc: isImage(currentFile.type) ? thumbnailUrls[index_0] : null
             }), _jsx("div", {
               className: `${baseClass}__fileDetails`,
               children: _jsx("p", {
@@ -147,16 +146,17 @@ export function FileSidebar() {
             type: "button",
             children: _jsx(XIcon, {})
           })]
-        }, formID);
+        }, index_0);
       };
-      $[28] = activeIndex;
-      $[29] = handleRemoveFile;
-      $[30] = i18n;
-      $[31] = setActiveIndex;
-      $[32] = t;
-      $[33] = t8;
+      $[29] = activeIndex;
+      $[30] = handleRemoveFile;
+      $[31] = i18n;
+      $[32] = setActiveIndex;
+      $[33] = t;
+      $[34] = thumbnailUrls;
+      $[35] = t8;
     } else {
-      t8 = $[33];
+      t8 = $[35];
     }
     t5 = _jsxs("div", {
       className: t4,
@@ -238,11 +238,12 @@ export function FileSidebar() {
     $[19] = showFiles;
     $[20] = t;
     $[21] = t4;
-    $[22] = totalErrorCount;
-    $[23] = totalFileCount;
-    $[24] = t5;
+    $[22] = thumbnailUrls;
+    $[23] = totalErrorCount;
+    $[24] = totalFileCount;
+    $[25] = t5;
   } else {
-    t5 = $[24];
+    t5 = $[25];
   }
   return t5;
 }
@@ -262,50 +263,4 @@ function _temp(file) {
   const formattedSize = (size / Math.pow(1024, i)).toFixed(decimals) + " " + ["B", "kB", "MB", "GB", "TB"][i];
   return formattedSize;
 }
-function SidebarThumbnail({
-  file,
-  formID
-}) {
-  const [thumbnailURL, setThumbnailURL] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  React.useEffect(() => {
-    let isCancelled = false;
-    async function generateThumbnail() {
-      setIsLoading(true);
-      setThumbnailURL(null);
-      try {
-        if (isImage(file.type)) {
-          const url = await createThumbnail(file);
-          if (!isCancelled) {
-            setThumbnailURL(url);
-          }
-        } else {
-          setThumbnailURL(null);
-        }
-      } catch (_) {
-        if (!isCancelled) {
-          setThumbnailURL(null);
-        }
-      } finally {
-        if (!isCancelled) {
-          setIsLoading(false);
-        }
-      }
-    }
-    void generateThumbnail();
-    return () => {
-      isCancelled = true;
-    };
-  }, [file]);
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(ShimmerEffect, {
-      className: `${baseClass}__thumbnail-shimmer`,
-      disableInlineStyles: true
-    });
-  }
-  return /*#__PURE__*/_jsx(Thumbnail, {
-    className: `${baseClass}__thumbnail`,
-    fileSrc: thumbnailURL
-  }, `${formID}-${thumbnailURL || 'placeholder'}`);
-}
 //# sourceMappingURL=index.js.map

package/dist/elements/BulkUpload/FileSidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","useWindowInfo","isImage","React","ChevronIcon","XIcon","useTranslation","AnimateHeight","Button","Drawer","ErrorPill","Pill","ShimmerEffect","createThumbnail","Thumbnail","Actions","AddFilesView","useFormsManager","useBulkUpload","addMoreFilesDrawerSlug","baseClass","FileSidebar","$","activeIndex","addFiles","forms","isInitializing","removeFile","setActiveIndex","totalErrorCount","initialFiles","maxFiles","i18n","t","closeModal","openModal","showFiles","setShowFiles","useState","breakpoints","t0","indexToRemove","handleRemoveFile","t1","filelist","handleAddFiles","getFileSize","_temp","totalFileCount","length","t2","t3","filter","Boolean","t4","join","t5","m","t6","Symbol","for","_temp2","t7","t8","t9","index_0","errorCount","formID","formState","currentFile","file","value","_jsxs","className","index","children","onClick","type","_jsx","SidebarThumbnail","title","name","File","count","withMessage","size","buttonStyle","direction","gutter","Header","slug","onCancel","onDrop","height","Array","from","map","_temp3","file_0","animationDelay","prev","i","Math","floor","log","decimals","formattedSize","pow","toFixed","thumbnailURL","setThumbnailURL","isLoading","setIsLoading","useEffect","isCancelled","generateThumbnail","url","_","disableInlineStyles","fileSrc"],"sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { isImage } from 'payload/shared'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { AnimateHeight } from '../../AnimateHeight/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Drawer } from '../../Drawer/index.js'\nimport { ErrorPill } from '../../ErrorPill/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { ShimmerEffect } from '../../ShimmerEffect/index.js'\nimport { createThumbnail } from '../../Thumbnail/createThumbnail.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { Actions } from '../ActionsBar/index.js'\nimport { AddFilesView } from '../AddFilesView/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport { useBulkUpload } from '../index.js'\nimport './index.scss'\n\nconst addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files'\n\nconst baseClass = 'file-selections'\n\nexport function FileSidebar() {\n  const {\n    activeIndex,\n    addFiles,\n    forms,\n    isInitializing,\n    removeFile,\n    setActiveIndex,\n    totalErrorCount,\n  } = useFormsManager()\n  const { initialFiles, maxFiles } = useBulkUpload()\n  const { i18n, t } = useTranslation()\n  const { closeModal, openModal } = useModal()\n  const [showFiles, setShowFiles] = React.useState(false)\n  const { breakpoints } = useWindowInfo()\n\n  const handleRemoveFile = React.useCallback(\n    (indexToRemove: number) => {\n      removeFile(indexToRemove)\n    },\n    [removeFile],\n  )\n\n  const handleAddFiles = React.useCallback(\n    (filelist: FileList) => {\n      void addFiles(filelist)\n      closeModal(addMoreFilesDrawerSlug)\n    },\n    [addFiles, closeModal],\n  )\n\n  const getFileSize = React.useCallback((file: File) => {\n    const size = file.size\n    const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))\n    const decimals = i > 1 ? 1 : 0\n    const formattedSize =\n      (size / Math.pow(1024, i)).toFixed(decimals) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]\n    return formattedSize\n  }, [])\n\n  const totalFileCount = isInitializing ? initialFiles.length : forms.length\n\n  return (\n    <div\n      className={[baseClass, showFiles && `${baseClass}__showingFiles`].filter(Boolean).join(' ')}\n    >\n      {breakpoints.m && showFiles ? <div className={`${baseClass}__mobileBlur`} /> : null}\n      <div className={`${baseClass}__header`}>\n        <div className={`${baseClass}__headerTopRow`}>\n          <div className={`${baseClass}__header__text`}>\n            <ErrorPill count={totalErrorCount} i18n={i18n} withMessage />\n            <p>\n              <strong\n                title={`${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}\n              >\n                {totalFileCount}{' '}\n                {t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}\n              </strong>\n            </p>\n          </div>\n\n          <div className={`${baseClass}__header__actions`}>\n            {(typeof maxFiles === 'number' ? totalFileCount < maxFiles : true) ? (\n              <Pill\n                className={`${baseClass}__header__addFile`}\n                onClick={() => openModal(addMoreFilesDrawerSlug)}\n                size=\"small\"\n              >\n                {t('upload:addFile')}\n              </Pill>\n            ) : null}\n            <Button\n              buttonStyle=\"transparent\"\n              className={`${baseClass}__toggler`}\n              onClick={() => setShowFiles((prev) => !prev)}\n            >\n              <span className={`${baseClass}__toggler__label`}>\n                <strong\n                  title={`${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}\n                >\n                  {totalFileCount}{' '}\n                  {t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}\n                </strong>\n              </span>\n              <ChevronIcon direction={showFiles ? 'down' : 'up'} />\n            </Button>\n\n            <Drawer gutter={false} Header={null} slug={addMoreFilesDrawerSlug}>\n              <AddFilesView\n                onCancel={() => closeModal(addMoreFilesDrawerSlug)}\n                onDrop={handleAddFiles}\n              />\n            </Drawer>\n          </div>\n        </div>\n\n        <div className={`${baseClass}__header__mobileDocActions`}>\n          <Actions />\n        </div>\n      </div>\n\n      <div className={`${baseClass}__animateWrapper`}>\n        <AnimateHeight height={!breakpoints.m || showFiles ? 'auto' : 0}>\n          <div className={`${baseClass}__filesContainer`}>\n            {isInitializing && forms.length === 0 && initialFiles.length > 0\n              ? Array.from(initialFiles).map((file, index) => (\n                  <ShimmerEffect\n                    animationDelay={`calc(${index} * ${60}ms)`}\n                    height=\"35px\"\n                    key={index}\n                  />\n                ))\n              : null}\n            {forms.map(({ errorCount, formID, formState }, index) => {\n              const currentFile = (formState?.file?.value as File) || ({} as File)\n\n              return (\n                <div\n                  className={[\n                    `${baseClass}__fileRowContainer`,\n                    index === activeIndex && `${baseClass}__fileRowContainer--active`,\n                    errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  key={formID}\n                >\n                  <button\n                    className={`${baseClass}__fileRow`}\n                    onClick={() => setActiveIndex(index)}\n                    type=\"button\"\n                  >\n                    <SidebarThumbnail file={currentFile} formID={formID} />\n                    <div className={`${baseClass}__fileDetails`}>\n                      <p className={`${baseClass}__fileName`} title={currentFile.name}>\n                        {currentFile.name || t('upload:noFile')}\n                      </p>\n                    </div>\n                    {currentFile instanceof File ? (\n                      <p className={`${baseClass}__fileSize`}>{getFileSize(currentFile)}</p>\n                    ) : null}\n                    <div className={`${baseClass}__remove ${baseClass}__remove--underlay`}>\n                      <XIcon />\n                    </div>\n\n                    {errorCount ? (\n                      <ErrorPill\n                        className={`${baseClass}__errorCount`}\n                        count={errorCount}\n                        i18n={i18n}\n                      />\n                    ) : null}\n                  </button>\n\n                  <button\n                    aria-label={t('general:remove')}\n                    className={`${baseClass}__remove ${baseClass}__remove--overlay`}\n                    onClick={() => handleRemoveFile(index)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )\n            })}\n          </div>\n        </AnimateHeight>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarThumbnail({ file, formID }: { file: File; formID: string }) {\n  const [thumbnailURL, setThumbnailURL] = React.useState<null | string>(null)\n  const [isLoading, setIsLoading] = React.useState(true)\n\n  React.useEffect(() => {\n    let isCancelled = false\n\n    async function generateThumbnail() {\n      setIsLoading(true)\n      setThumbnailURL(null)\n\n      try {\n        if (isImage(file.type)) {\n          const url = await createThumbnail(file)\n          if (!isCancelled) {\n            setThumbnailURL(url)\n          }\n        } else {\n          setThumbnailURL(null)\n        }\n      } catch (_) {\n        if (!isCancelled) {\n          setThumbnailURL(null)\n        }\n      } finally {\n        if (!isCancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void generateThumbnail()\n\n    return () => {\n      isCancelled = true\n    }\n  }, [file])\n\n  if (isLoading) {\n    return <ShimmerEffect className={`${baseClass}__thumbnail-shimmer`} disableInlineStyles />\n  }\n\n  return (\n    <Thumbnail\n      className={`${baseClass}__thumbnail`}\n      fileSrc={thumbnailURL}\n      key={`${formID}-${thumbnailURL || 'placeholder'}`}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,OAAO,QAAQ;AACxB,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,MAAM,QAAQ;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,IAAI,QAAQ;AACrB,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAEP,MAAMC,sBAAA,GAAyB;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,SAAAC,YAAA;EAAA,MAAAC,CAAA,GAAAvB,EAAA;EACL;IAAAwB,WAAA;IAAAC,QAAA;IAAAC,KAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC,cAAA;IAAAC;EAAA,IAQIZ,eAAA;EACJ;IAAAa,YAAA;IAAAC;EAAA,IAAmCb,aAAA;EACnC;IAAAc,IAAA;IAAAC;EAAA,IAAoB3B,cAAA;EACpB;IAAA4B,UAAA;IAAAC;EAAA,IAAkCnC,QAAA;EAClC,OAAAoC,SAAA,EAAAC,YAAA,IAAkClC,KAAA,CAAAmC,QAAA,MAAe;EACjD;IAAAC;EAAA,IAAwBtC,aAAA;EAAA,IAAAuC,EAAA;EAAA,IAAAlB,CAAA,QAAAK,UAAA;IAGtBa,EAAA,GAAAC,aAAA;MACEd,UAAA,CAAWc,aAAA;IAAA;IACbnB,CAAA,MAAAK,UAAA;IAAAL,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAHF,MAAAoB,gBAAA,GAAyBF,EAIX;EAAA,IAAAG,EAAA;EAAA,IAAArB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAY,UAAA;IAIZS,EAAA,GAAAC,QAAA;MACOpB,QAAA,CAASoB,QAAA;MACdV,UAAA,CAAAf,sBAAW;IAAA;IACbG,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAY,UAAA;IAAAZ,CAAA,MAAAqB,EAAA;EAAA;IAAAA,EAAA,GAAArB,CAAA;EAAA;EAJF,MAAAuB,cAAA,GAAuBF,EAKC;EAGxB,MAAAG,WAAA,GAAAC,KAAA;EASA,MAAAC,cAAA,GAAuBtB,cAAA,GAAiBI,YAAA,CAAAmB,MAAA,GAAsBxB,KAAA,CAAAwB,MAAY;EAI/C,MAAAC,EAAA,GAAAd,SAAA,IAAa,GAAAhB,SAAA,gBAA4B;EAAA,IAAA+B,EAAA;EAAA,IAAA7B,CAAA,QAAA4B,EAAA;IAArDC,EAAA,IAAA/B,SAAA,EAAY8B,EAAyC,EAAAE,MAAA,CAAAC,OAAS;IAAA/B,CAAA,MAAA4B,EAAA;IAAA5B,CAAA,MAAA6B,EAAA;EAAA;IAAAA,EAAA,GAAA7B,CAAA;EAAA;EAA9D,MAAAgC,EAAA,GAAAH,EAA8D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAlC,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAiB,WAAA,CAAAkB,CAAA,IAAAnC,CAAA,QAAAY,UAAA,IAAAZ,CAAA,SAAAG,KAAA,IAAAH,CAAA,SAAAuB,cAAA,IAAAvB,CAAA,SAAAoB,gBAAA,IAAApB,CAAA,SAAAU,IAAA,IAAAV,CAAA,SAAAQ,YAAA,IAAAR,CAAA,SAAAI,cAAA,IAAAJ,CAAA,SAAAS,QAAA,IAAAT,CAAA,SAAAa,SAAA,IAAAb,CAAA,SAAAM,cAAA,IAAAN,CAAA,SAAAc,SAAA,IAAAd,CAAA,SAAAW,CAAA,IAAAX,CAAA,SAAAgC,EAAA,IAAAhC,CAAA,SAAAO,eAAA,IAAAP,CAAA,SAAA0B,cAAA;IAAA,IAAAU,EAAA;IAAA,IAAApC,CAAA,SAAAqC,MAAA,CAAAC,GAAA;MA8BtEF,EAAA,GAAAA,CAAA,KAAMrB,YAAA,CAAAwB,MAAwB;MAAAvC,CAAA,OAAAoC,EAAA;IAAA;MAAAA,EAAA,GAAApC,CAAA;IAAA;IAAA,IAAAwC,EAAA;IAAA,IAAAxC,CAAA,SAAAY,UAAA;MAe3B4B,EAAA,GAAAA,CAAA,KAAM5B,UAAA,CAAAf,sBAAW;MAAAG,CAAA,OAAAY,UAAA;MAAAZ,CAAA,OAAAwC,EAAA;IAAA;MAAAA,EAAA,GAAAxC,CAAA;IAAA;IAAA,IAAAyC,EAAA;IAAA,IAAAzC,CAAA,SAAAC,WAAA,IAAAD,CAAA,SAAAoB,gBAAA,IAAApB,CAAA,SAAAU,IAAA,IAAAV,CAAA,SAAAM,cAAA,IAAAN,CAAA,SAAAW,CAAA;MAwBpB8B,EAAA,GAAAA,CAAAC,EAAA,EAAAC,OAAA;QAAC;UAAAC,UAAA;UAAAC,MAAA;UAAAC;QAAA,IAAAJ,EAAiC;QAC3C,MAAAK,WAAA,GAAoBD,SAAC,EAAAE,IAAA,EAAAC,KAAA,MAAqC;QAAA,OAGxDC,KAAA,CAAC;UAAAC,SAAA,EACY,CACT,GAAArD,SAAA,oBAAgC,EAChCsD,OAAA,KAAUnD,WAAA,IAAe,GAAAH,SAAA,4BAAwC,EACjE8C,UAAA,IAAcA,UAAA,IAAa,IAAK,GAAA9C,SAAA,2BAAuC,EAAAgC,MAAA,CAAAC,OAE/D,EAAAE,IAAA,CACF;UAAAoB,QAAA,GAGRH,KAAA,CAAC;YAAAC,SAAA,EACY,GAAArD,SAAA,WAAuB;YAAAwD,OAAA,EAAAA,CAAA,KACnBhD,cAAA,CAAe8C,OAAA;YAAAG,IAAA,EACzB;YAAAF,QAAA,GAELG,IAAA,CAAAC,gBAAA;cAAAT,IAAA,EAAwBD,WAAA;cAAAF;YAAA,C,GACxBW,IAAA,CAAC;cAAAL,SAAA,EAAe,GAAArD,SAAA,eAA2B;cAAAuD,QAAA,EACzCG,IAAA,CAAC;gBAAAL,SAAA,EAAa,GAAArD,SAAA,YAAwB;gBAAA4D,KAAA,EAASX,WAAA,CAAAY,IAAA;gBAAAN,QAAA,EAC5CN,WAAA,CAAAY,IAAA,IAAoBhD,CAAA,CAAE;cAAA,C;gBAG1BoC,WAAA,YAAAa,IAAuB,GACtBJ,IAAA,CAAC;cAAAL,SAAA,EAAa,GAAArD,SAAA,YAAwB;cAAAuD,QAAA,EAAG7B,WAAA,CAAYuB,WAAA;YAAA,C,QACnD,EACJS,IAAA,CAAC;cAAAL,SAAA,EAAe,GAAArD,SAAA,YAAAA,SAAA,oBAAqD;cAAAuD,QAAA,EACnEG,IAAA,CAAAzE,KAAA,IAAC;YAAA,C,GAGF6D,UAAA,GACCY,IAAA,CAAApE,SAAA;cAAA+D,SAAA,EACa,GAAArD,SAAA,cAA0B;cAAA+D,KAAA,EAC9BjB,UAAA;cAAAlC;YAAA,C,QAGP;UAAA,C,GAGN8C,IAAA,CAAC;YAAA,cACa7C,CAAA,CAAE;YAAAwC,SAAA,EACH,GAAArD,SAAA,YAAAA,SAAA,mBAAoD;YAAAwD,OAAA,EAAAA,CAAA,KAChDlC,gBAAA,CAAiBgC,OAAA;YAAAG,IAAA,EAC3B;YAAAF,QAAA,EAELG,IAAA,CAAAzE,KAAA,IAAC;UAAA,C;WAnCE8D,MAAA;MAAA;MAuCX7C,CAAA,OAAAC,WAAA;MAAAD,CAAA,OAAAoB,gBAAA;MAAApB,CAAA,OAAAU,IAAA;MAAAV,CAAA,OAAAM,cAAA;MAAAN,CAAA,OAAAW,CAAA;MAAAX,CAAA,OAAAyC,EAAA;IAAA;MAAAA,EAAA,GAAAzC,CAAA;IAAA;IAzHRkC,EAAA,GAAAgB,KAAA,CAAC;MAAAC,SAAA,EACYnB,EAA4E;MAAAqB,QAAA,GAEtFpC,WAAA,CAAAkB,CAAA,IAAiBrB,SAAA,GAAY0C,IAAA,CAAC;QAAAL,SAAA,EAAe,GAAArD,SAAA;MAA0B,C,QAAO,EAC/EoD,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAArD,SAAA,UAAsB;QAAAuD,QAAA,GACpCH,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAArD,SAAA,gBAA4B;UAAAuD,QAAA,GAC1CH,KAAA,CAAC;YAAAC,SAAA,EAAe,GAAArD,SAAA,gBAA4B;YAAAuD,QAAA,GAC1CG,IAAA,CAAApE,SAAA;cAAAyE,KAAA,EAAkBtD,eAAA;cAAAG,IAAA;cAAAoD,WAAA;YAAA,C,GAClBN,IAAA,CAAC;cAAAH,QAAA,EACCH,KAAA,CAAC;gBAAAQ,KAAA,EACQ,GAAGhC,cAAA,IAAkBf,CAAA,CAAEe,cAAA,IAAiB,GAAI,yBAAyB,wBAAwB;gBAAA2B,QAAA,GAEnG3B,cAAA,EAAgB,KAChBf,CAAA,CAAEe,cAAA,IAAiB,GAAI,yBAAyB;cAAA,C;;cAKvDwB,KAAA,CAAC;YAAAC,SAAA,EAAe,GAAArD,SAAA,mBAA+B;YAAAuD,QAAA,GAC3C,QAAO5C,QAAA,KAAa,WAAWiB,cAAA,GAAiBjB,QAAA,OAAc,IAC9D+C,IAAA,CAAAnE,IAAA;cAAA8D,SAAA,EACa,GAAArD,SAAA,mBAA+B;cAAAwD,OAAA,EAAAA,CAAA,KAC3BzC,SAAA,CAAAhB,sBAAU;cAAAkE,IAAA,EACpB;cAAAV,QAAA,EAEJ1C,CAAA,CAAE;YAAA,C,QAEH,EACJuC,KAAA,CAAAhE,MAAA;cAAA8E,WAAA,EACc;cAAAb,SAAA,EACD,GAAArD,SAAA,WAAuB;cAAAwD,OAAA,EACzBlB,EAA8B;cAAAiB,QAAA,GAEvCG,IAAA,CAAC;gBAAAL,SAAA,EAAgB,GAAArD,SAAA,kBAA8B;gBAAAuD,QAAA,EAC7CH,KAAA,CAAC;kBAAAQ,KAAA,EACQ,GAAGhC,cAAA,IAAkBf,CAAA,CAAEe,cAAA,IAAiB,GAAI,yBAAyB,wBAAwB;kBAAA2B,QAAA,GAEnG3B,cAAA,EAAgB,KAChBf,CAAA,CAAEe,cAAA,IAAiB,GAAI,yBAAyB;gBAAA,C;kBAGrD8B,IAAA,CAAA1E,WAAA;gBAAAmF,SAAA,EAAwBnD,SAAA,GAAY,SAAS;cAAA,C;gBAG/C0C,IAAA,CAAArE,MAAA;cAAA+E,MAAA;cAAAC,MAAA;cAAAC,IAAA,EAAAvE,sBAAA;cAAAwD,QAAA,EACEG,IAAA,CAAA9D,YAAA;gBAAA2E,QAAA,EACY7B,EAAiB;gBAAA8B,MAAA,EACnB/C;cAAA,C;;;YAMhBiC,IAAA,CAAC;UAAAL,SAAA,EAAe,GAAArD,SAAA,4BAAwC;UAAAuD,QAAA,EACtDG,IAAA,CAAA/D,OAAA,IAAC;QAAA,C;UAIL+D,IAAA,CAAC;QAAAL,SAAA,EAAe,GAAArD,SAAA,kBAA8B;QAAAuD,QAAA,EAC5CG,IAAA,CAAAvE,aAAA;UAAAsF,MAAA,EAAuB,CAACtD,WAAA,CAAAkB,CAAA,IAAiBrB,SAAA,GAAY,UAAS;UAAAuC,QAAA,EAC5DH,KAAA,CAAC;YAAAC,SAAA,EAAe,GAAArD,SAAA,kBAA8B;YAAAuD,QAAA,GAC3CjD,cAAA,IAAkBD,KAAA,CAAAwB,MAAA,MAAiB,IAAKnB,YAAA,CAAAmB,MAAA,IAAsB,GAC3D6C,KAAA,CAAAC,IAAA,CAAWjE,YAAA,EAAAkE,GAAA,CAAAC,MAIF,QAGT,EACHxE,KAAA,CAAAuE,GAAA,CAAUjC,EAmDX;UAAA,C;;;;;;;;;;;;;;;;;;;;;;;;;SAzHRP,E;;AA3CG,SAAAyC,OAAAC,MAAA,EAAAxB,KAAA;EAAA,OA0GWI,IAAA,CAAAlE,aAAA;IAAAuF,cAAA,EACkB,QAAQzB,KAAA,aAAkB;IAAAmB,MAAA,EACnC;EAAA,GACFnB,KAAA;AAAA;AA7GlB,SAAAb,OAAAuC,IAAA;EAAA,QA0E8CA,IAAA;AAAA;AA1E9C,SAAArD,MAAAuB,IAAA;EAgCH,MAAAe,IAAA,GAAaf,IAAA,CAAAe,IAAA;EACb,MAAAgB,CAAA,GAAUhB,IAAA,MAAS,OAAQiB,IAAA,CAAAC,KAAA,CAAWD,IAAA,CAAAE,GAAA,CAASnB,IAAA,IAAQiB,IAAA,CAAAE,GAAA,KAAS;EAChE,MAAAC,QAAA,GAAiBJ,CAAA,IAAI,QAAQ;EAC7B,MAAAK,aAAA,GACE,CAACrB,IAAA,GAAOiB,IAAA,CAAAK,GAAA,OAAeN,CAAA,CAAC,EAAAO,OAAA,CAAWH,QAAA,IAAY,OAAO,KAAK,MAAM,MAAM,MAAM,MAAMJ,CAAA,CAAE;EAAA,OAChFK,aAAA;AAAA;AAuIX,SAAS3B,iBAAiB;EAAET,IAAI;EAAEH;AAAM,CAAkC;EACxE,MAAM,CAAC0C,YAAA,EAAcC,eAAA,CAAgB,GAAG3G,KAAA,CAAMmC,QAAQ,CAAgB;EACtE,MAAM,CAACyE,SAAA,EAAWC,YAAA,CAAa,GAAG7G,KAAA,CAAMmC,QAAQ,CAAC;EAEjDnC,KAAA,CAAM8G,SAAS,CAAC;IACd,IAAIC,WAAA,GAAc;IAElB,eAAeC,kBAAA;MACbH,YAAA,CAAa;MACbF,eAAA,CAAgB;MAEhB,IAAI;QACF,IAAI5G,OAAA,CAAQoE,IAAA,CAAKO,IAAI,GAAG;UACtB,MAAMuC,GAAA,GAAM,MAAMvG,eAAA,CAAgByD,IAAA;UAClC,IAAI,CAAC4C,WAAA,EAAa;YAChBJ,eAAA,CAAgBM,GAAA;UAClB;QACF,OAAO;UACLN,eAAA,CAAgB;QAClB;MACF,EAAE,OAAOO,CAAA,EAAG;QACV,IAAI,CAACH,WAAA,EAAa;UAChBJ,eAAA,CAAgB;QAClB;MACF,UAAU;QACR,IAAI,CAACI,WAAA,EAAa;UAChBF,YAAA,CAAa;QACf;MACF;IACF;IAEA,KAAKG,iBAAA;IAEL,OAAO;MACLD,WAAA,GAAc;IAChB;EACF,GAAG,CAAC5C,IAAA,CAAK;EAET,IAAIyC,SAAA,EAAW;IACb,oBAAOjC,IAAA,CAAClE,aAAA;MAAc6D,SAAA,EAAW,GAAGrD,SAAA,qBAA8B;MAAEkG,mBAAmB;;EACzF;EAEA,oBACExC,IAAA,CAAChE,SAAA;IACC2D,SAAA,EAAW,GAAGrD,SAAA,aAAsB;IACpCmG,OAAA,EAASV;KACJ,GAAG1C,MAAA,IAAU0C,YAAA,IAAgB,eAAe;AAGvD","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","useWindowInfo","isImage","React","ChevronIcon","XIcon","useTranslation","AnimateHeight","Button","Drawer","ErrorPill","Pill","ShimmerEffect","Thumbnail","Actions","AddFilesView","useFormsManager","useBulkUpload","addMoreFilesDrawerSlug","baseClass","FileSidebar","$","activeIndex","addFiles","forms","isInitializing","removeFile","setActiveIndex","thumbnailUrls","totalErrorCount","initialFiles","maxFiles","i18n","t","closeModal","openModal","showFiles","setShowFiles","useState","breakpoints","t0","indexToRemove","handleRemoveFile","t1","filelist","handleAddFiles","getFileSize","_temp","totalFileCount","length","t2","t3","filter","Boolean","t4","join","t5","m","t6","Symbol","for","_temp2","t7","t8","t9","index_0","errorCount","formState","currentFile","file","value","_jsxs","className","index","children","onClick","type","_jsx","fileSrc","title","name","File","count","withMessage","size","buttonStyle","direction","gutter","Header","slug","onCancel","onDrop","height","Array","from","map","_temp3","file_0","animationDelay","prev","i","Math","floor","log","decimals","formattedSize","pow","toFixed"],"sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { isImage } from 'payload/shared'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { AnimateHeight } from '../../AnimateHeight/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Drawer } from '../../Drawer/index.js'\nimport { ErrorPill } from '../../ErrorPill/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { ShimmerEffect } from '../../ShimmerEffect/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { Actions } from '../ActionsBar/index.js'\nimport './index.scss'\nimport { AddFilesView } from '../AddFilesView/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport { useBulkUpload } from '../index.js'\n\nconst addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files'\n\nconst baseClass = 'file-selections'\n\nexport function FileSidebar() {\n  const {\n    activeIndex,\n    addFiles,\n    forms,\n    isInitializing,\n    removeFile,\n    setActiveIndex,\n    thumbnailUrls,\n    totalErrorCount,\n  } = useFormsManager()\n  const { initialFiles, maxFiles } = useBulkUpload()\n  const { i18n, t } = useTranslation()\n  const { closeModal, openModal } = useModal()\n  const [showFiles, setShowFiles] = React.useState(false)\n  const { breakpoints } = useWindowInfo()\n\n  const handleRemoveFile = React.useCallback(\n    (indexToRemove: number) => {\n      removeFile(indexToRemove)\n    },\n    [removeFile],\n  )\n\n  const handleAddFiles = React.useCallback(\n    (filelist: FileList) => {\n      void addFiles(filelist)\n      closeModal(addMoreFilesDrawerSlug)\n    },\n    [addFiles, closeModal],\n  )\n\n  const getFileSize = React.useCallback((file: File) => {\n    const size = file.size\n    const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))\n    const decimals = i > 1 ? 1 : 0\n    const formattedSize =\n      (size / Math.pow(1024, i)).toFixed(decimals) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]\n    return formattedSize\n  }, [])\n\n  const totalFileCount = isInitializing ? initialFiles.length : forms.length\n\n  return (\n    <div\n      className={[baseClass, showFiles && `${baseClass}__showingFiles`].filter(Boolean).join(' ')}\n    >\n      {breakpoints.m && showFiles ? <div className={`${baseClass}__mobileBlur`} /> : null}\n      <div className={`${baseClass}__header`}>\n        <div className={`${baseClass}__headerTopRow`}>\n          <div className={`${baseClass}__header__text`}>\n            <ErrorPill count={totalErrorCount} i18n={i18n} withMessage />\n            <p>\n              <strong\n                title={`${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}\n              >\n                {totalFileCount}{' '}\n                {t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}\n              </strong>\n            </p>\n          </div>\n\n          <div className={`${baseClass}__header__actions`}>\n            {(typeof maxFiles === 'number' ? totalFileCount < maxFiles : true) ? (\n              <Pill\n                className={`${baseClass}__header__addFile`}\n                onClick={() => openModal(addMoreFilesDrawerSlug)}\n                size=\"small\"\n              >\n                {t('upload:addFile')}\n              </Pill>\n            ) : null}\n            <Button\n              buttonStyle=\"transparent\"\n              className={`${baseClass}__toggler`}\n              onClick={() => setShowFiles((prev) => !prev)}\n            >\n              <span className={`${baseClass}__toggler__label`}>\n                <strong\n                  title={`${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}\n                >\n                  {totalFileCount}{' '}\n                  {t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}\n                </strong>\n              </span>\n              <ChevronIcon direction={showFiles ? 'down' : 'up'} />\n            </Button>\n\n            <Drawer gutter={false} Header={null} slug={addMoreFilesDrawerSlug}>\n              <AddFilesView\n                onCancel={() => closeModal(addMoreFilesDrawerSlug)}\n                onDrop={handleAddFiles}\n              />\n            </Drawer>\n          </div>\n        </div>\n\n        <div className={`${baseClass}__header__mobileDocActions`}>\n          <Actions />\n        </div>\n      </div>\n\n      <div className={`${baseClass}__animateWrapper`}>\n        <AnimateHeight height={!breakpoints.m || showFiles ? 'auto' : 0}>\n          <div className={`${baseClass}__filesContainer`}>\n            {isInitializing && forms.length === 0 && initialFiles.length > 0\n              ? Array.from(initialFiles).map((file, index) => (\n                  <ShimmerEffect\n                    animationDelay={`calc(${index} * ${60}ms)`}\n                    height=\"35px\"\n                    key={index}\n                  />\n                ))\n              : null}\n            {forms.map(({ errorCount, formState }, index) => {\n              const currentFile = (formState?.file?.value as File) || ({} as File)\n\n              return (\n                <div\n                  className={[\n                    `${baseClass}__fileRowContainer`,\n                    index === activeIndex && `${baseClass}__fileRowContainer--active`,\n                    errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  key={index}\n                >\n                  <button\n                    className={`${baseClass}__fileRow`}\n                    onClick={() => setActiveIndex(index)}\n                    type=\"button\"\n                  >\n                    <Thumbnail\n                      className={`${baseClass}__thumbnail`}\n                      fileSrc={isImage(currentFile.type) ? thumbnailUrls[index] : null}\n                    />\n                    <div className={`${baseClass}__fileDetails`}>\n                      <p className={`${baseClass}__fileName`} title={currentFile.name}>\n                        {currentFile.name || t('upload:noFile')}\n                      </p>\n                    </div>\n                    {currentFile instanceof File ? (\n                      <p className={`${baseClass}__fileSize`}>{getFileSize(currentFile)}</p>\n                    ) : null}\n                    <div className={`${baseClass}__remove ${baseClass}__remove--underlay`}>\n                      <XIcon />\n                    </div>\n\n                    {errorCount ? (\n                      <ErrorPill\n                        className={`${baseClass}__errorCount`}\n                        count={errorCount}\n                        i18n={i18n}\n                      />\n                    ) : null}\n                  </button>\n\n                  <button\n                    aria-label={t('general:remove')}\n                    className={`${baseClass}__remove ${baseClass}__remove--overlay`}\n                    onClick={() => handleRemoveFile(index)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )\n            })}\n          </div>\n        </AnimateHeight>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BulkUpload/FileSidebar/index.scss

@@ -83,13 +83,12 @@
         background-color: var(--theme-elevation-100);
       }
 
-      .file-selections__thumbnail,
-      .file-selections__thumbnail-shimmer {
-        width: calc(var(--base) * 1.2);
-        height: calc(var(--base) * 1.2);
-        border-radius: var(--style-radius-s);
+      .thumbnail {
+        width: base(1.2);
+        height: base(1.2);
         flex-shrink: 0;
         object-fit: cover;
+        border-radius: var(--style-radius-s);
       }
 
       p {

package/dist/elements/BulkUpload/FormsManager/index.d.ts

@@ -24,6 +24,7 @@ type FormsManagerContext = {
         errorCount: number;
         index: number;
     }) => void;
+    readonly thumbnailUrls: string[];
     readonly totalErrorCount?: number;
     readonly updateUploadEdits: (args: UploadEdits) => void;
 };

package/dist/elements/BulkUpload/FormsManager/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FormsManager/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,IAAI,EACJ,aAAa,EAEb,4BAA4B,EAC5B,WAAW,EACZ,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAezC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;IAC1C,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxD,QAAQ,CAAC,cAAc,EAAE,CACvB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtC,gBAAgB,CAAC,EAAE,MAAM,IAAI,KAC1B,OAAO,CAAC,IAAI,CAAC,CAAA;IAClB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,4BAA4B,CAAA;IACtD,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAA;IACrC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IAC9B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IACtC,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChG,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,sBAAsB,EAAE,CAAC,EAChC,UAAU,EACV,KAAK,GACN,EAAE;QACD,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;IACV,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;CACxD,CAAA;AA6BD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAmdnE;AAED,wBAAgB,eAAe,wBAE9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FormsManager/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,IAAI,EACJ,aAAa,EAEb,4BAA4B,EAC5B,WAAW,EACZ,MAAM,SAAS,CAAA;AAKhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAgBzC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;IAC1C,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxD,QAAQ,CAAC,cAAc,EAAE,CACvB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtC,gBAAgB,CAAC,EAAE,MAAM,IAAI,KAC1B,OAAO,CAAC,IAAI,CAAC,CAAA;IAClB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,4BAA4B,CAAA;IACtD,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAA;IACrC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IAC9B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IACtC,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChG,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,sBAAsB,EAAE,CAAC,EAChC,UAAU,EACV,KAAK,GACN,EAAE;QACD,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;IACV,QAAQ,CAAC,aAAa,EAAE,MAAM,EAAE,CAAA;IAChC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;CACxD,CAAA;AA8BD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAofnE;AAED,wBAAgB,eAAe,wBAE9B"}

package/dist/elements/BulkUpload/FormsManager/index.js

@@ -2,6 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
+import { isImage } from 'payload/shared';
 import * as qs from 'qs-esm';
 import React from 'react';
 import { toast } from 'sonner';
@@ -14,6 +15,7 @@ import { useUploadHandlers } from '../../../providers/UploadHandlers/index.js';
 import { hasSavePermission as getHasSavePermission } from '../../../utilities/hasSavePermission.js';
 import { LoadingOverlay } from '../../Loading/index.js';
 import { useLoadingOverlay } from '../../LoadingOverlay/index.js';
+import { createThumbnail } from '../../Thumbnail/createThumbnail.js';
 import { useBulkUpload } from '../index.js';
 import { createFormData } from './createFormData.js';
 import { formsManagementReducer } from './reducer.js';
@@ -36,6 +38,7 @@ const Context = /*#__PURE__*/React.createContext({
   saveAllDocs: () => Promise.resolve(),
   setActiveIndex: () => 0,
   setFormTotalErrorCount: () => {},
+  thumbnailUrls: [],
   totalErrorCount: 0,
   updateUploadEdits: () => {}
 });
@@ -86,6 +89,33 @@ export function FormsManagerProvider({
   } = state;
   const formsRef = React.useRef(forms);
   formsRef.current = forms;
+  const formsCount = forms.length;
+  const thumbnailUrlsRef = React.useRef([]);
+  const processedFiles = React.useRef(new Set()) // Track already-processed files
+  ;
+  const [renderedThumbnails, setRenderedThumbnails] = React.useState([]);
+  React.useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;
+    (async () => {
+      const newThumbnails = [...thumbnailUrlsRef.current];
+      for (let i = 0; i < formsCount; i++) {
+        const file = formsRef.current[i].formState.file.value;
+        // Skip if already processed
+        if (processedFiles.current.has(file) || !file || !isImage(file.type)) {
+          continue;
+        }
+        processedFiles.current.add(file);
+        // Generate thumbnail and update ref
+        const thumbnailUrl = await createThumbnail(file);
+        newThumbnails[i] = thumbnailUrl;
+        thumbnailUrlsRef.current = newThumbnails;
+        // Trigger re-render in batches
+        setRenderedThumbnails([...newThumbnails]);
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+    })();
+  }, [formsCount]);
   const {
     toggleLoadingOverlay
   } = useLoadingOverlay();
@@ -174,11 +204,10 @@ export function FormsManagerProvider({
       type: 'REPLACE',
       state: {
         activeIndex: index,
-        forms: forms.map((form, i) => {
-          if (i === activeIndex) {
+        forms: forms.map((form, i_0) => {
+          if (i_0 === activeIndex) {
             return {
               errorCount: form.errorCount,
-              formID: form.formID,
               formState: currentFormsData,
               uploadEdits: form.uploadEdits
             };
@@ -189,15 +218,6 @@ export function FormsManagerProvider({
     });
   }, [forms, activeIndex]);
   const addFiles = React.useCallback(async files => {
-    if (forms.length) {
-      // save the state of the current form before adding new files
-      dispatch({
-        type: 'UPDATE_FORM',
-        errorCount: forms[activeIndex].errorCount,
-        formState: getFormDataRef.current(),
-        index: activeIndex
-      });
-    }
     toggleLoadingOverlay({
       isLoading: true,
       key: 'addingDocs'
@@ -214,13 +234,18 @@ export function FormsManagerProvider({
       isLoading: false,
       key: 'addingDocs'
     });
-  }, [initializeSharedFormState, hasInitializedState, toggleLoadingOverlay, activeIndex, forms]);
+  }, [initializeSharedFormState, hasInitializedState, toggleLoadingOverlay]);
+  const removeThumbnails = React.useCallback(indexes => {
+    thumbnailUrlsRef.current = thumbnailUrlsRef.current.filter((_, i_1) => !indexes.includes(i_1));
+    setRenderedThumbnails([...thumbnailUrlsRef.current]);
+  }, []);
   const removeFile = React.useCallback(index_0 => {
     dispatch({
       type: 'REMOVE_FORM',
       index: index_0
     });
-  }, []);
+    removeThumbnails([index_0]);
+  }, [removeThumbnails]);
   const setFormTotalErrorCount = React.useCallback(({
     errorCount,
     index: index_1
@@ -238,17 +263,16 @@ export function FormsManagerProvider({
     const currentForms = [...forms];
     currentForms[activeIndex] = {
       errorCount: currentForms[activeIndex].errorCount,
-      formID: currentForms[activeIndex].formID,
       formState: currentFormsData_0,
       uploadEdits: currentForms[activeIndex].uploadEdits
     };
     const newDocs = [];
     setIsUploading(true);
-    for (let i_0 = 0; i_0 < currentForms.length; i_0++) {
+    for (let i_2 = 0; i_2 < currentForms.length; i_2++) {
       try {
-        const form_0 = currentForms[i_0];
+        const form_0 = currentForms[i_2];
         setLoadingText(t('general:uploadingBulk', {
-          current: i_0 + 1,
+          current: i_2 + 1,
           total: currentForms.length
         }));
         const actionURLWithParams = `${actionURL}${qs.stringify({
@@ -284,23 +308,22 @@ export function FormsManagerProvider({
           }
           return [[...fieldErrs, ...newFieldErrs], [...nonFieldErrs, ...newNonFieldErrs]];
         }, [[], []]);
-        currentForms[i_0] = {
+        currentForms[i_2] = {
           errorCount: fieldErrors.length,
-          formID: currentForms[i_0].formID,
-          formState: fieldReducer(currentForms[i_0].formState, {
+          formState: fieldReducer(currentForms[i_2].formState, {
             type: 'ADD_SERVER_ERRORS',
             errors: fieldErrors
           })
         };
         if (req.status === 413 || req.status === 400) {
           // file too large
-          currentForms[i_0] = {
-            ...currentForms[i_0],
-            errorCount: currentForms[i_0].errorCount + 1
+          currentForms[i_2] = {
+            ...currentForms[i_2],
+            errorCount: currentForms[i_2].errorCount + 1
           };
           toast.error(nonFieldErrors[0]?.message);
         }
-      } catch (_) {
+      } catch (__0) {
         // swallow
       }
     }
@@ -311,11 +334,11 @@ export function FormsManagerProvider({
     const thumbnailIndexesToRemove = [];
     currentForms.forEach(({
       errorCount: errorCount_0
-    }, i_1) => {
+    }, i_3) => {
       if (errorCount_0) {
-        remainingForms.push(currentForms[i_1]);
+        remainingForms.push(currentForms[i_3]);
       } else {
-        thumbnailIndexesToRemove.push(i_1);
+        thumbnailIndexesToRemove.push(i_3);
       }
     });
     const successCount = Math.max(0, currentForms.length - remainingForms.length);
@@ -325,6 +348,9 @@ export function FormsManagerProvider({
       if (typeof onSuccess === 'function') {
         onSuccess(newDocs, errorCount_1);
       }
+      if (remainingForms.length && thumbnailIndexesToRemove.length) {
+        removeThumbnails(thumbnailIndexesToRemove);
+      }
     }
     if (errorCount_1) {
       toast.error(`Failed to save ${errorCount_1} files`);
@@ -341,17 +367,17 @@ export function FormsManagerProvider({
         }) => acc + errorCount_2, 0)
       }
     });
-  }, [actionURL, collectionSlug, getUploadHandler, t, forms, activeIndex, closeModal, drawerSlug, onSuccess]);
+  }, [actionURL, activeIndex, forms, removeThumbnails, onSuccess, collectionSlug, getUploadHandler, t, closeModal, drawerSlug]);
   const bulkUpdateForm = React.useCallback(async (updatedFields, afterStateUpdate) => {
-    for (let i_2 = 0; i_2 < forms.length; i_2++) {
+    for (let i_4 = 0; i_4 < forms.length; i_4++) {
       Object.entries(updatedFields).forEach(([path, value]) => {
-        if (forms[i_2].formState[path]) {
-          forms[i_2].formState[path].value = value;
+        if (forms[i_4].formState[path]) {
+          forms[i_4].formState[path].value = value;
           dispatch({
             type: 'UPDATE_FORM',
-            errorCount: forms[i_2].errorCount,
-            formState: forms[i_2].formState,
-            index: i_2
+            errorCount: forms[i_4].errorCount,
+            formState: forms[i_4].formState,
+            index: i_4
           });
         }
       });
@@ -365,7 +391,7 @@ export function FormsManagerProvider({
           collectionSlug,
           docPermissions,
           docPreferences: null,
-          formState: forms[i_2].formState,
+          formState: forms[i_4].formState,
           operation: 'create',
           schemaPath: collectionSlug
         });
@@ -374,7 +400,7 @@ export function FormsManagerProvider({
           type: 'UPDATE_FORM',
           errorCount: newFormErrorCount,
           formState: state_0,
-          index: i_2
+          index: i_4
         });
       }
     }
@@ -441,6 +467,7 @@ export function FormsManagerProvider({
       saveAllDocs,
       setActiveIndex,
       setFormTotalErrorCount,
+      thumbnailUrls: renderedThumbnails,
       totalErrorCount,
       updateUploadEdits
     },