@payloadcms/ui 3.0.0-canary.4a51454 → 3.0.0-canary.518fabe

package/dist/fields/Upload/Input.js

@@ -1,37 +1,47 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getTranslation } from '@payloadcms/translations';
-import React, { useCallback, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import * as qs from 'qs-esm';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useBulkUpload } from '../../elements/BulkUpload/index.js';
 import { Button } from '../../elements/Button/index.js';
 import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
-import { FileDetails } from '../../elements/FileDetails/index.js';
+import { Dropzone } from '../../elements/Dropzone/index.js';
 import { useListDrawer } from '../../elements/ListDrawer/index.js';
+import { ShimmerEffect } from '../../elements/ShimmerEffect/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';
-const baseClass = 'upload';
-export const UploadInput = props => {
-  const $ = _c(76);
+export const baseClass = 'upload';
+export function UploadInput(props) {
+  const $ = _c(125);
   const {
-    Description,
-    Error,
-    Label,
-    allowNewUpload,
-    api: t0,
+    api,
     className,
-    collection,
-    customUploadActions,
+    Description,
+    description,
     descriptionProps,
+    Error,
     errorProps,
-    filterOptions,
+    field,
+    filterOptions: filterOptionsFromProps,
+    hasMany,
+    isSortable,
+    Label,
     label,
     labelProps,
-    onChange,
+    maxRows,
+    onChange: onChangeFromProps,
+    path,
     readOnly,
     relationTo,
     required,
@@ -41,278 +51,623 @@ export const UploadInput = props => {
     value,
     width
   } = props;
-  const api = t0 === undefined ? "/api" : t0;
+  const [populatedDocs, setPopulatedDocs] = React.useState();
+  const [activeRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
+  const {
+    openModal
+  } = useModal();
+  const {
+    drawerSlug,
+    setCollectionSlug,
+    setInitialFiles,
+    setMaxFiles,
+    setOnSuccess
+  } = useBulkUpload();
+  const {
+    permissions
+  } = useAuth();
+  const {
+    code
+  } = useLocale();
   const {
     i18n,
     t
   } = useTranslation();
-  const [fileDoc, setFileDoc] = useState(undefined);
-  const [missingFile, setMissingFile] = useState(false);
-  const t1 = collection?.slug;
+  let t0;
+  let t1;
+  if ($[0] !== filterOptionsFromProps || $[1] !== activeRelationTo) {
+    t1 = filterOptionsFromProps?.[activeRelationTo] || {};
+    $[0] = filterOptionsFromProps;
+    $[1] = activeRelationTo;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
   let t2;
-  if ($[0] !== t1) {
-    t2 = [t1];
-    $[0] = t1;
-    $[1] = t2;
+  if ($[3] !== filterOptionsFromProps || $[4] !== activeRelationTo) {
+    t2 = filterOptionsFromProps?.[activeRelationTo]?.id || {};
+    $[3] = filterOptionsFromProps;
+    $[4] = activeRelationTo;
+    $[5] = t2;
   } else {
-    t2 = $[1];
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== filterOptionsFromProps || $[7] !== activeRelationTo) {
+    t3 = filterOptionsFromProps?.[activeRelationTo]?.id?.not_in || [];
+    $[6] = filterOptionsFromProps;
+    $[7] = activeRelationTo;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
   }
-  const [collectionSlugs] = useState(t2);
-  const t3 = collectionSlugs[0];
   let t4;
-  if ($[2] !== t3) {
-    t4 = {
-      collectionSlug: t3
+  if ($[9] !== value || $[10] !== t3) {
+    t4 = t3.concat(...((Array.isArray(value) || value ? [value] : []) || []));
+    $[9] = value;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== t2 || $[13] !== t4) {
+    t5 = {
+      ...t2,
+      not_in: t4
     };
-    $[2] = t3;
-    $[3] = t4;
+    $[12] = t2;
+    $[13] = t4;
+    $[14] = t5;
   } else {
-    t4 = $[3];
+    t5 = $[14];
   }
-  const [DocumentDrawer, DocumentDrawerToggler, t5] = useDocumentDrawer(t4);
-  const {
-    closeDrawer
-  } = t5;
   let t6;
-  if ($[4] !== collectionSlugs || $[5] !== filterOptions) {
+  if ($[15] !== t1 || $[16] !== t5) {
     t6 = {
-      collectionSlugs,
+      ...t1,
+      id: t5
+    };
+    $[15] = t1;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== filterOptionsFromProps || $[19] !== activeRelationTo || $[20] !== t6) {
+    t7 = {
+      ...filterOptionsFromProps,
+      [activeRelationTo]: t6
+    };
+    $[18] = filterOptionsFromProps;
+    $[19] = activeRelationTo;
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  t0 = t7;
+  const filterOptions = t0;
+  let t8;
+  if ($[22] !== relationTo) {
+    t8 = typeof relationTo === "string" ? [relationTo] : relationTo;
+    $[22] = relationTo;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== t8 || $[25] !== filterOptions) {
+    t9 = {
+      collectionSlugs: t8,
       filterOptions
     };
-    $[4] = collectionSlugs;
-    $[5] = filterOptions;
-    $[6] = t6;
+    $[24] = t8;
+    $[25] = filterOptions;
+    $[26] = t9;
   } else {
-    t6 = $[6];
+    t9 = $[26];
   }
-  const [ListDrawer, ListDrawerToggler, t7] = useListDrawer(t6);
+  const [ListDrawer,, t10] = useListDrawer(t9);
   const {
-    closeDrawer: closeListDrawer
-  } = t7;
-  let t8;
-  if ($[7] !== value || $[8] !== serverURL || $[9] !== api || $[10] !== relationTo || $[11] !== i18n.language) {
-    t8 = () => {
-      if (value !== null && typeof value !== "undefined" && value !== "") {
-        const fetchFile = async () => {
-          const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`, {
-            credentials: "include",
-            headers: {
-              "Accept-Language": i18n.language
+    closeDrawer: closeListDrawer,
+    openDrawer: openListDrawer
+  } = t10;
+  let t11;
+  if ($[27] !== activeRelationTo) {
+    t11 = {
+      collectionSlug: activeRelationTo
+    };
+    $[27] = activeRelationTo;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  const [CreateDocDrawer,, t12] = useDocumentDrawer(t11);
+  const {
+    closeDrawer: closeCreateDocDrawer,
+    openDrawer: openCreateDocDrawer
+  } = t12;
+  const loadedValueDocsRef = React.useRef(false);
+  let t13;
+  bb0: {
+    if (typeof activeRelationTo === "string") {
+      if (permissions?.collections && permissions.collections?.[activeRelationTo]?.create) {
+        if (permissions.collections[activeRelationTo].create?.permission === true) {
+          t13 = true;
+          break bb0;
+        }
+      }
+    }
+    t13 = false;
+  }
+  const canCreate = t13;
+  let t14;
+  if ($[29] !== onChangeFromProps) {
+    t14 = newValue => {
+      if (typeof onChangeFromProps === "function") {
+        onChangeFromProps(newValue);
+      }
+    };
+    $[29] = onChangeFromProps;
+    $[30] = t14;
+  } else {
+    t14 = $[30];
+  }
+  const onChange = t14;
+  let t15;
+  if ($[31] !== code || $[32] !== serverURL || $[33] !== api || $[34] !== i18n.language) {
+    t15 = async (ids, relatedCollectionSlug) => {
+      const query = {
+        depth: 0,
+        draft: true,
+        limit: ids.length,
+        locale: code,
+        where: {
+          and: [{
+            id: {
+              in: ids
             }
-          });
-          if (response.ok) {
-            const json = await response.json();
-            setFileDoc(json);
-          } else {
-            setMissingFile(true);
-            setFileDoc(undefined);
-          }
+          }]
+        }
+      };
+      const response = await fetch(`${serverURL}${api}/${relatedCollectionSlug}`, {
+        body: qs.stringify(query),
+        credentials: "include",
+        headers: {
+          "Accept-Language": i18n.language,
+          "Content-Type": "application/x-www-form-urlencoded",
+          "X-HTTP-Method-Override": "GET"
+        },
+        method: "POST"
+      });
+      if (response.ok) {
+        const json = await response.json();
+        const sortedDocs = ids.map(id => json.docs.find(doc => String(doc.id) === String(id)));
+        return {
+          ...json,
+          docs: sortedDocs
         };
-        fetchFile();
+      }
+      return null;
+    };
+    $[31] = code;
+    $[32] = serverURL;
+    $[33] = api;
+    $[34] = i18n.language;
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  const populateDocs = t15;
+  let t16;
+  if ($[36] !== hasMany || $[37] !== value || $[38] !== onChange || $[39] !== activeRelationTo) {
+    t16 = newDocs => {
+      if (hasMany) {
+        const mergedValue = [...(Array.isArray(value) ? value : []), ...newDocs.map(doc_0 => doc_0.id)];
+        onChange(mergedValue);
+        setPopulatedDocs(currentDocs => [...(currentDocs || []), ...newDocs.map(doc_1 => ({
+          relationTo: activeRelationTo,
+          value: doc_1
+        }))]);
       } else {
-        setFileDoc(undefined);
+        const firstDoc = newDocs[0];
+        onChange(firstDoc.id);
+        setPopulatedDocs([{
+          relationTo: activeRelationTo,
+          value: firstDoc
+        }]);
       }
     };
-    $[7] = value;
-    $[8] = serverURL;
-    $[9] = api;
-    $[10] = relationTo;
-    $[11] = i18n.language;
-    $[12] = t8;
+    $[36] = hasMany;
+    $[37] = value;
+    $[38] = onChange;
+    $[39] = activeRelationTo;
+    $[40] = t16;
   } else {
-    t8 = $[12];
+    t16 = $[40];
   }
-  let t9;
-  if ($[13] !== value || $[14] !== relationTo || $[15] !== api || $[16] !== serverURL || $[17] !== i18n) {
-    t9 = [value, relationTo, api, serverURL, i18n];
-    $[13] = value;
-    $[14] = relationTo;
-    $[15] = api;
-    $[16] = serverURL;
-    $[17] = i18n;
-    $[18] = t9;
+  const onUploadSuccess = t16;
+  let t17;
+  if ($[41] !== hasMany || $[42] !== setInitialFiles || $[43] !== setCollectionSlug || $[44] !== relationTo || $[45] !== setOnSuccess || $[46] !== onUploadSuccess || $[47] !== maxRows || $[48] !== setMaxFiles || $[49] !== openModal || $[50] !== drawerSlug) {
+    t17 = fileList => {
+      let fileListToUse = fileList;
+      if (!hasMany && fileList && fileList.length > 1) {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(fileList[0]);
+        fileListToUse = dataTransfer.files;
+      }
+      if (fileListToUse) {
+        setInitialFiles(fileListToUse);
+      }
+      setCollectionSlug(relationTo);
+      setOnSuccess(onUploadSuccess);
+      if (typeof maxRows === "number") {
+        setMaxFiles(maxRows);
+      }
+      openModal(drawerSlug);
+    };
+    $[41] = hasMany;
+    $[42] = setInitialFiles;
+    $[43] = setCollectionSlug;
+    $[44] = relationTo;
+    $[45] = setOnSuccess;
+    $[46] = onUploadSuccess;
+    $[47] = maxRows;
+    $[48] = setMaxFiles;
+    $[49] = openModal;
+    $[50] = drawerSlug;
+    $[51] = t17;
   } else {
-    t9 = $[18];
+    t17 = $[51];
   }
-  useEffect(t8, t9);
-  let t10;
-  if ($[19] !== onChange || $[20] !== closeDrawer) {
-    t10 = args => {
-      setMissingFile(false);
-      onChange(args.doc);
-      closeDrawer();
+  const onLocalFileSelection = t17;
+  let t18;
+  if ($[52] !== populateDocs || $[53] !== activeRelationTo || $[54] !== onChange || $[55] !== value || $[56] !== closeListDrawer) {
+    t18 = async docs => {
+      const selectedDocIDs = Object.entries(docs).reduce((acc, t19) => {
+        const [docID, isSelected] = t19;
+        if (isSelected) {
+          acc.push(docID);
+        }
+        return acc;
+      }, []);
+      const loadedDocs = await populateDocs(selectedDocIDs, activeRelationTo);
+      if (loadedDocs) {
+        setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs.docs.map(doc_2 => ({
+          relationTo: activeRelationTo,
+          value: doc_2
+        }))]);
+      }
+      onChange([...(Array.isArray(value) ? value : []), ...selectedDocIDs]);
+      closeListDrawer();
     };
-    $[19] = onChange;
-    $[20] = closeDrawer;
-    $[21] = t10;
+    $[52] = populateDocs;
+    $[53] = activeRelationTo;
+    $[54] = onChange;
+    $[55] = value;
+    $[56] = closeListDrawer;
+    $[57] = t18;
   } else {
-    t10 = $[21];
+    t18 = $[57];
   }
-  const onSave = t10;
-  let t11;
-  if ($[22] !== onChange || $[23] !== closeListDrawer) {
-    t11 = args_0 => {
-      setMissingFile(false);
-      onChange({
-        id: args_0.docID
+  const onListBulkSelect = t18;
+  let t19;
+  if ($[58] !== activeRelationTo || $[59] !== onChange || $[60] !== closeCreateDocDrawer) {
+    t19 = data => {
+      if (data.doc) {
+        setPopulatedDocs(currentDocs_1 => [...(currentDocs_1 || []), {
+          relationTo: activeRelationTo,
+          value: data.doc
+        }]);
+        onChange(data.doc.id);
+      }
+      closeCreateDocDrawer();
+    };
+    $[58] = activeRelationTo;
+    $[59] = onChange;
+    $[60] = closeCreateDocDrawer;
+    $[61] = t19;
+  } else {
+    t19 = $[61];
+  }
+  const onDocCreate = t19;
+  let t20;
+  if ($[62] !== populateDocs || $[63] !== hasMany || $[64] !== activeRelationTo || $[65] !== onChange || $[66] !== value || $[67] !== closeListDrawer) {
+    t20 = async t21 => {
+      const {
+        collectionSlug,
+        docID: docID_0
+      } = t21;
+      const loadedDocs_0 = await populateDocs([docID_0], collectionSlug);
+      const selectedDoc = loadedDocs_0 ? loadedDocs_0.docs?.[0] : null;
+      setPopulatedDocs(currentDocs_2 => {
+        if (selectedDoc) {
+          if (hasMany) {
+            return [...(currentDocs_2 || []), {
+              relationTo: activeRelationTo,
+              value: selectedDoc
+            }];
+          }
+          return [{
+            relationTo: activeRelationTo,
+            value: selectedDoc
+          }];
+        }
+        return currentDocs_2;
       });
+      if (hasMany) {
+        onChange([...(Array.isArray(value) ? value : []), docID_0]);
+      } else {
+        onChange(docID_0);
+      }
       closeListDrawer();
     };
-    $[22] = onChange;
-    $[23] = closeListDrawer;
-    $[24] = t11;
+    $[62] = populateDocs;
+    $[63] = hasMany;
+    $[64] = activeRelationTo;
+    $[65] = onChange;
+    $[66] = value;
+    $[67] = closeListDrawer;
+    $[68] = t20;
+  } else {
+    t20 = $[68];
+  }
+  const onListSelect = t20;
+  let t21;
+  if ($[69] !== onChange) {
+    t21 = newValue_0 => {
+      const newValueIDs = newValue_0.map(t22 => {
+        const {
+          value: value_0
+        } = t22;
+        return value_0.id;
+      });
+      onChange(newValueIDs);
+      setPopulatedDocs(newValue_0);
+    };
+    $[69] = onChange;
+    $[70] = t21;
+  } else {
+    t21 = $[70];
+  }
+  const onReorder = t21;
+  let t22;
+  if ($[71] !== onChange || $[72] !== hasMany) {
+    t22 = newValue_1 => {
+      const newValueIDs_0 = newValue_1 ? newValue_1.map(t23 => {
+        const {
+          value: value_1
+        } = t23;
+        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;
   } else {
-    t11 = $[24];
+    t22 = $[73];
   }
-  const onSelect = t11;
-  if (collection.upload) {
-    const t12 = showError && "error";
-    const t13 = readOnly && "read-only";
-    let t14;
-    if ($[25] !== className || $[26] !== t12 || $[27] !== t13) {
-      t14 = [fieldBaseClass, baseClass, className, t12, t13].filter(Boolean);
-      $[25] = className;
-      $[26] = t12;
-      $[27] = t13;
-      $[28] = t14;
+  const onRemove = t22;
+  let t23;
+  let t24;
+  if ($[74] !== value || $[75] !== populateDocs || $[76] !== activeRelationTo) {
+    t23 = () => {
+      const loadInitialDocs = async function loadInitialDocs() {
+        if (value) {
+          const loadedDocs_1 = await populateDocs(Array.isArray(value) ? value : [value], activeRelationTo);
+          if (loadedDocs_1) {
+            setPopulatedDocs(loadedDocs_1.docs.map(doc_3 => ({
+              relationTo: activeRelationTo,
+              value: doc_3
+            })));
+          }
+        }
+        loadedValueDocsRef.current = true;
+      };
+      if (!loadedValueDocsRef.current) {
+        loadInitialDocs();
+      }
+    };
+    t24 = [populateDocs, activeRelationTo, value];
+    $[74] = value;
+    $[75] = populateDocs;
+    $[76] = activeRelationTo;
+    $[77] = t23;
+    $[78] = t24;
+  } else {
+    t23 = $[77];
+    t24 = $[78];
+  }
+  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;
+  } else {
+    t27 = $[82];
+  }
+  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 {
-      t14 = $[28];
+      t31 = $[120];
     }
-    const t15 = t14.join(" ");
-    let t16;
-    if ($[29] !== style || $[30] !== width || $[31] !== labelProps || $[32] !== Label || $[33] !== label || $[34] !== required || $[35] !== errorProps || $[36] !== Error || $[37] !== collection || $[38] !== fileDoc || $[39] !== missingFile || $[40] !== readOnly || $[41] !== onChange || $[42] !== relationTo || $[43] !== customUploadActions || $[44] !== allowNewUpload || $[45] !== i18n || $[46] !== t || $[47] !== DocumentDrawerToggler || $[48] !== ListDrawerToggler || $[49] !== descriptionProps || $[50] !== Description || $[51] !== onSave || $[52] !== DocumentDrawer || $[53] !== onSelect || $[54] !== ListDrawer || $[55] !== t15) {
-      let t17;
-      if ($[57] !== labelProps) {
-        t17 = labelProps || {};
-        $[57] = labelProps;
-        $[58] = t17;
-      } else {
-        t17 = $[58];
-      }
-      let t18;
-      if ($[59] !== errorProps) {
-        t18 = errorProps || {};
-        $[59] = errorProps;
-        $[60] = t18;
-      } else {
-        t18 = $[60];
-      }
-      let t19;
-      if ($[61] !== collection || $[62] !== fileDoc || $[63] !== missingFile || $[64] !== readOnly || $[65] !== onChange || $[66] !== relationTo || $[67] !== customUploadActions || $[68] !== allowNewUpload || $[69] !== i18n || $[70] !== t || $[71] !== DocumentDrawerToggler || $[72] !== ListDrawerToggler || $[73] !== descriptionProps || $[74] !== Description) {
-        t19 = collection?.upload && _jsxs(React.Fragment, {
-          children: [fileDoc && !missingFile && _jsx(FileDetails, {
-            collectionSlug: relationTo,
-            customUploadActions,
-            doc: fileDoc,
-            handleRemove: readOnly ? undefined : () => {
-              onChange(null);
-            },
-            uploadConfig: collection.upload
-          }), (!fileDoc || missingFile) && _jsx("div", {
-            className: `${baseClass}__wrap`,
-            children: _jsxs("div", {
-              className: `${baseClass}__buttons`,
-              children: [allowNewUpload && _jsx(DocumentDrawerToggler, {
-                className: `${baseClass}__toggler`,
-                disabled: readOnly,
-                children: _jsx(Button, {
-                  buttonStyle: "secondary",
-                  disabled: readOnly,
-                  el: "div",
-                  children: t("fields:uploadNewLabel", {
-                    label: getTranslation(collection.labels.singular, i18n)
-                  })
-                })
-              }), _jsx(ListDrawerToggler, {
-                className: `${baseClass}__toggler`,
+    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,
+      style: {
+        ...style,
+        width
+      },
+      children: [_jsx(FieldLabel, {
+        Label,
+        label,
+        required,
+        ...t31,
+        field
+      }), _jsx("div", {
+        className: `${baseClass}__wrap`,
+        children: _jsx(FieldError, {
+          CustomError: Error,
+          path,
+          ...t32,
+          field
+        })
+      }), _jsxs("div", {
+        className: `${baseClass}__dropzoneAndUpload`,
+        children: [hasMany && Array.isArray(value) && value.length > 0 ? _jsx(_Fragment, {
+          children: populatedDocs && populatedDocs?.length > 0 ? _jsx(UploadComponentHasMany, {
+            fileDocs: populatedDocs,
+            isSortable: isSortable && !readOnly,
+            onRemove,
+            onReorder,
+            readonly: readOnly,
+            serverURL
+          }) : _jsx("div", {
+            className: `${baseClass}__loadingRows`,
+            children: value.map(_temp)
+          })
+        }) : null, !hasMany && value ? _jsx(_Fragment, {
+          children: populatedDocs && populatedDocs?.length > 0 ? _jsx(UploadComponentHasOne, {
+            fileDoc: populatedDocs[0],
+            onRemove,
+            readonly: readOnly,
+            serverURL
+          }) : _jsx(ShimmerEffect, {
+            height: "62px"
+          })
+        }) : null, showDropzone ? _jsx(Dropzone, {
+          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();
+                    }
+                  }
+                },
+                size: "small",
+                children: t("general:createNew")
+              }), _jsx("span", {
+                className: `${baseClass}__dropzoneContent__orText`,
+                children: t("general:or")
+              }), _jsx(Button, {
+                buttonStyle: "pill",
+                className: `${baseClass}__listToggler`,
                 disabled: readOnly,
-                children: _jsx(Button, {
-                  buttonStyle: "secondary",
-                  disabled: readOnly,
-                  el: "div",
-                  children: t("fields:chooseFromExisting")
-                })
+                onClick: openListDrawer,
+                size: "small",
+                children: t("fields:chooseFromExisting")
+              }), _jsx(CreateDocDrawer, {
+                onSave: onDocCreate
+              }), _jsx(ListDrawer, {
+                enableRowSelections: hasMany,
+                onBulkSelect: onListBulkSelect,
+                onSelect: onListSelect
               })]
-            })
-          }), _jsx(FieldDescription, {
-            Description,
-            ...(descriptionProps || {})
-          })]
-        });
-        $[61] = collection;
-        $[62] = fileDoc;
-        $[63] = missingFile;
-        $[64] = readOnly;
-        $[65] = onChange;
-        $[66] = relationTo;
-        $[67] = customUploadActions;
-        $[68] = allowNewUpload;
-        $[69] = i18n;
-        $[70] = t;
-        $[71] = DocumentDrawerToggler;
-        $[72] = ListDrawerToggler;
-        $[73] = descriptionProps;
-        $[74] = Description;
-        $[75] = t19;
-      } else {
-        t19 = $[75];
-      }
-      t16 = _jsxs("div", {
-        className: t15,
-        style: {
-          ...style,
-          width
-        },
-        children: [_jsx(FieldLabel, {
-          Label,
-          label,
-          required,
-          ...t17
-        }), _jsxs("div", {
-          className: `${fieldBaseClass}__wrap`,
-          children: [_jsx(FieldError, {
-            CustomError: Error,
-            ...t18
-          }), t19, !readOnly && _jsx(DocumentDrawer, {
-            onSave
-          }), !readOnly && _jsx(ListDrawer, {
-            onSelect
-          })]
+            }), _jsxs("p", {
+              className: `${baseClass}__dragAndDropText`,
+              children: [t("general:or"), " ", t("upload:dragAndDrop")]
+            })]
+          })
+        }) : _jsx(_Fragment, {
+          children: !readOnly && !populatedDocs && (!value || typeof maxRows !== "number" || Array.isArray(value) && value.length < maxRows) ? _jsx(ShimmerEffect, {
+            height: "40px"
+          }) : null
         })]
-      });
-      $[29] = style;
-      $[30] = width;
-      $[31] = labelProps;
-      $[32] = Label;
-      $[33] = label;
-      $[34] = required;
-      $[35] = errorProps;
-      $[36] = Error;
-      $[37] = collection;
-      $[38] = fileDoc;
-      $[39] = missingFile;
-      $[40] = readOnly;
-      $[41] = onChange;
-      $[42] = relationTo;
-      $[43] = customUploadActions;
-      $[44] = allowNewUpload;
-      $[45] = i18n;
-      $[46] = t;
-      $[47] = DocumentDrawerToggler;
-      $[48] = ListDrawerToggler;
-      $[49] = descriptionProps;
-      $[50] = Description;
-      $[51] = onSave;
-      $[52] = DocumentDrawer;
-      $[53] = onSelect;
-      $[54] = ListDrawer;
-      $[55] = t15;
-      $[56] = t16;
-    } else {
-      t16 = $[56];
-    }
-    return t16;
+      }), _jsx(FieldDescription, {
+        Description,
+        description,
+        ...t33,
+        field
+      })]
+    });
+    $[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;
+    $[118] = t30;
+  } else {
+    t30 = $[118];
   }
-  return null;
-};
+  return t30;
+}
+function _temp(id_0) {
+  return _jsx(ShimmerEffect, {
+    height: "40px"
+  }, id_0);
+}
 //# sourceMappingURL=Input.js.map