@payloadcms/ui 3.0.0-canary.d894ac7 → 3.0.0-canary.dc8b1fe

package/dist/fields/Upload/Input.js

@@ -1,38 +1,48 @@
 '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 { 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';
-const baseClass = 'upload';
-export const UploadInput = props => {
-  const $ = _c(78);
+export const baseClass = 'upload';
+export function UploadInput(props) {
+  const $ = _c(122);
   const {
+    AfterInput,
+    allowCreate,
+    api,
+    BeforeInput,
+    className,
     Description,
+    description,
     Error,
+    filterOptions: filterOptionsFromProps,
+    hasMany,
+    isSortable,
     Label,
-    allowNewUpload,
-    api: t0,
-    className,
-    collection,
-    customUploadActions,
-    descriptionProps,
-    errorProps,
-    field,
-    filterOptions,
     label,
-    labelProps,
-    onChange,
+    localized,
+    maxRows,
+    onChange: onChangeFromProps,
+    path,
     readOnly,
     relationTo,
     required,
@@ -42,283 +52,641 @@ 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 = $[5];
+  }
+  let t3;
+  if ($[6] !== filterOptionsFromProps || $[7] !== activeRelationTo) {
+    t3 = filterOptionsFromProps?.[activeRelationTo]?.id?.not_in || [];
+    $[6] = filterOptionsFromProps;
+    $[7] = activeRelationTo;
+    $[8] = t3;
   } else {
-    t2 = $[1];
+    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 (readOnly || !allowCreate) {
+      t13 = false;
+      break 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();
-      } else {
-        setFileDoc(undefined);
       }
+      return null;
     };
-    $[7] = value;
-    $[8] = serverURL;
-    $[9] = api;
-    $[10] = relationTo;
-    $[11] = i18n.language;
-    $[12] = t8;
+    $[31] = code;
+    $[32] = serverURL;
+    $[33] = api;
+    $[34] = i18n.language;
+    $[35] = t15;
   } else {
-    t8 = $[12];
+    t15 = $[35];
   }
-  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 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 {
+        const firstDoc = newDocs[0];
+        onChange(firstDoc.id);
+        setPopulatedDocs([{
+          relationTo: activeRelationTo,
+          value: firstDoc
+        }]);
+      }
+    };
+    $[36] = hasMany;
+    $[37] = value;
+    $[38] = onChange;
+    $[39] = activeRelationTo;
+    $[40] = t16;
   } else {
-    t9 = $[18];
+    t16 = $[40];
   }
-  useEffect(t8, t9);
-  let t10;
-  if ($[19] !== onChange || $[20] !== closeDrawer) {
-    t10 = args => {
-      setMissingFile(false);
-      onChange(args.doc);
-      closeDrawer();
+  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);
     };
-    $[19] = onChange;
-    $[20] = closeDrawer;
-    $[21] = t10;
+    $[41] = hasMany;
+    $[42] = setInitialFiles;
+    $[43] = setCollectionSlug;
+    $[44] = relationTo;
+    $[45] = setOnSuccess;
+    $[46] = onUploadSuccess;
+    $[47] = maxRows;
+    $[48] = setMaxFiles;
+    $[49] = openModal;
+    $[50] = drawerSlug;
+    $[51] = t17;
   } else {
-    t10 = $[21];
+    t17 = $[51];
   }
-  const onSave = t10;
-  let t11;
-  if ($[22] !== onChange || $[23] !== closeListDrawer) {
-    t11 = args_0 => {
-      setMissingFile(false);
-      onChange({
-        id: args_0.docID
-      });
+  const onLocalFileSelection = t17;
+  let t18;
+  if ($[52] !== populateDocs || $[53] !== activeRelationTo || $[54] !== onChange || $[55] !== value || $[56] !== closeListDrawer) {
+    t18 = async docs => {
+      const selectedDocIDs = [];
+      for (const [id_0, isSelected] of docs) {
+        if (isSelected) {
+          selectedDocIDs.push(id_0);
+        }
+      }
+      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();
     };
-    $[22] = onChange;
-    $[23] = closeListDrawer;
-    $[24] = t11;
+    $[52] = populateDocs;
+    $[53] = activeRelationTo;
+    $[54] = onChange;
+    $[55] = value;
+    $[56] = closeListDrawer;
+    $[57] = t18;
   } else {
-    t11 = $[24];
+    t18 = $[57];
   }
-  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;
-    } else {
-      t14 = $[28];
-    }
-    const t15 = t14.join(" ");
-    let t16;
-    if ($[29] !== style || $[30] !== width || $[31] !== labelProps || $[32] !== Label || $[33] !== field || $[34] !== label || $[35] !== required || $[36] !== errorProps || $[37] !== Error || $[38] !== collection || $[39] !== fileDoc || $[40] !== missingFile || $[41] !== readOnly || $[42] !== onChange || $[43] !== relationTo || $[44] !== customUploadActions || $[45] !== allowNewUpload || $[46] !== i18n || $[47] !== t || $[48] !== DocumentDrawerToggler || $[49] !== ListDrawerToggler || $[50] !== descriptionProps || $[51] !== Description || $[52] !== onSave || $[53] !== DocumentDrawer || $[54] !== onSelect || $[55] !== ListDrawer || $[56] !== t15) {
-      let t17;
-      if ($[58] !== labelProps) {
-        t17 = labelProps || {};
-        $[58] = labelProps;
-        $[59] = t17;
-      } else {
-        t17 = $[59];
+  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);
       }
-      let t18;
-      if ($[60] !== errorProps) {
-        t18 = errorProps || {};
-        $[60] = errorProps;
-        $[61] = t18;
+      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
+      } = t21;
+      const loadedDocs_0 = await populateDocs([docID], 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]);
       } else {
-        t18 = $[61];
+        onChange(docID);
       }
-      let t19;
-      if ($[62] !== collection || $[63] !== fileDoc || $[64] !== missingFile || $[65] !== readOnly || $[66] !== onChange || $[67] !== relationTo || $[68] !== customUploadActions || $[69] !== allowNewUpload || $[70] !== i18n || $[71] !== t || $[72] !== DocumentDrawerToggler || $[73] !== ListDrawerToggler || $[74] !== descriptionProps || $[75] !== Description || $[76] !== field) {
-        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`,
-                disabled: readOnly,
-                children: _jsx(Button, {
-                  buttonStyle: "secondary",
-                  disabled: readOnly,
-                  el: "div",
-                  children: t("fields:chooseFromExisting")
-                })
-              })]
-            })
-          }), _jsx(FieldDescription, {
-            Description,
-            field,
-            ...(descriptionProps || {})
-          })]
+      closeListDrawer();
+    };
+    $[62] = populateDocs;
+    $[63] = hasMany;
+    $[64] = activeRelationTo;
+    $[65] = onChange;
+    $[66] = value;
+    $[67] = closeListDrawer;
+    $[68] = t20;
+  } else {
+    t20 = $[68];
+  }
+  const onListSelect = t20;
+  let t21;
+  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;
+          }
         });
-        $[62] = collection;
-        $[63] = fileDoc;
-        $[64] = missingFile;
-        $[65] = readOnly;
-        $[66] = onChange;
-        $[67] = relationTo;
-        $[68] = customUploadActions;
-        $[69] = allowNewUpload;
-        $[70] = i18n;
-        $[71] = t;
-        $[72] = DocumentDrawerToggler;
-        $[73] = ListDrawerToggler;
-        $[74] = descriptionProps;
-        $[75] = Description;
-        $[76] = field;
-        $[77] = t19;
-      } else {
-        t19 = $[77];
       }
-      t16 = _jsxs("div", {
-        className: t15,
-        style: {
-          ...style,
-          width
-        },
-        children: [_jsx(FieldLabel, {
-          Label,
-          field,
+    };
+    $[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
+        } = t23;
+        return value_0.id;
+      });
+      onChange(newValueIDs);
+      setPopulatedDocs(newValue_0);
+    };
+    $[71] = onChange;
+    $[72] = t22;
+  } else {
+    t22 = $[72];
+  }
+  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
+        } = t24;
+        return value_1.id;
+      }) : null;
+      onChange(hasMany ? newValueIDs_0 : newValueIDs_0 ? newValueIDs_0[0] : null);
+      setPopulatedDocs(newValue_1 ? newValue_1 : []);
+    };
+    $[73] = onChange;
+    $[74] = hasMany;
+    $[75] = t23;
+  } else {
+    t23 = $[75];
+  }
+  const onRemove = t23;
+  let t24;
+  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_4 => ({
+              relationTo: activeRelationTo,
+              value: doc_4
+            })));
+          }
+        }
+      };
+      if (!loadedValueDocsRef.current) {
+        loadInitialDocs();
+      }
+    };
+    t25 = [populateDocs, activeRelationTo, value];
+    $[76] = value;
+    $[77] = populateDocs;
+    $[78] = activeRelationTo;
+    $[79] = t24;
+    $[80] = t25;
+  } else {
+    t24 = $[79];
+    t25 = $[80];
+  }
+  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 {
+    t28 = $[84];
+  }
+  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(RenderCustomComponent, {
+        CustomComponent: Label,
+        Fallback: _jsx(FieldLabel, {
           label,
-          required,
-          ...t17
-        }), _jsxs("div", {
-          className: `${fieldBaseClass}__wrap`,
-          children: [_jsx(FieldError, {
-            CustomError: Error,
-            field,
-            ...t18
-          }), t19, !readOnly && _jsx(DocumentDrawer, {
-            onSave
-          }), !readOnly && _jsx(ListDrawer, {
-            onSelect
-          })]
+          localized,
+          path,
+          required
+        })
+      }), _jsx("div", {
+        className: `${baseClass}__wrap`,
+        children: _jsx(RenderCustomComponent, {
+          CustomComponent: Error,
+          Fallback: _jsx(FieldError, {
+            path,
+            showError
+          })
+        })
+      }), BeforeInput, _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,
+            reloadDoc,
+            serverURL
+          }) : _jsx("div", {
+            className: `${baseClass}__loadingRows`,
+            children: value.map(_temp)
+          })
+        }) : null, !hasMany && value ? _jsx(_Fragment, {
+          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: [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")
+                })]
+              }), _jsx(Button, {
+                buttonStyle: "pill",
+                className: `${baseClass}__listToggler`,
+                disabled: readOnly,
+                onClick: openListDrawer,
+                size: "small",
+                children: t("fields:chooseFromExisting")
+              }), _jsx(CreateDocDrawer, {
+                onSave: onDocCreate
+              }), _jsx(ListDrawer, {
+                allowCreate: canCreate,
+                enableRowSelections: hasMany,
+                onBulkSelect: onListBulkSelect,
+                onSelect: onListSelect
+              })]
+            }), canCreate && _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] = field;
-      $[34] = label;
-      $[35] = required;
-      $[36] = errorProps;
-      $[37] = Error;
-      $[38] = collection;
-      $[39] = fileDoc;
-      $[40] = missingFile;
-      $[41] = readOnly;
-      $[42] = onChange;
-      $[43] = relationTo;
-      $[44] = customUploadActions;
-      $[45] = allowNewUpload;
-      $[46] = i18n;
-      $[47] = t;
-      $[48] = DocumentDrawerToggler;
-      $[49] = ListDrawerToggler;
-      $[50] = descriptionProps;
-      $[51] = Description;
-      $[52] = onSave;
-      $[53] = DocumentDrawer;
-      $[54] = onSelect;
-      $[55] = ListDrawer;
-      $[56] = t15;
-      $[57] = t16;
-    } else {
-      t16 = $[57];
-    }
-    return t16;
+      }), AfterInput, _jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
+        })
+      })]
+    });
+    $[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;
+    $[121] = t31;
+  } else {
+    t31 = $[121];
   }
-  return null;
-};
+  return t31;
+}
+function _temp(id_1) {
+  return _jsx(ShimmerEffect, {
+    height: "40px"
+  }, id_1);
+}
 //# sourceMappingURL=Input.js.map