@payloadcms/ui 3.0.0-canary.c696728 → 3.0.0-canary.c96fa61

package/dist/fields/Upload/Input.js

@@ -10,35 +10,36 @@ import { Button } from '../../elements/Button/index.js';
 import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
 import { Dropzone } from '../../elements/Dropzone/index.js';
 import { useListDrawer } from '../../elements/ListDrawer/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { ShimmerEffect } from '../../elements/ShimmerEffect/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { FieldDescription } from '../FieldDescription/index.js';
-import { FieldError } from '../FieldError/index.js';
-import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { UploadComponentHasMany } from './HasMany/index.js';
 import { UploadComponentHasOne } from './HasOne/index.js';
 import './index.scss';
 export const baseClass = 'upload';
 export function UploadInput(props) {
-  const $ = _c(125);
+  const $ = _c(122);
   const {
+    AfterInput,
+    allowCreate,
     api,
+    BeforeInput,
     className,
     Description,
     description,
-    descriptionProps,
     Error,
-    errorProps,
-    field,
     filterOptions: filterOptionsFromProps,
     hasMany,
     isSortable,
     Label,
     label,
-    labelProps,
+    localized,
     maxRows,
     onChange: onChangeFromProps,
     path,
@@ -192,6 +193,10 @@ export function UploadInput(props) {
   const loadedValueDocsRef = React.useRef(false);
   let t13;
   bb0: {
+    if (readOnly || !allowCreate) {
+      t13 = false;
+      break bb0;
+    }
     if (typeof activeRelationTo === "string") {
       if (permissions?.collections && permissions.collections?.[activeRelationTo]?.create) {
         if (permissions.collections[activeRelationTo].create?.permission === true) {
@@ -415,136 +420,141 @@ export function UploadInput(props) {
   }
   const onListSelect = t20;
   let t21;
-  if ($[69] !== onChange) {
-    t21 = newValue_0 => {
-      const newValueIDs = newValue_0.map(t22 => {
+  if ($[69] !== populateDocs) {
+    t21 = async (docID_0, collectionSlug_0) => {
+      const {
+        docs: docs_0
+      } = await populateDocs([docID_0], collectionSlug_0);
+      if (docs_0[0]) {
+        setPopulatedDocs(currentDocs_3 => {
+          const existingDocIndex = currentDocs_3?.findIndex(doc_3 => doc_3.value.id === docs_0[0].id && doc_3.relationTo === collectionSlug_0);
+          if (existingDocIndex > -1) {
+            const updatedDocs = [...currentDocs_3];
+            updatedDocs[existingDocIndex] = {
+              relationTo: collectionSlug_0,
+              value: docs_0[0]
+            };
+            return updatedDocs;
+          }
+        });
+      }
+    };
+    $[69] = populateDocs;
+    $[70] = t21;
+  } else {
+    t21 = $[70];
+  }
+  const reloadDoc = t21;
+  let t22;
+  if ($[71] !== onChange) {
+    t22 = newValue_0 => {
+      const newValueIDs = newValue_0.map(t23 => {
         const {
           value: value_0
-        } = t22;
+        } = t23;
         return value_0.id;
       });
       onChange(newValueIDs);
       setPopulatedDocs(newValue_0);
     };
-    $[69] = onChange;
-    $[70] = t21;
+    $[71] = onChange;
+    $[72] = t22;
   } else {
-    t21 = $[70];
+    t22 = $[72];
   }
-  const onReorder = t21;
-  let t22;
-  if ($[71] !== onChange || $[72] !== hasMany) {
-    t22 = newValue_1 => {
-      const newValueIDs_0 = newValue_1 ? newValue_1.map(t23 => {
+  const onReorder = t22;
+  let t23;
+  if ($[73] !== onChange || $[74] !== hasMany) {
+    t23 = newValue_1 => {
+      const newValueIDs_0 = newValue_1 ? newValue_1.map(t24 => {
         const {
           value: value_1
-        } = t23;
+        } = t24;
         return value_1.id;
       }) : null;
       onChange(hasMany ? newValueIDs_0 : newValueIDs_0 ? newValueIDs_0[0] : null);
       setPopulatedDocs(newValue_1 ? newValue_1 : []);
     };
-    $[71] = onChange;
-    $[72] = hasMany;
-    $[73] = t22;
+    $[73] = onChange;
+    $[74] = hasMany;
+    $[75] = t23;
   } else {
-    t22 = $[73];
+    t23 = $[75];
   }
-  const onRemove = t22;
-  let t23;
+  const onRemove = t23;
   let t24;
-  if ($[74] !== value || $[75] !== populateDocs || $[76] !== activeRelationTo) {
-    t23 = () => {
+  let t25;
+  if ($[76] !== value || $[77] !== populateDocs || $[78] !== activeRelationTo) {
+    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_3 => ({
+            setPopulatedDocs(loadedDocs_1.docs.map(doc_4 => ({
               relationTo: activeRelationTo,
-              value: doc_3
+              value: doc_4
             })));
           }
         }
-        loadedValueDocsRef.current = true;
       };
       if (!loadedValueDocsRef.current) {
         loadInitialDocs();
       }
     };
-    t24 = [populateDocs, activeRelationTo, value];
-    $[74] = value;
-    $[75] = populateDocs;
-    $[76] = activeRelationTo;
-    $[77] = t23;
-    $[78] = t24;
+    t25 = [populateDocs, activeRelationTo, value];
+    $[76] = value;
+    $[77] = populateDocs;
+    $[78] = activeRelationTo;
+    $[79] = t24;
+    $[80] = t25;
   } else {
-    t23 = $[77];
-    t24 = $[78];
+    t24 = $[79];
+    t25 = $[80];
   }
-  useEffect(t23, t24);
-  const showDropzone = !readOnly && (!value || hasMany && Array.isArray(value) && (typeof maxRows !== "number" || value.length < maxRows));
-  const t25 = showError && "error";
-  const t26 = readOnly && "read-only";
-  let t27;
-  if ($[79] !== className || $[80] !== t25 || $[81] !== t26) {
-    t27 = [fieldBaseClass, baseClass, className, t25, t26].filter(Boolean);
-    $[79] = className;
-    $[80] = t25;
-    $[81] = t26;
-    $[82] = t27;
+  useEffect(t24, t25);
+  const showDropzone = !value || hasMany && Array.isArray(value) && (typeof maxRows !== "number" || value.length < maxRows) || !hasMany && populatedDocs?.[0] && typeof populatedDocs[0].value === "undefined";
+  const t26 = showError && "error";
+  const t27 = readOnly && "read-only";
+  let t28;
+  if ($[81] !== className || $[82] !== t26 || $[83] !== t27) {
+    t28 = [fieldBaseClass, baseClass, className, t26, t27].filter(Boolean);
+    $[81] = className;
+    $[82] = t26;
+    $[83] = t27;
+    $[84] = t28;
   } else {
-    t27 = $[82];
+    t28 = $[84];
   }
-  const t28 = t27.join(" ");
-  const t29 = `field-${path.replace(/\./g, "__")}`;
-  let t30;
-  if ($[83] !== style || $[84] !== width || $[85] !== labelProps || $[86] !== Label || $[87] !== label || $[88] !== required || $[89] !== field || $[90] !== errorProps || $[91] !== Error || $[92] !== path || $[93] !== hasMany || $[94] !== value || $[95] !== populatedDocs || $[96] !== isSortable || $[97] !== readOnly || $[98] !== onRemove || $[99] !== onReorder || $[100] !== serverURL || $[101] !== showDropzone || $[102] !== canCreate || $[103] !== onLocalFileSelection || $[104] !== openCreateDocDrawer || $[105] !== t || $[106] !== openListDrawer || $[107] !== onDocCreate || $[108] !== CreateDocDrawer || $[109] !== onListBulkSelect || $[110] !== onListSelect || $[111] !== ListDrawer || $[112] !== maxRows || $[113] !== descriptionProps || $[114] !== Description || $[115] !== description || $[116] !== t28 || $[117] !== t29) {
-    let t31;
-    if ($[119] !== labelProps) {
-      t31 = labelProps || {};
-      $[119] = labelProps;
-      $[120] = t31;
-    } else {
-      t31 = $[120];
-    }
-    let t32;
-    if ($[121] !== errorProps) {
-      t32 = errorProps || {};
-      $[121] = errorProps;
-      $[122] = t32;
-    } else {
-      t32 = $[122];
-    }
-    let t33;
-    if ($[123] !== descriptionProps) {
-      t33 = descriptionProps || {};
-      $[123] = descriptionProps;
-      $[124] = t33;
-    } else {
-      t33 = $[124];
-    }
-    t30 = _jsxs("div", {
-      className: t28,
-      id: t29,
+  const t29 = t28.join(" ");
+  const t30 = `field-${path?.replace(/\./g, "__")}`;
+  let t31;
+  if ($[85] !== style || $[86] !== width || $[87] !== label || $[88] !== localized || $[89] !== path || $[90] !== required || $[91] !== Label || $[92] !== showError || $[93] !== Error || $[94] !== hasMany || $[95] !== value || $[96] !== populatedDocs || $[97] !== isSortable || $[98] !== readOnly || $[99] !== onRemove || $[100] !== onReorder || $[101] !== reloadDoc || $[102] !== serverURL || $[103] !== t || $[104] !== showDropzone || $[105] !== canCreate || $[106] !== onLocalFileSelection || $[107] !== openCreateDocDrawer || $[108] !== openListDrawer || $[109] !== onDocCreate || $[110] !== CreateDocDrawer || $[111] !== onListBulkSelect || $[112] !== onListSelect || $[113] !== ListDrawer || $[114] !== maxRows || $[115] !== description || $[116] !== Description || $[117] !== BeforeInput || $[118] !== AfterInput || $[119] !== t29 || $[120] !== t30) {
+    t31 = _jsxs("div", {
+      className: t29,
+      id: t30,
       style: {
         ...style,
         width
       },
-      children: [_jsx(FieldLabel, {
-        Label,
-        label,
-        required,
-        ...t31,
-        field
+      children: [_jsx(RenderCustomComponent, {
+        CustomComponent: Label,
+        Fallback: _jsx(FieldLabel, {
+          label,
+          localized,
+          path,
+          required
+        })
       }), _jsx("div", {
         className: `${baseClass}__wrap`,
-        children: _jsx(FieldError, {
-          CustomError: Error,
-          path,
-          ...t32,
-          field
+        children: _jsx(RenderCustomComponent, {
+          CustomComponent: Error,
+          Fallback: _jsx(FieldError, {
+            path,
+            showError
+          })
         })
-      }), _jsxs("div", {
+      }), BeforeInput, _jsxs("div", {
         className: `${baseClass}__dropzoneAndUpload`,
         children: [hasMany && Array.isArray(value) && value.length > 0 ? _jsx(_Fragment, {
           children: populatedDocs && populatedDocs?.length > 0 ? _jsx(UploadComponentHasMany, {
@@ -553,45 +563,52 @@ export function UploadInput(props) {
             onRemove,
             onReorder,
             readonly: readOnly,
+            reloadDoc,
             serverURL
           }) : _jsx("div", {
             className: `${baseClass}__loadingRows`,
             children: value.map(_temp)
           })
         }) : null, !hasMany && value ? _jsx(_Fragment, {
-          children: populatedDocs && populatedDocs?.length > 0 ? _jsx(UploadComponentHasOne, {
+          children: populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? _jsx(UploadComponentHasOne, {
             fileDoc: populatedDocs[0],
             onRemove,
             readonly: readOnly,
+            reloadDoc,
             serverURL
+          }) : populatedDocs && value && !populatedDocs?.[0]?.value ? _jsxs(_Fragment, {
+            children: [t("general:untitled"), " - ID: ", value]
           }) : _jsx(ShimmerEffect, {
             height: "62px"
           })
         }) : null, showDropzone ? _jsx(Dropzone, {
+          disabled: readOnly || !canCreate,
           multipleFiles: hasMany,
           onChange: onLocalFileSelection,
           children: _jsxs("div", {
             className: `${baseClass}__dropzoneContent`,
             children: [_jsxs("div", {
               className: `${baseClass}__dropzoneContent__buttons`,
-              children: [_jsx(Button, {
-                buttonStyle: "pill",
-                className: `${baseClass}__createNewToggler`,
-                disabled: readOnly || !canCreate,
-                onClick: () => {
-                  if (!readOnly) {
-                    if (hasMany) {
-                      onLocalFileSelection();
-                    } else {
-                      openCreateDocDrawer();
+              children: [canCreate && _jsxs(_Fragment, {
+                children: [_jsx(Button, {
+                  buttonStyle: "pill",
+                  className: `${baseClass}__createNewToggler`,
+                  disabled: readOnly || !canCreate,
+                  onClick: () => {
+                    if (!readOnly) {
+                      if (hasMany) {
+                        onLocalFileSelection();
+                      } else {
+                        openCreateDocDrawer();
+                      }
                     }
-                  }
-                },
-                size: "small",
-                children: t("general:createNew")
-              }), _jsx("span", {
-                className: `${baseClass}__dropzoneContent__orText`,
-                children: t("general:or")
+                  },
+                  size: "small",
+                  children: t("general:createNew")
+                }), _jsx("span", {
+                  className: `${baseClass}__dropzoneContent__orText`,
+                  children: t("general:or")
+                })]
               }), _jsx(Button, {
                 buttonStyle: "pill",
                 className: `${baseClass}__listToggler`,
@@ -602,11 +619,12 @@ export function UploadInput(props) {
               }), _jsx(CreateDocDrawer, {
                 onSave: onDocCreate
               }), _jsx(ListDrawer, {
+                allowCreate: canCreate,
                 enableRowSelections: hasMany,
                 onBulkSelect: onListBulkSelect,
                 onSelect: onListSelect
               })]
-            }), _jsxs("p", {
+            }), canCreate && _jsxs("p", {
               className: `${baseClass}__dragAndDropText`,
               children: [t("general:or"), " ", t("upload:dragAndDrop")]
             })]
@@ -616,53 +634,55 @@ export function UploadInput(props) {
             height: "40px"
           }) : null
         })]
-      }), _jsx(FieldDescription, {
-        Description,
-        description,
-        ...t33,
-        field
+      }), AfterInput, _jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
+        })
       })]
     });
-    $[83] = style;
-    $[84] = width;
-    $[85] = labelProps;
-    $[86] = Label;
+    $[85] = style;
+    $[86] = width;
     $[87] = label;
-    $[88] = required;
-    $[89] = field;
-    $[90] = errorProps;
-    $[91] = Error;
-    $[92] = path;
-    $[93] = hasMany;
-    $[94] = value;
-    $[95] = populatedDocs;
-    $[96] = isSortable;
-    $[97] = readOnly;
-    $[98] = onRemove;
-    $[99] = onReorder;
-    $[100] = serverURL;
-    $[101] = showDropzone;
-    $[102] = canCreate;
-    $[103] = onLocalFileSelection;
-    $[104] = openCreateDocDrawer;
-    $[105] = t;
-    $[106] = openListDrawer;
-    $[107] = onDocCreate;
-    $[108] = CreateDocDrawer;
-    $[109] = onListBulkSelect;
-    $[110] = onListSelect;
-    $[111] = ListDrawer;
-    $[112] = maxRows;
-    $[113] = descriptionProps;
-    $[114] = Description;
+    $[88] = localized;
+    $[89] = path;
+    $[90] = required;
+    $[91] = Label;
+    $[92] = showError;
+    $[93] = Error;
+    $[94] = hasMany;
+    $[95] = value;
+    $[96] = populatedDocs;
+    $[97] = isSortable;
+    $[98] = readOnly;
+    $[99] = onRemove;
+    $[100] = onReorder;
+    $[101] = reloadDoc;
+    $[102] = serverURL;
+    $[103] = t;
+    $[104] = showDropzone;
+    $[105] = canCreate;
+    $[106] = onLocalFileSelection;
+    $[107] = openCreateDocDrawer;
+    $[108] = openListDrawer;
+    $[109] = onDocCreate;
+    $[110] = CreateDocDrawer;
+    $[111] = onListBulkSelect;
+    $[112] = onListSelect;
+    $[113] = ListDrawer;
+    $[114] = maxRows;
     $[115] = description;
-    $[116] = t28;
-    $[117] = t29;
-    $[118] = t30;
+    $[116] = Description;
+    $[117] = BeforeInput;
+    $[118] = AfterInput;
+    $[119] = t29;
+    $[120] = t30;
+    $[121] = t31;
   } else {
-    t30 = $[118];
+    t31 = $[121];
   }
-  return t30;
+  return t31;
 }
 function _temp(id_1) {
   return _jsx(ShimmerEffect, {