@payloadcms/ui 3.0.0-beta.92 → 3.0.0-beta.94

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

@@ -13,23 +13,30 @@ import { Button } from '../../Button/index.js';
 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 { Actions } from '../ActionsBar/index.js';
 import { AddFilesView } from '../AddFilesView/index.js';
 import { useFormsManager } from '../FormsManager/index.js';
+import { useBulkUpload } from '../index.js';
 import './index.scss';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
-const drawerSlug = 'bulk-upload-drawer--add-more-files';
+const addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files';
 const baseClass = 'file-selections';
 export function FileSidebar() {
-  const $ = _c(32);
+  const $ = _c(34);
   const {
     activeIndex,
     addFiles,
     forms,
+    isInitializing,
     removeFile,
     setActiveIndex,
     totalErrorCount
   } = useFormsManager();
+  const {
+    initialFiles,
+    maxFiles
+  } = useBulkUpload();
   const {
     i18n,
     t
@@ -57,7 +64,7 @@ export function FileSidebar() {
   if ($[2] !== addFiles || $[3] !== closeModal) {
     t1 = filelist => {
       addFiles(filelist);
-      closeModal(drawerSlug);
+      closeModal(addMoreFilesDrawerSlug);
     };
     $[2] = addFiles;
     $[3] = closeModal;
@@ -67,6 +74,7 @@ export function FileSidebar() {
   }
   const handleAddFiles = t1;
   const getFileSize = _temp;
+  const totalFileCount = isInitializing ? initialFiles.length : forms.length;
   const t2 = showFiles && `${baseClass}__showingFiles`;
   let t3;
   if ($[5] !== t2) {
@@ -78,43 +86,35 @@ export function FileSidebar() {
   }
   const t4 = t3.join(" ");
   let t5;
-  if ($[7] !== breakpoints.m || $[8] !== showFiles || $[9] !== totalErrorCount || $[10] !== i18n || $[11] !== forms || $[12] !== t || $[13] !== openModal || $[14] !== closeModal || $[15] !== handleAddFiles || $[16] !== activeIndex || $[17] !== setActiveIndex || $[18] !== handleRemoveFile || $[19] !== t4) {
+  if ($[7] !== breakpoints.m || $[8] !== showFiles || $[9] !== totalErrorCount || $[10] !== i18n || $[11] !== totalFileCount || $[12] !== t || $[13] !== maxFiles || $[14] !== openModal || $[15] !== closeModal || $[16] !== handleAddFiles || $[17] !== isInitializing || $[18] !== forms || $[19] !== initialFiles || $[20] !== activeIndex || $[21] !== setActiveIndex || $[22] !== handleRemoveFile || $[23] !== t4) {
     let t6;
-    if ($[21] !== openModal) {
-      t6 = () => openModal(drawerSlug);
-      $[21] = openModal;
-      $[22] = t6;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = () => setShowFiles(prev => !prev);
+      $[25] = t6;
     } else {
-      t6 = $[22];
+      t6 = $[25];
     }
     let t7;
-    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-      t7 = () => setShowFiles(prev => !prev);
-      $[23] = t7;
+    if ($[26] !== closeModal) {
+      t7 = () => closeModal(addMoreFilesDrawerSlug);
+      $[26] = closeModal;
+      $[27] = t7;
     } else {
-      t7 = $[23];
+      t7 = $[27];
     }
     let t8;
-    if ($[24] !== closeModal) {
-      t8 = () => closeModal(drawerSlug);
-      $[24] = closeModal;
-      $[25] = t8;
-    } else {
-      t8 = $[25];
-    }
-    let t9;
-    if ($[26] !== activeIndex || $[27] !== setActiveIndex || $[28] !== i18n || $[29] !== t || $[30] !== handleRemoveFile) {
-      t9 = (t10, index) => {
+    if ($[28] !== activeIndex || $[29] !== setActiveIndex || $[30] !== i18n || $[31] !== t || $[32] !== handleRemoveFile) {
+      t8 = (t9, index_0) => {
         const {
           errorCount,
           formState
-        } = t10;
+        } = t9;
         const currentFile = formState.file.value;
         return _jsxs("div", {
-          className: [`${baseClass}__fileRowContainer`, index === activeIndex && `${baseClass}__fileRowContainer--active`, errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`].filter(Boolean).join(" "),
+          className: [`${baseClass}__fileRowContainer`, index_0 === activeIndex && `${baseClass}__fileRowContainer--active`, errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`].filter(Boolean).join(" "),
           children: [_jsxs("button", {
             className: `${baseClass}__fileRow`,
-            onClick: () => setActiveIndex(index),
+            onClick: () => setActiveIndex(index_0),
             type: "button",
             children: [_jsx("img", {
               alt: currentFile.name,
@@ -140,20 +140,20 @@ export function FileSidebar() {
           }), _jsx("button", {
             "aria-label": t("general:remove"),
             className: `${baseClass}__remove ${baseClass}__remove--overlay`,
-            onClick: () => handleRemoveFile(index),
+            onClick: () => handleRemoveFile(index_0),
             type: "button",
             children: _jsx(XIcon, {})
           })]
-        }, index);
+        }, index_0);
       };
-      $[26] = activeIndex;
-      $[27] = setActiveIndex;
-      $[28] = i18n;
-      $[29] = t;
-      $[30] = handleRemoveFile;
-      $[31] = t9;
+      $[28] = activeIndex;
+      $[29] = setActiveIndex;
+      $[30] = i18n;
+      $[31] = t;
+      $[32] = handleRemoveFile;
+      $[33] = t8;
     } else {
-      t9 = $[31];
+      t8 = $[33];
     }
     t5 = _jsxs("div", {
       className: t4,
@@ -171,28 +171,28 @@ export function FileSidebar() {
               withMessage: true
             }), _jsx("p", {
               children: _jsxs("strong", {
-                title: `${forms.length} ${t(forms.length > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
-                children: [forms.length, " ", t(forms.length > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
+                title: `${totalFileCount} ${t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
+                children: [totalFileCount, " ", t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
               })
             })]
           }), _jsxs("div", {
             className: `${baseClass}__header__actions`,
-            children: [_jsx(Pill, {
-              onClick: t6,
+            children: [typeof maxFiles === "number" && totalFileCount < maxFiles ? _jsx(Pill, {
+              onClick: () => openModal(addMoreFilesDrawerSlug),
               children: t("upload:addFile")
-            }), _jsx(Button, {
+            }) : null, _jsx(Button, {
               buttonStyle: "transparent",
               className: `${baseClass}__toggler`,
-              onClick: t7,
+              onClick: t6,
               children: _jsx(ChevronIcon, {
                 direction: showFiles ? "down" : "up"
               })
             }), _jsx(Drawer, {
               Header: null,
               gutter: false,
-              slug: drawerSlug,
+              slug: addMoreFilesDrawerSlug,
               children: _jsx(AddFilesView, {
-                onCancel: t8,
+                onCancel: t7,
                 onDrop: handleAddFiles
               })
             })]
@@ -206,9 +206,9 @@ export function FileSidebar() {
         children: _jsx(AnimateHeight, {
           duration: 200,
           height: !breakpoints.m || showFiles ? "auto" : 0,
-          children: _jsx("div", {
+          children: _jsxs("div", {
             className: `${baseClass}__filesContainer`,
-            children: forms.map(t9)
+            children: [isInitializing && forms.length === 0 && initialFiles.length > 0 ? Array.from(initialFiles).map(_temp2) : null, forms.map(t8)]
           })
         })
       })]
@@ -217,21 +217,31 @@ export function FileSidebar() {
     $[8] = showFiles;
     $[9] = totalErrorCount;
     $[10] = i18n;
-    $[11] = forms;
+    $[11] = totalFileCount;
     $[12] = t;
-    $[13] = openModal;
-    $[14] = closeModal;
-    $[15] = handleAddFiles;
-    $[16] = activeIndex;
-    $[17] = setActiveIndex;
-    $[18] = handleRemoveFile;
-    $[19] = t4;
-    $[20] = t5;
+    $[13] = maxFiles;
+    $[14] = openModal;
+    $[15] = closeModal;
+    $[16] = handleAddFiles;
+    $[17] = isInitializing;
+    $[18] = forms;
+    $[19] = initialFiles;
+    $[20] = activeIndex;
+    $[21] = setActiveIndex;
+    $[22] = handleRemoveFile;
+    $[23] = t4;
+    $[24] = t5;
   } else {
-    t5 = $[20];
+    t5 = $[24];
   }
   return t5;
 }
+function _temp2(file_0, index) {
+  return _jsx(ShimmerEffect, {
+    animationDelay: `calc(${index} * ${60}ms)`,
+    height: "35px"
+  }, index);
+}
 function _temp(file) {
   const size = file.size;
   const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","useWindowInfo","React","AnimateHeightImport","ChevronIcon","XIcon","useTranslation","Button","Drawer","ErrorPill","Pill","Actions","AddFilesView","useFormsManager","AnimateHeight","default","drawerSlug","baseClass","FileSidebar","$","activeIndex","addFiles","forms","removeFile","setActiveIndex","totalErrorCount","i18n","t","closeModal","openModal","showFiles","setShowFiles","useState","breakpoints","t0","indexToRemove","handleRemoveFile","t1","filelist","handleAddFiles","getFileSize","_temp","t2","t3","filter","Boolean","t4","join","t5","m","t6","t7","Symbol","for","prev","t8","t9","t10","index","errorCount","formState","currentFile","file","value","_jsxs","className","children","onClick","type","_jsx","alt","name","src","URL","createObjectURL","title","count","withMessage","length","buttonStyle","direction","Header","gutter","slug","onCancel","onDrop","duration","height","map","size","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 React from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/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 { Actions } from '../ActionsBar/index.js'\nimport { AddFilesView } from '../AddFilesView/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport './index.scss'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst drawerSlug = 'bulk-upload-drawer--add-more-files'\n\nconst baseClass = 'file-selections'\n\nexport function FileSidebar() {\n  const { activeIndex, addFiles, forms, removeFile, setActiveIndex, totalErrorCount } =\n    useFormsManager()\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      addFiles(filelist)\n      closeModal(drawerSlug)\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  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={`${forms.length} ${t(forms.length > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}\n              >\n                {forms.length}{' '}\n                {t(forms.length > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}\n              </strong>\n            </p>\n          </div>\n\n          <div className={`${baseClass}__header__actions`}>\n            <Pill onClick={() => openModal(drawerSlug)}>{t('upload:addFile')}</Pill>\n            <Button\n              buttonStyle=\"transparent\"\n              className={`${baseClass}__toggler`}\n              onClick={() => setShowFiles((prev) => !prev)}\n            >\n              <ChevronIcon direction={showFiles ? 'down' : 'up'} />\n            </Button>\n\n            <Drawer Header={null} gutter={false} slug={drawerSlug}>\n              <AddFilesView onCancel={() => closeModal(drawerSlug)} onDrop={handleAddFiles} />\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 duration={200} height={!breakpoints.m || showFiles ? 'auto' : 0}>\n          <div className={`${baseClass}__filesContainer`}>\n            {forms.map(({ errorCount, formState }, index) => {\n              const currentFile = formState.file.value 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                    <img alt={currentFile.name} src={URL.createObjectURL(currentFile)} />\n                    <div className={`${baseClass}__fileDetails`}>\n                      <p className={`${baseClass}__fileName`} title={currentFile.name}>\n                        {currentFile.name}\n                      </p>\n                    </div>\n                    <p className={`${baseClass}__fileSize`}>{getFileSize(currentFile)}</p>\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":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,MAAW;AAClB,OAAOC,mBAAA,MAAyB;AAEhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,IAAI,QAAQ;AACrB,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,aAAA,GAAiBX,mBAAA,CAAoBY,OAAO,IAChDZ,mBAAA;AAEF,MAAMa,UAAA,GAAa;AAEnB,MAAMC,SAAA,GAAY;AAElB,OAAO,SAAAC,YAAA;EAAA,MAAAC,CAAA,GAAApB,EAAA;EACL;IAAAqB,WAAA;IAAAC,QAAA;IAAAC,KAAA;IAAAC,UAAA;IAAAC,cAAA;IAAAC;EAAA,IACEZ,eAAA;EACF;IAAAa,IAAA;IAAAC;EAAA,IAAoBrB,cAAA;EACpB;IAAAsB,UAAA;IAAAC;EAAA,IAAkC7B,QAAA;EAClC,OAAA8B,SAAA,EAAAC,YAAA,IAAkC7B,KAAA,CAAA8B,QAAA,MAAe;EACjD;IAAAC;EAAA,IAAwBhC,aAAA;EAAA,IAAAiC,EAAA;EAAA,IAAAf,CAAA,QAAAI,UAAA;IAGtBW,EAAA,GAAAC,aAAA;MACEZ,UAAA,CAAWY,aAAA;IAAA;IACbhB,CAAA,MAAAI,UAAA;IAAAJ,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAHF,MAAAiB,gBAAA,GAAyBF,EAIX;EAAA,IAAAG,EAAA;EAAA,IAAAlB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAS,UAAA;IAIZS,EAAA,GAAAC,QAAA;MACEjB,QAAA,CAASiB,QAAA;MACTV,UAAA,CAAAZ,UAAW;IAAA;IACbG,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAJF,MAAAoB,cAAA,GAAuBF,EAKC;EAGxB,MAAAG,WAAA,GAAAC,KAAA;EAW2B,MAAAC,EAAA,GAAAZ,SAAA,IAAa,GAAAb,SAAA,gBAA4B;EAAA,IAAA0B,EAAA;EAAA,IAAAxB,CAAA,QAAAuB,EAAA;IAArDC,EAAA,IAAA1B,SAAA,EAAYyB,EAAyC,EAAAE,MAAA,CAAAC,OAAS;IAAA1B,CAAA,MAAAuB,EAAA;IAAAvB,CAAA,MAAAwB,EAAA;EAAA;IAAAA,EAAA,GAAAxB,CAAA;EAAA;EAA9D,MAAA2B,EAAA,GAAAH,EAA8D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAA7B,CAAA,QAAAc,WAAA,CAAAgB,CAAA,IAAA9B,CAAA,QAAAW,SAAA,IAAAX,CAAA,QAAAM,eAAA,IAAAN,CAAA,SAAAO,IAAA,IAAAP,CAAA,SAAAG,KAAA,IAAAH,CAAA,SAAAQ,CAAA,IAAAR,CAAA,SAAAU,SAAA,IAAAV,CAAA,SAAAS,UAAA,IAAAT,CAAA,SAAAoB,cAAA,IAAApB,CAAA,SAAAC,WAAA,IAAAD,CAAA,SAAAK,cAAA,IAAAL,CAAA,SAAAiB,gBAAA,IAAAjB,CAAA,SAAA2B,EAAA;IAAA,IAAAI,EAAA;IAAA,IAAA/B,CAAA,SAAAU,SAAA;MAkBlEqB,EAAA,GAAAA,CAAA,KAAMrB,SAAA,CAAAb,UAAU;MAAAG,CAAA,OAAAU,SAAA;MAAAV,CAAA,OAAA+B,EAAA;IAAA;MAAAA,EAAA,GAAA/B,CAAA;IAAA;IAAA,IAAAgC,EAAA;IAAA,IAAAhC,CAAA,SAAAiC,MAAA,CAAAC,GAAA;MAIpBF,EAAA,GAAAA,CAAA,KAAMpB,YAAA,CAAAuB,IAAA,KAAwBA,IAAA;MAAAnC,CAAA,OAAAgC,EAAA;IAAA;MAAAA,EAAA,GAAAhC,CAAA;IAAA;IAAA,IAAAoC,EAAA;IAAA,IAAApC,CAAA,SAAAS,UAAA;MAMf2B,EAAA,GAAAA,CAAA,KAAM3B,UAAA,CAAAZ,UAAW;MAAAG,CAAA,OAAAS,UAAA;MAAAT,CAAA,OAAAoC,EAAA;IAAA;MAAAA,EAAA,GAAApC,CAAA;IAAA;IAAA,IAAAqC,EAAA;IAAA,IAAArC,CAAA,SAAAC,WAAA,IAAAD,CAAA,SAAAK,cAAA,IAAAL,CAAA,SAAAO,IAAA,IAAAP,CAAA,SAAAQ,CAAA,IAAAR,CAAA,SAAAiB,gBAAA;MAahCoB,EAAA,GAAAA,CAAAC,GAAA,EAAAC,KAAA;QAAC;UAAAC,UAAA;UAAAC;QAAA,IAAAH,GAAyB;QACnC,MAAAI,WAAA,GAAoBD,SAAA,CAAAE,IAAA,CAAAC,KAAA;QAAoB,OAGtCC,KAAA,CAAC;UAAAC,SAAA,EACY,CACT,GAAAhD,SAAA,oBAAgC,EAChCyC,KAAA,KAAUtC,WAAA,IAAe,GAAAH,SAAA,4BAAwC,EACjE0C,UAAA,IAAcA,UAAA,IAAa,IAAK,GAAA1C,SAAA,2BAAuC,EAAA2B,MAAA,CAAAC,OAE/D,EAAAE,IAAA,CACF;UAAAmB,QAAA,GAGRF,KAAA,CAAC;YAAAC,SAAA,EACY,GAAAhD,SAAA,WAAuB;YAAAkD,OAAA,EAAAA,CAAA,KACnB3C,cAAA,CAAekC,KAAA;YAAAU,IAAA,EACzB;YAAAF,QAAA,GAELG,IAAA,CAAC;cAAAC,GAAA,EAAST,WAAA,CAAAU,IAAA;cAAAC,GAAA,EAAuBC,GAAA,CAAAC,eAAA,CAAoBb,WAAA;YAAA,C,GACrDQ,IAAA,CAAC;cAAAJ,SAAA,EAAe,GAAAhD,SAAA,eAA2B;cAAAiD,QAAA,EACzCG,IAAA,CAAC;gBAAAJ,SAAA,EAAa,GAAAhD,SAAA,YAAwB;gBAAA0D,KAAA,EAASd,WAAA,CAAAU,IAAA;gBAAAL,QAAA,EAC5CL,WAAA,CAAAU;cAAA,C;gBAGLF,IAAA,CAAC;cAAAJ,SAAA,EAAa,GAAAhD,SAAA,YAAwB;cAAAiD,QAAA,EAAG1B,WAAA,CAAYqB,WAAA;YAAA,C,GACrDQ,IAAA,CAAC;cAAAJ,SAAA,EAAe,GAAAhD,SAAA,YAAAA,SAAA,oBAAqD;cAAAiD,QAAA,EACnEG,IAAA,CAAAhE,KAAA,IAAC;YAAA,C,GAGFsD,UAAA,GACCU,IAAA,CAAA5D,SAAA;cAAAwD,SAAA,EACa,GAAAhD,SAAA,cAA0B;cAAA2D,KAAA,EAC9BjB,UAAA;cAAAjC;YAAA,C,QAGP;UAAA,C,GAGN2C,IAAA,CAAC;YAAA,cACa1C,CAAA,CAAE;YAAAsC,SAAA,EACH,GAAAhD,SAAA,YAAAA,SAAA,mBAAoD;YAAAkD,OAAA,EAAAA,CAAA,KAChD/B,gBAAA,CAAiBsB,KAAA;YAAAU,IAAA,EAC3B;YAAAF,QAAA,EAELG,IAAA,CAAAhE,KAAA,IAAC;UAAA,C;WAjCEqD,KAAA;MAAA;MAqCXvC,CAAA,OAAAC,WAAA;MAAAD,CAAA,OAAAK,cAAA;MAAAL,CAAA,OAAAO,IAAA;MAAAP,CAAA,OAAAQ,CAAA;MAAAR,CAAA,OAAAiB,gBAAA;MAAAjB,CAAA,OAAAqC,EAAA;IAAA;MAAAA,EAAA,GAAArC,CAAA;IAAA;IA3FR6B,EAAA,GAAAgB,KAAA,CAAC;MAAAC,SAAA,EACYnB,EAA4E;MAAAoB,QAAA,GAEtFjC,WAAA,CAAAgB,CAAA,IAAiBnB,SAAA,GAAYuC,IAAA,CAAC;QAAAJ,SAAA,EAAe,GAAAhD,SAAA;MAA0B,C,QAAO,EAC/E+C,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAAhD,SAAA,UAAsB;QAAAiD,QAAA,GACpCF,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAAhD,SAAA,gBAA4B;UAAAiD,QAAA,GAC1CF,KAAA,CAAC;YAAAC,SAAA,EAAe,GAAAhD,SAAA,gBAA4B;YAAAiD,QAAA,GAC1CG,IAAA,CAAA5D,SAAA;cAAAmE,KAAA,EAAkBnD,eAAA;cAAAC,IAAA;cAAAmD,WAAA;YAAA,C,GAClBR,IAAA,CAAC;cAAAH,QAAA,EACCF,KAAA,CAAC;gBAAAW,KAAA,EACQ,GAAGrD,KAAA,CAAAwD,MAAA,IAAgBnD,CAAA,CAAEL,KAAA,CAAAwD,MAAA,IAAe,GAAI,yBAAyB,wBAAwB;gBAAAZ,QAAA,GAE/F5C,KAAA,CAAAwD,MAAA,EAAc,KACdnD,CAAA,CAAEL,KAAA,CAAAwD,MAAA,IAAe,GAAI,yBAAyB;cAAA,C;;cAKrDd,KAAA,CAAC;YAAAC,SAAA,EAAe,GAAAhD,SAAA,mBAA+B;YAAAiD,QAAA,GAC7CG,IAAA,CAAA3D,IAAA;cAAAyD,OAAA,EAAejB,EAAgB;cAAAgB,QAAA,EAAcvC,CAAA,CAAE;YAAA,C,GAC/C0C,IAAA,CAAA9D,MAAA;cAAAwE,WAAA,EACc;cAAAd,SAAA,EACD,GAAAhD,SAAA,WAAuB;cAAAkD,OAAA,EACzBhB,EAA8B;cAAAe,QAAA,EAEvCG,IAAA,CAAAjE,WAAA;gBAAA4E,SAAA,EAAwBlD,SAAA,GAAY,SAAS;cAAA,C;gBAG/CuC,IAAA,CAAA7D,MAAA;cAAAyE,MAAA;cAAAC,MAAA;cAAAC,IAAA,EAAAnE,UAAA;cAAAkD,QAAA,EACEG,IAAA,CAAAzD,YAAA;gBAAAwE,QAAA,EAAwB7B,EAAiB;gBAAA8B,MAAA,EAAqB9C;cAAA,C;;;YAKpE8B,IAAA,CAAC;UAAAJ,SAAA,EAAe,GAAAhD,SAAA,4BAAwC;UAAAiD,QAAA,EACtDG,IAAA,CAAA1D,OAAA,IAAC;QAAA,C;UAIL0D,IAAA,CAAC;QAAAJ,SAAA,EAAe,GAAAhD,SAAA,kBAA8B;QAAAiD,QAAA,EAC5CG,IAAA,CAAAvD,aAAA;UAAAwE,QAAA;UAAAC,MAAA,EAAsC,CAACtD,WAAA,CAAAgB,CAAA,IAAiBnB,SAAA,GAAY,UAAS;UAAAoC,QAAA,EAC3EG,IAAA,CAAC;YAAAJ,SAAA,EAAe,GAAAhD,SAAA,kBAA8B;YAAAiD,QAAA,EAC3C5C,KAAA,CAAAkE,GAAA,CAAUhC,EAiDX;UAAA,C;;;;;;;;;;;;;;;;;;;;;SA3FRR,E;;AAjCG,SAAAP,MAAAqB,IAAA;EAwBH,MAAA2B,IAAA,GAAa3B,IAAA,CAAA2B,IAAA;EACb,MAAAC,CAAA,GAAUD,IAAA,MAAS,OAAQE,IAAA,CAAAC,KAAA,CAAWD,IAAA,CAAAE,GAAA,CAASJ,IAAA,IAAQE,IAAA,CAAAE,GAAA,KAAS;EAChE,MAAAC,QAAA,GAAiBJ,CAAA,IAAI,QAAQ;EAC7B,MAAAK,aAAA,GACE,CAACN,IAAA,GAAOE,IAAA,CAAAK,GAAA,OAAeN,CAAA,CAAC,EAAAO,OAAA,CAAWH,QAAA,IAAY,OAAO,KAAK,MAAM,MAAM,MAAM,MAAMJ,CAAA,CAAE;EAAA,OAChFK,aAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","useWindowInfo","React","AnimateHeightImport","ChevronIcon","XIcon","useTranslation","Button","Drawer","ErrorPill","Pill","ShimmerEffect","Actions","AddFilesView","useFormsManager","useBulkUpload","AnimateHeight","default","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","prev","t7","t8","t9","index_0","errorCount","formState","currentFile","file","value","_jsxs","className","index","children","onClick","type","_jsx","alt","name","src","URL","createObjectURL","title","count","withMessage","buttonStyle","direction","Header","gutter","slug","onCancel","onDrop","duration","height","Array","from","map","_temp2","file_0","animationDelay","size","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 React from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/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 { 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 AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\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 ? (\n              <Pill onClick={() => openModal(addMoreFilesDrawerSlug)}>{t('upload:addFile')}</Pill>\n            ) : null}\n            <Button\n              buttonStyle=\"transparent\"\n              className={`${baseClass}__toggler`}\n              onClick={() => setShowFiles((prev) => !prev)}\n            >\n              <ChevronIcon direction={showFiles ? 'down' : 'up'} />\n            </Button>\n\n            <Drawer Header={null} gutter={false} 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 duration={200} 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\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                    <img alt={currentFile.name} src={URL.createObjectURL(currentFile)} />\n                    <div className={`${baseClass}__fileDetails`}>\n                      <p className={`${baseClass}__fileName`} title={currentFile.name}>\n                        {currentFile.name}\n                      </p>\n                    </div>\n                    <p className={`${baseClass}__fileSize`}>{getFileSize(currentFile)}</p>\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

@@ -53,6 +53,10 @@
     margin-top: calc(var(--base) / 2);
     width: 100%;
     padding-inline: var(--file-gutter-h);
+
+    .shimmer-effect {
+      border-radius: var(--style-radius-m);
+    }
   }
   
   &__fileRowContainer {

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

@@ -1,10 +1,9 @@
 import type { Data, DocumentPermissions } from 'payload';
 import React from 'react';
-import type { BulkUploadProps } from '../index.js';
 import type { State } from './reducer.js';
 type FormsManagerContext = {
     readonly activeIndex: State['activeIndex'];
-    readonly addFiles: (filelist: FileList) => void;
+    readonly addFiles: (filelist: FileList) => Promise<void>;
     readonly collectionSlug: string;
     readonly docPermissions?: DocumentPermissions;
     readonly forms: State['forms'];
@@ -12,7 +11,7 @@ type FormsManagerContext = {
     readonly hasPublishPermission: boolean;
     readonly hasSavePermission: boolean;
     readonly hasSubmitted: boolean;
-    readonly isLoadingFiles: boolean;
+    readonly isInitializing: boolean;
     readonly removeFile: (index: number) => void;
     readonly saveAllDocs: ({ overrides }?: {
         overrides?: Record<string, unknown>;
@@ -24,12 +23,10 @@ type FormsManagerContext = {
     }) => void;
     readonly totalErrorCount?: number;
 };
-type Props = {
+type FormsManagerProps = {
     readonly children: React.ReactNode;
-    readonly collectionSlug: string;
-    readonly onSuccess: BulkUploadProps['onSuccess'];
 };
-export declare function FormsManagerProvider({ children, collectionSlug, onSuccess }: Props): React.JSX.Element;
+export declare function FormsManagerProvider({ children }: FormsManagerProps): React.JSX.Element;
 export declare function useFormsManager(): FormsManagerContext;
 export {};
 //# sourceMappingURL=index.d.ts.map

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,EAAE,IAAI,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAA;AAInE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAazC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;IAC1C,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,mBAAmB,CAAA;IAC7C,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,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;CAClC,CAAA;AA0BD,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;CACjD,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,KAAK,qBA2RlF;AAED,wBAAgB,eAAe,wBAE9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FormsManager/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAA;AAInE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAazC,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,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,mBAAmB,CAAA;IAC7C,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,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;CAClC,CAAA;AA0BD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC,CAAA;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAuTnE;AAED,wBAAgB,eAAe,wBAE9B"}

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

@@ -12,12 +12,12 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import { getFormState } from '../../../utilities/getFormState.js';
 import { hasSavePermission as getHasSavePermission } from '../../../utilities/hasSavePermission.js';
 import { useLoadingOverlay } from '../../LoadingOverlay/index.js';
-import { drawerSlug } from '../index.js';
+import { useBulkUpload } from '../index.js';
 import { createFormData } from './createFormData.js';
 import { formsManagementReducer } from './reducer.js';
 const Context = /*#__PURE__*/React.createContext({
   activeIndex: 0,
-  addFiles: () => {},
+  addFiles: () => Promise.resolve(),
   collectionSlug: '',
   docPermissions: undefined,
   forms: [],
@@ -27,7 +27,7 @@ const Context = /*#__PURE__*/React.createContext({
   hasPublishPermission: false,
   hasSavePermission: false,
   hasSubmitted: false,
-  isLoadingFiles: true,
+  isInitializing: false,
   removeFile: () => {},
   saveAllDocs: () => Promise.resolve(),
   setActiveIndex: () => 0,
@@ -40,9 +40,7 @@ const initialState = {
   totalErrorCount: 0
 };
 export function FormsManagerProvider({
-  children,
-  collectionSlug,
-  onSuccess
+  children
 }) {
   const {
     config
@@ -56,18 +54,17 @@ export function FormsManagerProvider({
   const {
     code
   } = useLocale();
-  const {
-    closeModal
-  } = useModal();
   const {
     i18n,
     t
   } = useTranslation();
-  const [isLoadingFiles, setIsLoadingFiles] = React.useState(false);
   const [hasSubmitted, setHasSubmitted] = React.useState(false);
   const [docPermissions, setDocPermissions] = React.useState();
   const [hasSavePermission, setHasSavePermission] = React.useState(false);
   const [hasPublishPermission, setHasPublishPermission] = React.useState(false);
+  const [hasInitializedState, setHasInitializedState] = React.useState(false);
+  const [hasInitializedDocPermissions, setHasInitializedDocPermissions] = React.useState(false);
+  const [isInitializing, setIsInitializing] = React.useState(false);
   const [state, dispatch] = React.useReducer(formsManagementReducer, initialState);
   const {
     activeIndex,
@@ -77,16 +74,20 @@ export function FormsManagerProvider({
   const {
     toggleLoadingOverlay
   } = useLoadingOverlay();
+  const {
+    closeModal
+  } = useModal();
+  const {
+    collectionSlug,
+    drawerSlug,
+    initialFiles,
+    onSuccess
+  } = useBulkUpload();
+  const hasInitializedWithFiles = React.useRef(false);
   const initialStateRef = React.useRef(null);
-  const hasFetchedInitialFormState = React.useRef(false);
   const getFormDataRef = React.useRef(() => ({}));
-  const initialFormStateAbortControllerRef = React.useRef(null);
-  const hasFetchedInitialDocPermissions = React.useRef(false);
-  const initialDocPermissionsAbortControllerRef = React.useRef(null);
   const actionURL = `${api}/${collectionSlug}`;
   const initilizeSharedDocPermissions = React.useCallback(async () => {
-    if (initialDocPermissionsAbortControllerRef.current) initialDocPermissionsAbortControllerRef.current.abort('aborting previous fetch for initial doc permissions');
-    initialDocPermissionsAbortControllerRef.current = new AbortController();
     const params = {
       locale: code || undefined
     };
@@ -97,8 +98,7 @@ export function FormsManagerProvider({
         'Accept-Language': i18n.language,
         'Content-Type': 'application/json'
       },
-      method: 'post',
-      signal: initialDocPermissionsAbortControllerRef.current.signal
+      method: 'post'
     });
     const json = await res.json();
     const publishedAccessJSON = await fetch(`${serverURL}${api}${docAccessURL}?${qs.stringify(params)}`, {
@@ -119,10 +119,12 @@ export function FormsManagerProvider({
       isEditing: false
     }));
     setHasPublishPermission(publishedAccessJSON?.update?.permission);
+    setHasInitializedDocPermissions(true);
   }, [api, code, collectionSlug, i18n.language, serverURL]);
-  const initializeSharedFormState = React.useCallback(async () => {
-    if (initialFormStateAbortControllerRef.current) initialFormStateAbortControllerRef.current.abort('aborting previous fetch for initial form state without files');
-    initialFormStateAbortControllerRef.current = new AbortController();
+  const initializeSharedFormState = React.useCallback(async abortController => {
+    if (abortController?.signal) {
+      abortController.abort('aborting previous fetch for initial form state without files');
+    }
     try {
       const formStateWithoutFiles = await getFormState({
         apiRoute: config.routes.api,
@@ -134,10 +136,10 @@ export function FormsManagerProvider({
         },
         // onError: onLoadError,
         serverURL: config.serverURL,
-        signal: initialFormStateAbortControllerRef.current.signal
+        signal: abortController?.signal
       });
       initialStateRef.current = formStateWithoutFiles;
-      hasFetchedInitialFormState.current = true;
+      setHasInitializedState(true);
     } catch (error) {
       // swallow error
     }
@@ -160,15 +162,24 @@ export function FormsManagerProvider({
       }
     });
   }, [forms, activeIndex]);
-  const addFiles = React.useCallback(files => {
-    setIsLoadingFiles(true);
+  const addFiles = React.useCallback(async files => {
+    toggleLoadingOverlay({
+      isLoading: true,
+      key: 'addingDocs'
+    });
+    if (!hasInitializedState) {
+      await initializeSharedFormState();
+    }
     dispatch({
       type: 'ADD_FORMS',
       files,
       initialState: initialStateRef.current
     });
-    setIsLoadingFiles(false);
-  }, []);
+    toggleLoadingOverlay({
+      isLoading: false,
+      key: 'addingDocs'
+    });
+  }, [initializeSharedFormState, hasInitializedState, toggleLoadingOverlay]);
   const removeFile = React.useCallback(index_0 => {
     dispatch({
       type: 'REMOVE_FORM',
@@ -194,6 +205,7 @@ export function FormsManagerProvider({
       errorCount: currentForms[activeIndex].errorCount,
       formState: currentFormsData_0
     };
+    const newDocs = [];
     const promises = currentForms.map(async (form_0, i_0) => {
       try {
         toggleLoadingOverlay({
@@ -206,6 +218,9 @@ export function FormsManagerProvider({
           method: 'POST'
         });
         const json_0 = await req.json();
+        if (req.status === 201 && json_0?.doc) {
+          newDocs.push(json_0.doc);
+        }
         // should expose some sort of helper for this
         if (json_0?.errors?.length) {
           const [fieldErrors, nonFieldErrors] = json_0.errors.reduce(([fieldErrs, nonFieldErrs], err) => {
@@ -251,15 +266,14 @@ export function FormsManagerProvider({
     const errorCount_1 = currentForms.length - successCount;
     if (successCount) {
       toast.success(`Successfully saved ${successCount} files`);
-      if (errorCount_1 === 0) {
-        closeModal(drawerSlug);
-      }
       if (typeof onSuccess === 'function') {
-        onSuccess();
+        onSuccess(newDocs, errorCount_1);
       }
     }
     if (errorCount_1) {
       toast.error(`Failed to save ${errorCount_1} files`);
+    } else {
+      closeModal(drawerSlug);
     }
     dispatch({
       type: 'REPLACE',
@@ -271,16 +285,28 @@ export function FormsManagerProvider({
         }) => acc + errorCount_2, 0)
       }
     });
-  }, [actionURL, activeIndex, closeModal, forms, onSuccess]);
+  }, [actionURL, activeIndex, forms, onSuccess, t, toggleLoadingOverlay, closeModal, drawerSlug]);
   React.useEffect(() => {
-    if (!hasFetchedInitialFormState.current) {
+    if (!collectionSlug) return;
+    if (!hasInitializedState) {
       void initializeSharedFormState();
     }
-    if (!hasFetchedInitialDocPermissions.current) {
+    if (!hasInitializedDocPermissions) {
       void initilizeSharedDocPermissions();
     }
+    if (initialFiles) {
+      if (!hasInitializedState || !hasInitializedDocPermissions) {
+        setIsInitializing(true);
+      } else {
+        setIsInitializing(false);
+      }
+    }
+    if (hasInitializedState && initialFiles && !hasInitializedWithFiles.current) {
+      void addFiles(initialFiles);
+      hasInitializedWithFiles.current = true;
+    }
     return;
-  }, [initializeSharedFormState, initilizeSharedDocPermissions]);
+  }, [addFiles, initialFiles, initializeSharedFormState, initilizeSharedDocPermissions, collectionSlug, hasInitializedState, hasInitializedDocPermissions]);
   return /*#__PURE__*/_jsx(Context.Provider, {
     value: {
       activeIndex: state.activeIndex,
@@ -292,7 +318,7 @@ export function FormsManagerProvider({
       hasPublishPermission,
       hasSavePermission,
       hasSubmitted,
-      isLoadingFiles,
+      isInitializing,
       removeFile,
       saveAllDocs,
       setActiveIndex,