@payloadcms/ui 3.13.0 → 3.14.0

package/dist/fields/Upload/Input.js

@@ -24,7 +24,7 @@ import { UploadComponentHasOne } from './HasOne/index.js';
 import './index.scss';
 export const baseClass = 'upload';
 export function UploadInput(props) {
-  const $ = _c(130);
+  const $ = _c(134);
   const {
     AfterInput,
     allowCreate,
@@ -220,7 +220,7 @@ export function UploadInput(props) {
   }
   const onChange = t14;
   let t15;
-  if ($[31] !== api || $[32] !== code || $[33] !== i18n.language || $[34] !== serverURL) {
+  if ($[31] !== api || $[32] !== code || $[33] !== hasMany || $[34] !== i18n.language || $[35] !== serverURL || $[36] !== t) {
     t15 = async (ids, relatedCollectionSlug) => {
       const query = {
         depth: 0,
@@ -247,7 +247,14 @@ export function UploadInput(props) {
       });
       if (response.ok) {
         const json = await response.json();
-        const sortedDocs = ids.map(id => json.docs.find(doc => String(doc.id) === String(id)));
+        let sortedDocs = ids.map(id => json.docs.find(doc => String(doc.id) === String(id)));
+        if (sortedDocs.includes(undefined) && hasMany) {
+          sortedDocs = sortedDocs.map((doc_0, index) => doc_0 ? doc_0 : {
+            id: ids[index],
+            filename: `${t("general:untitled")} - ID: ${ids[index]}`,
+            isPlaceholder: true
+          });
+        }
         return {
           ...json,
           docs: sortedDocs
@@ -257,22 +264,24 @@ export function UploadInput(props) {
     };
     $[31] = api;
     $[32] = code;
-    $[33] = i18n.language;
-    $[34] = serverURL;
-    $[35] = t15;
+    $[33] = hasMany;
+    $[34] = i18n.language;
+    $[35] = serverURL;
+    $[36] = t;
+    $[37] = t15;
   } else {
-    t15 = $[35];
+    t15 = $[37];
   }
   const populateDocs = t15;
   let t16;
-  if ($[36] !== activeRelationTo || $[37] !== hasMany || $[38] !== onChange || $[39] !== value) {
+  if ($[38] !== activeRelationTo || $[39] !== hasMany || $[40] !== onChange || $[41] !== value) {
     t16 = newDocs => {
       if (hasMany) {
         const mergedValue = [...(Array.isArray(value) ? value : []), ...newDocs.map(_temp)];
         onChange(mergedValue);
-        setPopulatedDocs(currentDocs => [...(currentDocs || []), ...newDocs.map(doc_1 => ({
+        setPopulatedDocs(currentDocs => [...(currentDocs || []), ...newDocs.map(doc_2 => ({
           relationTo: activeRelationTo,
-          value: doc_1
+          value: doc_2
         }))]);
       } else {
         const firstDoc = newDocs[0];
@@ -283,17 +292,17 @@ export function UploadInput(props) {
         }]);
       }
     };
-    $[36] = activeRelationTo;
-    $[37] = hasMany;
-    $[38] = onChange;
-    $[39] = value;
-    $[40] = t16;
+    $[38] = activeRelationTo;
+    $[39] = hasMany;
+    $[40] = onChange;
+    $[41] = value;
+    $[42] = t16;
   } else {
-    t16 = $[40];
+    t16 = $[42];
   }
   const onUploadSuccess = t16;
   let t17;
-  if ($[41] !== drawerSlug || $[42] !== hasMany || $[43] !== maxRows || $[44] !== openModal || $[45] !== path || $[46] !== relationTo || $[47] !== setCollectionSlug || $[48] !== setCurrentActivePath || $[49] !== setInitialFiles || $[50] !== setMaxFiles) {
+  if ($[43] !== drawerSlug || $[44] !== hasMany || $[45] !== maxRows || $[46] !== openModal || $[47] !== path || $[48] !== relationTo || $[49] !== setCollectionSlug || $[50] !== setCurrentActivePath || $[51] !== setInitialFiles || $[52] !== setMaxFiles) {
     t17 = fileList => {
       let fileListToUse = fileList;
       if (!hasMany && fileList && fileList.length > 1) {
@@ -311,23 +320,23 @@ export function UploadInput(props) {
       setCurrentActivePath(path);
       openModal(drawerSlug);
     };
-    $[41] = drawerSlug;
-    $[42] = hasMany;
-    $[43] = maxRows;
-    $[44] = openModal;
-    $[45] = path;
-    $[46] = relationTo;
-    $[47] = setCollectionSlug;
-    $[48] = setCurrentActivePath;
-    $[49] = setInitialFiles;
-    $[50] = setMaxFiles;
-    $[51] = t17;
+    $[43] = drawerSlug;
+    $[44] = hasMany;
+    $[45] = maxRows;
+    $[46] = openModal;
+    $[47] = path;
+    $[48] = relationTo;
+    $[49] = setCollectionSlug;
+    $[50] = setCurrentActivePath;
+    $[51] = setInitialFiles;
+    $[52] = setMaxFiles;
+    $[53] = t17;
   } else {
-    t17 = $[51];
+    t17 = $[53];
   }
   const onLocalFileSelection = t17;
   let t18;
-  if ($[52] !== activeRelationTo || $[53] !== closeListDrawer || $[54] !== onChange || $[55] !== populateDocs || $[56] !== value) {
+  if ($[54] !== activeRelationTo || $[55] !== closeListDrawer || $[56] !== onChange || $[57] !== populateDocs || $[58] !== value) {
     t18 = async docs => {
       const selectedDocIDs = [];
       for (const [id_0, isSelected] of docs) {
@@ -337,26 +346,26 @@ export function UploadInput(props) {
       }
       const loadedDocs = await populateDocs(selectedDocIDs, activeRelationTo);
       if (loadedDocs) {
-        setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs.docs.map(doc_2 => ({
+        setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs.docs.map(doc_3 => ({
           relationTo: activeRelationTo,
-          value: doc_2
+          value: doc_3
         }))]);
       }
       onChange([...(Array.isArray(value) ? value : []), ...selectedDocIDs]);
       closeListDrawer();
     };
-    $[52] = activeRelationTo;
-    $[53] = closeListDrawer;
-    $[54] = onChange;
-    $[55] = populateDocs;
-    $[56] = value;
-    $[57] = t18;
+    $[54] = activeRelationTo;
+    $[55] = closeListDrawer;
+    $[56] = onChange;
+    $[57] = populateDocs;
+    $[58] = value;
+    $[59] = t18;
   } else {
-    t18 = $[57];
+    t18 = $[59];
   }
   const onListBulkSelect = t18;
   let t19;
-  if ($[58] !== activeRelationTo || $[59] !== closeCreateDocDrawer || $[60] !== onChange) {
+  if ($[60] !== activeRelationTo || $[61] !== closeCreateDocDrawer || $[62] !== onChange) {
     t19 = data => {
       if (data.doc) {
         setPopulatedDocs(currentDocs_1 => [...(currentDocs_1 || []), {
@@ -367,16 +376,16 @@ export function UploadInput(props) {
       }
       closeCreateDocDrawer();
     };
-    $[58] = activeRelationTo;
-    $[59] = closeCreateDocDrawer;
-    $[60] = onChange;
-    $[61] = t19;
+    $[60] = activeRelationTo;
+    $[61] = closeCreateDocDrawer;
+    $[62] = onChange;
+    $[63] = t19;
   } else {
-    t19 = $[61];
+    t19 = $[63];
   }
   const onDocCreate = t19;
   let t20;
-  if ($[62] !== activeRelationTo || $[63] !== closeListDrawer || $[64] !== hasMany || $[65] !== onChange || $[66] !== populateDocs || $[67] !== value) {
+  if ($[64] !== activeRelationTo || $[65] !== closeListDrawer || $[66] !== hasMany || $[67] !== onChange || $[68] !== populateDocs || $[69] !== value) {
     t20 = async t21 => {
       const {
         collectionSlug,
@@ -406,82 +415,93 @@ export function UploadInput(props) {
       }
       closeListDrawer();
     };
-    $[62] = activeRelationTo;
-    $[63] = closeListDrawer;
-    $[64] = hasMany;
-    $[65] = onChange;
-    $[66] = populateDocs;
-    $[67] = value;
-    $[68] = t20;
+    $[64] = activeRelationTo;
+    $[65] = closeListDrawer;
+    $[66] = hasMany;
+    $[67] = onChange;
+    $[68] = populateDocs;
+    $[69] = value;
+    $[70] = t20;
   } else {
-    t20 = $[68];
+    t20 = $[70];
   }
   const onListSelect = t20;
   let t21;
-  if ($[69] !== populateDocs) {
+  if ($[71] !== hasMany || $[72] !== onChange || $[73] !== populateDocs) {
     t21 = async (docID_0, collectionSlug_0) => {
       const {
         docs: docs_0
       } = await populateDocs([docID_0], collectionSlug_0);
       if (docs_0[0]) {
+        let updatedDocsToPropogate;
+        updatedDocsToPropogate = [];
         setPopulatedDocs(currentDocs_3 => {
-          const existingDocIndex = currentDocs_3?.findIndex(doc_3 => doc_3.value.id === docs_0[0].id && doc_3.relationTo === collectionSlug_0);
+          const existingDocIndex = currentDocs_3?.findIndex(doc_4 => {
+            const hasExisting = doc_4.value?.id === docs_0[0].id || doc_4.value?.isPlaceholder;
+            return hasExisting && doc_4.relationTo === collectionSlug_0;
+          });
           if (existingDocIndex > -1) {
             const updatedDocs = [...currentDocs_3];
             updatedDocs[existingDocIndex] = {
               relationTo: collectionSlug_0,
               value: docs_0[0]
             };
+            updatedDocsToPropogate = updatedDocs;
             return updatedDocs;
           }
         });
+        if (updatedDocsToPropogate.length && hasMany) {
+          onChange(updatedDocsToPropogate.map(_temp2));
+        }
       }
     };
-    $[69] = populateDocs;
-    $[70] = t21;
+    $[71] = hasMany;
+    $[72] = onChange;
+    $[73] = populateDocs;
+    $[74] = t21;
   } else {
-    t21 = $[70];
+    t21 = $[74];
   }
   const reloadDoc = t21;
   let t22;
-  if ($[71] !== onChange) {
+  if ($[75] !== onChange) {
     t22 = newValue_0 => {
-      const newValueIDs = newValue_0.map(_temp2);
+      const newValueIDs = newValue_0.map(_temp3);
       onChange(newValueIDs);
       setPopulatedDocs(newValue_0);
     };
-    $[71] = onChange;
-    $[72] = t22;
+    $[75] = onChange;
+    $[76] = t22;
   } else {
-    t22 = $[72];
+    t22 = $[76];
   }
   const onReorder = t22;
   let t23;
-  if ($[73] !== hasMany || $[74] !== onChange) {
+  if ($[77] !== hasMany || $[78] !== onChange) {
     t23 = newValue_1 => {
-      const newValueIDs_0 = newValue_1 ? newValue_1.map(_temp3) : null;
+      const newValueIDs_0 = newValue_1 ? newValue_1.map(_temp4) : null;
       onChange(hasMany ? newValueIDs_0 : newValueIDs_0 ? newValueIDs_0[0] : null);
       setPopulatedDocs(newValue_1 ? newValue_1 : []);
     };
-    $[73] = hasMany;
-    $[74] = onChange;
-    $[75] = t23;
+    $[77] = hasMany;
+    $[78] = onChange;
+    $[79] = t23;
   } else {
-    t23 = $[75];
+    t23 = $[79];
   }
   const onRemove = t23;
   let t24;
   let t25;
-  if ($[76] !== activeRelationTo || $[77] !== populateDocs || $[78] !== value) {
+  if ($[80] !== activeRelationTo || $[81] !== populateDocs || $[82] !== value) {
     t24 = () => {
       const loadInitialDocs = async function loadInitialDocs() {
         if (value) {
           loadedValueDocsRef.current = true;
           const loadedDocs_1 = await populateDocs(Array.isArray(value) ? value : [value], activeRelationTo);
           if (loadedDocs_1) {
-            setPopulatedDocs(loadedDocs_1.docs.map(doc_4 => ({
+            setPopulatedDocs(loadedDocs_1.docs.map(doc_6 => ({
               relationTo: activeRelationTo,
-              value: doc_4
+              value: doc_6
             })));
           }
         }
@@ -491,57 +511,57 @@ export function UploadInput(props) {
       }
     };
     t25 = [populateDocs, activeRelationTo, value];
-    $[76] = activeRelationTo;
-    $[77] = populateDocs;
-    $[78] = value;
-    $[79] = t24;
-    $[80] = t25;
+    $[80] = activeRelationTo;
+    $[81] = populateDocs;
+    $[82] = value;
+    $[83] = t24;
+    $[84] = t25;
   } else {
-    t24 = $[79];
-    t25 = $[80];
+    t24 = $[83];
+    t25 = $[84];
   }
   useEffect(t24, t25);
   let t26;
-  if ($[81] !== onUploadSuccess || $[82] !== path || $[83] !== setOnSuccess) {
+  if ($[85] !== onUploadSuccess || $[86] !== path || $[87] !== setOnSuccess) {
     t26 = () => {
       setOnSuccess(path, onUploadSuccess);
     };
-    $[81] = onUploadSuccess;
-    $[82] = path;
-    $[83] = setOnSuccess;
-    $[84] = t26;
+    $[85] = onUploadSuccess;
+    $[86] = path;
+    $[87] = setOnSuccess;
+    $[88] = t26;
   } else {
-    t26 = $[84];
+    t26 = $[88];
   }
   let t27;
-  if ($[85] !== onUploadSuccess || $[86] !== path || $[87] !== setOnSuccess || $[88] !== value) {
+  if ($[89] !== onUploadSuccess || $[90] !== path || $[91] !== setOnSuccess || $[92] !== value) {
     t27 = [value, path, onUploadSuccess, setOnSuccess];
-    $[85] = onUploadSuccess;
-    $[86] = path;
-    $[87] = setOnSuccess;
-    $[88] = value;
-    $[89] = t27;
+    $[89] = onUploadSuccess;
+    $[90] = path;
+    $[91] = setOnSuccess;
+    $[92] = value;
+    $[93] = t27;
   } else {
-    t27 = $[89];
+    t27 = $[93];
   }
   useEffect(t26, t27);
   const showDropzone = !value || hasMany && Array.isArray(value) && (typeof maxRows !== "number" || value.length < maxRows) || !hasMany && populatedDocs?.[0] && typeof populatedDocs[0].value === "undefined";
   const t28 = showError && "error";
   const t29 = readOnly && "read-only";
   let t30;
-  if ($[90] !== className || $[91] !== t28 || $[92] !== t29) {
+  if ($[94] !== className || $[95] !== t28 || $[96] !== t29) {
     t30 = [fieldBaseClass, baseClass, className, t28, t29].filter(Boolean);
-    $[90] = className;
-    $[91] = t28;
-    $[92] = t29;
-    $[93] = t30;
+    $[94] = className;
+    $[95] = t28;
+    $[96] = t29;
+    $[97] = t30;
   } else {
-    t30 = $[93];
+    t30 = $[97];
   }
   const t31 = t30.join(" ");
   const t32 = `field-${path?.replace(/\./g, "__")}`;
   let t33;
-  if ($[94] !== AfterInput || $[95] !== BeforeInput || $[96] !== CreateDocDrawer || $[97] !== Description || $[98] !== Error || $[99] !== Label || $[100] !== ListDrawer || $[101] !== canCreate || $[102] !== description || $[103] !== hasMany || $[104] !== isSortable || $[105] !== label || $[106] !== localized || $[107] !== maxRows || $[108] !== onDocCreate || $[109] !== onListBulkSelect || $[110] !== onListSelect || $[111] !== onLocalFileSelection || $[112] !== onRemove || $[113] !== onReorder || $[114] !== openCreateDocDrawer || $[115] !== openListDrawer || $[116] !== path || $[117] !== populatedDocs || $[118] !== readOnly || $[119] !== reloadDoc || $[120] !== required || $[121] !== serverURL || $[122] !== showDropzone || $[123] !== showError || $[124] !== style || $[125] !== t || $[126] !== t31 || $[127] !== t32 || $[128] !== value) {
+  if ($[98] !== AfterInput || $[99] !== BeforeInput || $[100] !== CreateDocDrawer || $[101] !== Description || $[102] !== Error || $[103] !== Label || $[104] !== ListDrawer || $[105] !== canCreate || $[106] !== description || $[107] !== hasMany || $[108] !== isSortable || $[109] !== label || $[110] !== localized || $[111] !== maxRows || $[112] !== onDocCreate || $[113] !== onListBulkSelect || $[114] !== onListSelect || $[115] !== onLocalFileSelection || $[116] !== onRemove || $[117] !== onReorder || $[118] !== openCreateDocDrawer || $[119] !== openListDrawer || $[120] !== path || $[121] !== populatedDocs || $[122] !== readOnly || $[123] !== reloadDoc || $[124] !== required || $[125] !== serverURL || $[126] !== showDropzone || $[127] !== showError || $[128] !== style || $[129] !== t || $[130] !== t31 || $[131] !== t32 || $[132] !== value) {
     t33 = _jsxs("div", {
       className: t31,
       id: t32,
@@ -576,7 +596,7 @@ export function UploadInput(props) {
             serverURL
           }) : _jsx("div", {
             className: `${baseClass}__loadingRows`,
-            children: value.map(_temp4)
+            children: value.map(_temp5)
           })
         }) : null, !hasMany && value ? _jsx(_Fragment, {
           children: populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? _jsx(UploadComponentHasOne, {
@@ -651,65 +671,68 @@ export function UploadInput(props) {
         })
       })]
     });
-    $[94] = AfterInput;
-    $[95] = BeforeInput;
-    $[96] = CreateDocDrawer;
-    $[97] = Description;
-    $[98] = Error;
-    $[99] = Label;
-    $[100] = ListDrawer;
-    $[101] = canCreate;
-    $[102] = description;
-    $[103] = hasMany;
-    $[104] = isSortable;
-    $[105] = label;
-    $[106] = localized;
-    $[107] = maxRows;
-    $[108] = onDocCreate;
-    $[109] = onListBulkSelect;
-    $[110] = onListSelect;
-    $[111] = onLocalFileSelection;
-    $[112] = onRemove;
-    $[113] = onReorder;
-    $[114] = openCreateDocDrawer;
-    $[115] = openListDrawer;
-    $[116] = path;
-    $[117] = populatedDocs;
-    $[118] = readOnly;
-    $[119] = reloadDoc;
-    $[120] = required;
-    $[121] = serverURL;
-    $[122] = showDropzone;
-    $[123] = showError;
-    $[124] = style;
-    $[125] = t;
-    $[126] = t31;
-    $[127] = t32;
-    $[128] = value;
-    $[129] = t33;
+    $[98] = AfterInput;
+    $[99] = BeforeInput;
+    $[100] = CreateDocDrawer;
+    $[101] = Description;
+    $[102] = Error;
+    $[103] = Label;
+    $[104] = ListDrawer;
+    $[105] = canCreate;
+    $[106] = description;
+    $[107] = hasMany;
+    $[108] = isSortable;
+    $[109] = label;
+    $[110] = localized;
+    $[111] = maxRows;
+    $[112] = onDocCreate;
+    $[113] = onListBulkSelect;
+    $[114] = onListSelect;
+    $[115] = onLocalFileSelection;
+    $[116] = onRemove;
+    $[117] = onReorder;
+    $[118] = openCreateDocDrawer;
+    $[119] = openListDrawer;
+    $[120] = path;
+    $[121] = populatedDocs;
+    $[122] = readOnly;
+    $[123] = reloadDoc;
+    $[124] = required;
+    $[125] = serverURL;
+    $[126] = showDropzone;
+    $[127] = showError;
+    $[128] = style;
+    $[129] = t;
+    $[130] = t31;
+    $[131] = t32;
+    $[132] = value;
+    $[133] = t33;
   } else {
-    t33 = $[129];
+    t33 = $[133];
   }
   return t33;
 }
-function _temp4(id_1) {
+function _temp5(id_1) {
   return _jsx(ShimmerEffect, {
     height: "40px"
   }, id_1);
 }
-function _temp3(t0) {
+function _temp4(t0) {
   const {
     value: value_1
   } = t0;
   return value_1.id;
 }
-function _temp2(t0) {
+function _temp3(t0) {
   const {
     value: value_0
   } = t0;
   return value_0.id;
 }
-function _temp(doc_0) {
-  return doc_0.id;
+function _temp2(doc_5) {
+  return doc_5.value?.id;
+}
+function _temp(doc_1) {
+  return doc_1.id;
 }
 //# sourceMappingURL=Input.js.map