@payloadcms/ui 3.29.0-internal.e4e913b → 3.29.0

package/dist/fields/Upload/Input.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 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';
@@ -24,7 +23,6 @@ import { UploadComponentHasOne } from './HasOne/index.js';
 import './index.scss';
 export const baseClass = 'upload';
 export function UploadInput(props) {
-  const $ = _c(135);
   const {
     AfterInput,
     allowCreate,
@@ -53,7 +51,7 @@ export function UploadInput(props) {
     value
   } = props;
   const [populatedDocs, setPopulatedDocs] = React.useState();
-  const [activeRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
+  const [activeRelationTo, setActiveRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
   const {
     openModal
   } = useModal();
@@ -75,668 +73,361 @@ export function UploadInput(props) {
     i18n,
     t
   } = useTranslation();
-  let t0;
-  let t1;
-  if ($[0] !== activeRelationTo || $[1] !== filterOptionsFromProps) {
-    t1 = filterOptionsFromProps?.[activeRelationTo] || {};
-    $[0] = activeRelationTo;
-    $[1] = filterOptionsFromProps;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== activeRelationTo || $[4] !== filterOptionsFromProps) {
-    t2 = filterOptionsFromProps?.[activeRelationTo]?.id || {};
-    $[3] = activeRelationTo;
-    $[4] = filterOptionsFromProps;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  let t3;
-  if ($[6] !== activeRelationTo || $[7] !== filterOptionsFromProps) {
-    t3 = filterOptionsFromProps?.[activeRelationTo]?.id?.not_in || [];
-    $[6] = activeRelationTo;
-    $[7] = filterOptionsFromProps;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  let t4;
-  if ($[9] !== t3 || $[10] !== value) {
-    t4 = t3.concat(...(Array.isArray(value) || value ? [value] : []));
-    $[9] = t3;
-    $[10] = value;
-    $[11] = t4;
-  } else {
-    t4 = $[11];
-  }
-  let t5;
-  if ($[12] !== t2 || $[13] !== t4) {
-    t5 = {
-      ...t2,
-      not_in: t4
-    };
-    $[12] = t2;
-    $[13] = t4;
-    $[14] = t5;
-  } else {
-    t5 = $[14];
-  }
-  let t6;
-  if ($[15] !== t1 || $[16] !== t5) {
-    t6 = {
-      ...t1,
-      id: t5
-    };
-    $[15] = t1;
-    $[16] = t5;
-    $[17] = t6;
-  } else {
-    t6 = $[17];
-  }
-  let t7;
-  if ($[18] !== activeRelationTo || $[19] !== filterOptionsFromProps || $[20] !== t6) {
-    t7 = {
+  const filterOptions = useMemo(() => {
+    return {
       ...filterOptionsFromProps,
-      [activeRelationTo]: t6
-    };
-    $[18] = activeRelationTo;
-    $[19] = filterOptionsFromProps;
-    $[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] !== filterOptions || $[25] !== t8) {
-    t9 = {
-      collectionSlugs: t8,
-      filterOptions
+      [activeRelationTo]: {
+        ...(filterOptionsFromProps?.[activeRelationTo] || {}),
+        id: {
+          ...(filterOptionsFromProps?.[activeRelationTo]?.id || {}),
+          not_in: (filterOptionsFromProps?.[activeRelationTo]?.id?.not_in || []).concat(...(Array.isArray(value) || value ? [value] : []))
+        }
+      }
     };
-    $[24] = filterOptions;
-    $[25] = t8;
-    $[26] = t9;
-  } else {
-    t9 = $[26];
-  }
-  const [ListDrawer,, t10] = useListDrawer(t9);
-  const {
+  }, [value, activeRelationTo, filterOptionsFromProps]);
+  const [ListDrawer,, {
     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 {
+  }] = useListDrawer({
+    collectionSlugs: typeof relationTo === 'string' ? [relationTo] : relationTo,
+    filterOptions
+  });
+  const [CreateDocDrawer,, {
     closeDrawer: closeCreateDocDrawer,
     openDrawer: openCreateDocDrawer
-  } = t12;
+  }] = useDocumentDrawer({
+    collectionSlug: activeRelationTo
+  });
+  /**
+  * Prevent initial retrieval of documents from running more than once
+  */
   const loadedValueDocsRef = React.useRef(false);
-  let t13;
-  bb0: {
+  const canCreate = useMemo(() => {
     if (!allowCreate) {
-      t13 = false;
-      break bb0;
+      return false;
     }
-    if (typeof activeRelationTo === "string") {
+    if (typeof activeRelationTo === 'string') {
       if (permissions?.collections && permissions.collections?.[activeRelationTo]?.create) {
-        t13 = true;
-        break bb0;
+        return true;
       }
     }
-    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] !== api || $[32] !== code || $[33] !== hasMany || $[34] !== i18n.language || $[35] !== serverURL || $[36] !== t) {
-    t15 = async (ids, relatedCollectionSlug) => {
-      const query = {
-        depth: 0,
-        draft: true,
-        limit: ids.length,
-        locale: code,
-        where: {
-          and: [{
-            id: {
-              in: ids
-            }
-          }]
-        }
-      };
-      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();
-        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
-        };
-      }
-      return null;
-    };
-    $[31] = api;
-    $[32] = code;
-    $[33] = hasMany;
-    $[34] = i18n.language;
-    $[35] = serverURL;
-    $[36] = t;
-    $[37] = t15;
-  } else {
-    t15 = $[37];
-  }
-  const populateDocs = t15;
-  let t16;
-  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_2 => ({
-          relationTo: activeRelationTo,
-          value: doc_2
-        }))]);
-      } else {
-        const firstDoc = newDocs[0];
-        onChange(firstDoc.id);
-        setPopulatedDocs([{
-          relationTo: activeRelationTo,
-          value: firstDoc
-        }]);
-      }
-    };
-    $[38] = activeRelationTo;
-    $[39] = hasMany;
-    $[40] = onChange;
-    $[41] = value;
-    $[42] = t16;
-  } else {
-    t16 = $[42];
-  }
-  const onUploadSuccess = t16;
-  let t17;
-  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) {
-        const dataTransfer = new DataTransfer();
-        dataTransfer.items.add(fileList[0]);
-        fileListToUse = dataTransfer.files;
-      }
-      if (fileListToUse) {
-        setInitialFiles(fileListToUse);
-      }
-      setCollectionSlug(relationTo);
-      if (typeof maxRows === "number") {
-        setMaxFiles(maxRows);
+    return false;
+  }, [activeRelationTo, permissions, allowCreate]);
+  const onChange = React.useCallback(newValue => {
+    if (typeof onChangeFromProps === 'function') {
+      onChangeFromProps(newValue);
+    }
+  }, [onChangeFromProps]);
+  const populateDocs = React.useCallback(async (ids, relatedCollectionSlug) => {
+    if (!ids.length) {
+      return;
+    }
+    const query = {
+      depth: 0,
+      draft: true,
+      limit: ids.length,
+      locale: code,
+      where: {
+        and: [{
+          id: {
+            in: ids
+          }
+        }]
       }
-      setCurrentActivePath(path);
-      openModal(drawerSlug);
     };
-    $[43] = drawerSlug;
-    $[44] = hasMany;
-    $[45] = maxRows;
-    $[46] = openModal;
-    $[47] = path;
-    $[48] = relationTo;
-    $[49] = setCollectionSlug;
-    $[50] = setCurrentActivePath;
-    $[51] = setInitialFiles;
-    $[52] = setMaxFiles;
-    $[53] = t17;
-  } else {
-    t17 = $[53];
-  }
-  const onLocalFileSelection = t17;
-  let t18;
-  if ($[54] !== activeRelationTo || $[55] !== closeListDrawer || $[56] !== onChange || $[57] !== populateDocs || $[58] !== value) {
-    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_3 => ({
-          relationTo: activeRelationTo,
-          value: doc_3
-        }))]);
+    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();
+      let sortedDocs = ids.map(id => json.docs.find(doc => {
+        return 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
+        });
       }
-      onChange([...(Array.isArray(value) ? value : []), ...selectedDocIDs]);
-      closeListDrawer();
-    };
-    $[54] = activeRelationTo;
-    $[55] = closeListDrawer;
-    $[56] = onChange;
-    $[57] = populateDocs;
-    $[58] = value;
-    $[59] = t18;
-  } else {
-    t18 = $[59];
-  }
-  const onListBulkSelect = t18;
-  let t19;
-  if ($[60] !== activeRelationTo || $[61] !== closeCreateDocDrawer || $[62] !== onChange) {
-    t19 = data => {
-      if (data.doc) {
-        setPopulatedDocs(currentDocs_1 => [...(currentDocs_1 || []), {
-          relationTo: activeRelationTo,
-          value: data.doc
-        }]);
-        onChange(data.doc.id);
+      return {
+        ...json,
+        docs: sortedDocs
+      };
+    }
+    return null;
+  }, [code, serverURL, api, i18n.language, t, hasMany]);
+  const onUploadSuccess = useCallback(newDocs => {
+    if (hasMany) {
+      const mergedValue = [...(Array.isArray(value) ? value : []), ...newDocs.map(doc_1 => doc_1.id)];
+      onChange(mergedValue);
+      setPopulatedDocs(currentDocs => [...(currentDocs || []), ...newDocs.map(doc_2 => ({
+        relationTo: activeRelationTo,
+        value: doc_2
+      }))]);
+    } else {
+      const firstDoc = newDocs[0];
+      onChange(firstDoc.id);
+      setPopulatedDocs([{
+        relationTo: activeRelationTo,
+        value: firstDoc
+      }]);
+    }
+  }, [value, onChange, activeRelationTo, hasMany]);
+  const onLocalFileSelection = React.useCallback(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);
+    if (typeof maxRows === 'number') {
+      setMaxFiles(maxRows);
+    }
+    setCurrentActivePath(path);
+    openModal(drawerSlug);
+  }, [drawerSlug, hasMany, openModal, relationTo, setCollectionSlug, setInitialFiles, maxRows, setMaxFiles, path, setCurrentActivePath]);
+  // only hasMany can bulk select
+  const onListBulkSelect = React.useCallback(async docs => {
+    const selectedDocIDs = [];
+    for (const [id_0, isSelected] of docs) {
+      if (isSelected) {
+        selectedDocIDs.push(id_0);
       }
-      closeCreateDocDrawer();
-    };
-    $[60] = activeRelationTo;
-    $[61] = closeCreateDocDrawer;
-    $[62] = onChange;
-    $[63] = t19;
-  } else {
-    t19 = $[63];
-  }
-  const onDocCreate = t19;
-  let t20;
-  if ($[64] !== activeRelationTo || $[65] !== closeListDrawer || $[66] !== hasMany || $[67] !== onChange || $[68] !== populateDocs || $[69] !== value) {
-    t20 = async t21 => {
-      const {
-        collectionSlug,
-        doc: doc_4
-      } = t21;
-      const loadedDocs_0 = await populateDocs([doc_4.id], 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 [{
+    }
+    const loadedDocs = await populateDocs(selectedDocIDs, activeRelationTo);
+    if (loadedDocs) {
+      setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs.docs.map(doc_3 => ({
+        relationTo: activeRelationTo,
+        value: doc_3
+      }))]);
+    }
+    onChange([...(Array.isArray(value) ? value : []), ...selectedDocIDs]);
+    closeListDrawer();
+  }, [activeRelationTo, closeListDrawer, onChange, populateDocs, value]);
+  const onDocCreate = React.useCallback(data => {
+    if (data.doc) {
+      setPopulatedDocs(currentDocs_1 => [...(currentDocs_1 || []), {
+        relationTo: activeRelationTo,
+        value: data.doc
+      }]);
+      onChange(data.doc.id);
+    }
+    closeCreateDocDrawer();
+  }, [closeCreateDocDrawer, activeRelationTo, onChange]);
+  const onListSelect = useCallback(async ({
+    collectionSlug,
+    doc: doc_4
+  }) => {
+    const loadedDocs_0 = await populateDocs([doc_4.id], 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 currentDocs_2;
-      });
-      if (hasMany) {
-        onChange([...(Array.isArray(value) ? value : []), doc_4.id]);
-      } else {
-        onChange(doc_4.id);
+        return [{
+          relationTo: activeRelationTo,
+          value: selectedDoc
+        }];
       }
-      closeListDrawer();
-    };
-    $[64] = activeRelationTo;
-    $[65] = closeListDrawer;
-    $[66] = hasMany;
-    $[67] = onChange;
-    $[68] = populateDocs;
-    $[69] = value;
-    $[70] = t20;
-  } else {
-    t20 = $[70];
-  }
-  const onListSelect = t20;
-  let t21;
-  if ($[71] !== hasMany || $[72] !== onChange || $[73] !== populateDocs) {
-    t21 = async (docID, collectionSlug_0) => {
-      const {
-        docs: docs_0
-      } = await populateDocs([docID], collectionSlug_0);
-      if (docs_0[0]) {
-        let updatedDocsToPropogate;
-        updatedDocsToPropogate = [];
-        setPopulatedDocs(currentDocs_3 => {
-          const existingDocIndex = currentDocs_3?.findIndex(doc_5 => {
-            const hasExisting = doc_5.value?.id === docs_0[0].id || doc_5.value?.isPlaceholder;
-            return hasExisting && doc_5.relationTo === collectionSlug_0;
-          });
-          if (existingDocIndex > -1) {
-            const updatedDocs = [...currentDocs_3];
-            updatedDocs[existingDocIndex] = {
-              relationTo: collectionSlug_0,
-              value: docs_0[0]
-            };
-            updatedDocsToPropogate = updatedDocs;
-            return updatedDocs;
-          }
+      return currentDocs_2;
+    });
+    if (hasMany) {
+      onChange([...(Array.isArray(value) ? value : []), doc_4.id]);
+    } else {
+      onChange(doc_4.id);
+    }
+    closeListDrawer();
+  }, [closeListDrawer, hasMany, populateDocs, onChange, value, activeRelationTo]);
+  const reloadDoc = React.useCallback(async (docID, collectionSlug_0) => {
+    const {
+      docs: docs_0
+    } = await populateDocs([docID], collectionSlug_0);
+    if (docs_0[0]) {
+      let updatedDocsToPropogate = [];
+      setPopulatedDocs(currentDocs_3 => {
+        const existingDocIndex = currentDocs_3?.findIndex(doc_5 => {
+          const hasExisting = doc_5.value?.id === docs_0[0].id || doc_5.value?.isPlaceholder;
+          return hasExisting && doc_5.relationTo === collectionSlug_0;
         });
-        if (updatedDocsToPropogate.length && hasMany) {
-          onChange(updatedDocsToPropogate.map(_temp2));
+        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(doc_6 => doc_6.value?.id));
       }
-    };
-    $[71] = hasMany;
-    $[72] = onChange;
-    $[73] = populateDocs;
-    $[74] = t21;
-  } else {
-    t21 = $[74];
-  }
-  const reloadDoc = t21;
-  let t22;
-  if ($[75] !== onChange) {
-    t22 = newValue_0 => {
-      const newValueIDs = newValue_0.map(_temp3);
-      onChange(newValueIDs);
-      setPopulatedDocs(newValue_0);
-    };
-    $[75] = onChange;
-    $[76] = t22;
-  } else {
-    t22 = $[76];
-  }
-  const onReorder = t22;
-  let t23;
-  if ($[77] !== hasMany || $[78] !== onChange) {
-    t23 = newValue_1 => {
-      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 : []);
-    };
-    $[77] = hasMany;
-    $[78] = onChange;
-    $[79] = t23;
-  } else {
-    t23 = $[79];
-  }
-  const onRemove = t23;
-  let t24;
-  let t25;
-  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_7 => ({
-              relationTo: activeRelationTo,
-              value: doc_7
-            })));
-          }
+    }
+  }, [populateDocs, onChange, hasMany]);
+  // only hasMany can reorder
+  const onReorder = React.useCallback(newValue_0 => {
+    const newValueIDs = newValue_0.map(({
+      value: value_0
+    }) => value_0.id);
+    onChange(newValueIDs);
+    setPopulatedDocs(newValue_0);
+  }, [onChange]);
+  const onRemove = React.useCallback(newValue_1 => {
+    const newValueIDs_0 = newValue_1 ? newValue_1.map(({
+      value: value_1
+    }) => value_1.id) : null;
+    onChange(hasMany ? newValueIDs_0 : newValueIDs_0 ? newValueIDs_0[0] : null);
+    setPopulatedDocs(newValue_1 ? newValue_1 : []);
+  }, [onChange, hasMany]);
+  useEffect(() => {
+    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_7 => ({
+            relationTo: activeRelationTo,
+            value: doc_7
+          })));
         }
-      };
-      if (!loadedValueDocsRef.current) {
-        loadInitialDocs();
       }
-    };
-    t25 = [populateDocs, activeRelationTo, value];
-    $[80] = activeRelationTo;
-    $[81] = populateDocs;
-    $[82] = value;
-    $[83] = t24;
-    $[84] = t25;
-  } else {
-    t24 = $[83];
-    t25 = $[84];
-  }
-  useEffect(t24, t25);
-  let t26;
-  if ($[85] !== onUploadSuccess || $[86] !== path || $[87] !== setOnSuccess) {
-    t26 = () => {
-      setOnSuccess(path, onUploadSuccess);
-    };
-    $[85] = onUploadSuccess;
-    $[86] = path;
-    $[87] = setOnSuccess;
-    $[88] = t26;
-  } else {
-    t26 = $[88];
-  }
-  let t27;
-  if ($[89] !== onUploadSuccess || $[90] !== path || $[91] !== setOnSuccess || $[92] !== value) {
-    t27 = [value, path, onUploadSuccess, setOnSuccess];
-    $[89] = onUploadSuccess;
-    $[90] = path;
-    $[91] = setOnSuccess;
-    $[92] = value;
-    $[93] = t27;
-  } else {
-    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 ($[94] !== className || $[95] !== t28 || $[96] !== t29) {
-    t30 = [fieldBaseClass, baseClass, className, t28, t29].filter(Boolean);
-    $[94] = className;
-    $[95] = t28;
-    $[96] = t29;
-    $[97] = t30;
-  } else {
-    t30 = $[97];
-  }
-  const t31 = t30.join(" ");
-  const t32 = `field-${path?.replace(/\./g, "__")}`;
-  let t33;
-  if ($[98] !== AfterInput || $[99] !== BeforeInput || $[100] !== CreateDocDrawer || $[101] !== Description || $[102] !== Error || $[103] !== Label || $[104] !== ListDrawer || $[105] !== canCreate || $[106] !== description || $[107] !== displayPreview || $[108] !== hasMany || $[109] !== isSortable || $[110] !== label || $[111] !== localized || $[112] !== maxRows || $[113] !== onDocCreate || $[114] !== onListBulkSelect || $[115] !== onListSelect || $[116] !== onLocalFileSelection || $[117] !== onRemove || $[118] !== onReorder || $[119] !== openCreateDocDrawer || $[120] !== openListDrawer || $[121] !== path || $[122] !== populatedDocs || $[123] !== readOnly || $[124] !== reloadDoc || $[125] !== required || $[126] !== serverURL || $[127] !== showDropzone || $[128] !== showError || $[129] !== style || $[130] !== t || $[131] !== t31 || $[132] !== t32 || $[133] !== value) {
-    t33 = _jsxs("div", {
-      className: t31,
-      id: t32,
-      style,
-      children: [_jsx(RenderCustomComponent, {
-        CustomComponent: Label,
-        Fallback: _jsx(FieldLabel, {
-          label,
-          localized,
-          path,
-          required
+    }
+    if (!loadedValueDocsRef.current) {
+      void loadInitialDocs();
+    }
+  }, [populateDocs, activeRelationTo, value]);
+  useEffect(() => {
+    setOnSuccess(path, onUploadSuccess);
+  }, [value, path, onUploadSuccess, setOnSuccess]);
+  const showDropzone = !value || hasMany && Array.isArray(value) && (typeof maxRows !== 'number' || value.length < maxRows) || !hasMany && populatedDocs?.[0] && typeof populatedDocs[0].value === 'undefined';
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, showError && 'error', readOnly && 'read-only'].filter(Boolean).join(' '),
+    id: `field-${path?.replace(/\./g, '__')}`,
+    style: style,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__wrap`,
+      children: /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          path: path,
+          showError: showError
         })
-      }), _jsx("div", {
-        className: `${baseClass}__wrap`,
-        children: _jsx(RenderCustomComponent, {
-          CustomComponent: Error,
-          Fallback: _jsx(FieldError, {
-            path,
-            showError
-          })
+      })
+    }), BeforeInput, /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__dropzoneAndUpload`,
+      children: [hasMany && Array.isArray(value) && value.length > 0 ? /*#__PURE__*/_jsx(_Fragment, {
+        children: populatedDocs && populatedDocs?.length > 0 ? /*#__PURE__*/_jsx(UploadComponentHasMany, {
+          displayPreview: displayPreview,
+          fileDocs: populatedDocs,
+          isSortable: isSortable && !readOnly,
+          onRemove: onRemove,
+          onReorder: onReorder,
+          readonly: readOnly,
+          reloadDoc: reloadDoc,
+          serverURL: serverURL
+        }) : /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__loadingRows`,
+          children: value.map(id_1 => /*#__PURE__*/_jsx(ShimmerEffect, {
+            height: "40px"
+          }, id_1))
         })
-      }), BeforeInput, _jsxs("div", {
-        className: `${baseClass}__dropzoneAndUpload`,
-        children: [hasMany && Array.isArray(value) && value.length > 0 ? _jsx(_Fragment, {
-          children: populatedDocs && populatedDocs?.length > 0 ? _jsx(UploadComponentHasMany, {
-            displayPreview,
-            fileDocs: populatedDocs,
-            isSortable: isSortable && !readOnly,
-            onRemove,
-            onReorder,
-            readonly: readOnly,
-            reloadDoc,
-            serverURL
-          }) : _jsx("div", {
-            className: `${baseClass}__loadingRows`,
-            children: value.map(_temp5)
-          })
-        }) : null, !hasMany && value ? _jsx(_Fragment, {
-          children: populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? _jsx(UploadComponentHasOne, {
-            displayPreview,
-            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, {
+      }) : null, !hasMany && value ? /*#__PURE__*/_jsx(_Fragment, {
+        children: populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? /*#__PURE__*/_jsx(UploadComponentHasOne, {
+          displayPreview: displayPreview,
+          fileDoc: populatedDocs[0],
+          onRemove: onRemove,
+          readonly: readOnly,
+          reloadDoc: reloadDoc,
+          serverURL: serverURL
+        }) : populatedDocs && value && !populatedDocs?.[0]?.value ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [t('general:untitled'), " - ID: ", value]
+        }) : /*#__PURE__*/_jsx(ShimmerEffect, {
+          height: "62px"
+        })
+      }) : null, showDropzone ? /*#__PURE__*/_jsx(Dropzone, {
+        disabled: readOnly || !canCreate,
+        multipleFiles: hasMany,
+        onChange: onLocalFileSelection,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__dropzoneContent`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__dropzoneContent__buttons`,
+            children: [canCreate && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Button, {
                 buttonStyle: "pill",
-                className: `${baseClass}__listToggler`,
-                disabled: readOnly,
-                onClick: openListDrawer,
+                className: `${baseClass}__createNewToggler`,
+                disabled: readOnly || !canCreate,
+                onClick: () => {
+                  if (!readOnly) {
+                    if (hasMany) {
+                      onLocalFileSelection();
+                    } else {
+                      openCreateDocDrawer();
+                    }
+                  }
+                },
                 size: "small",
-                children: t("fields:chooseFromExisting")
-              }), _jsx(CreateDocDrawer, {
-                onSave: onDocCreate
-              }), _jsx(ListDrawer, {
-                allowCreate: canCreate,
-                enableRowSelections: hasMany,
-                onBulkSelect: onListBulkSelect,
-                onSelect: onListSelect
+                children: t('general:createNew')
+              }), /*#__PURE__*/_jsx("span", {
+                className: `${baseClass}__dropzoneContent__orText`,
+                children: t('general:or')
               })]
-            }), canCreate && !readOnly && _jsxs("p", {
-              className: `${baseClass}__dragAndDropText`,
-              children: [t("general:or"), " ", t("upload:dragAndDrop")]
+            }), /*#__PURE__*/_jsx(Button, {
+              buttonStyle: "pill",
+              className: `${baseClass}__listToggler`,
+              disabled: readOnly,
+              onClick: openListDrawer,
+              size: "small",
+              children: t('fields:chooseFromExisting')
+            }), /*#__PURE__*/_jsx(CreateDocDrawer, {
+              onSave: onDocCreate
+            }), /*#__PURE__*/_jsx(ListDrawer, {
+              allowCreate: canCreate,
+              enableRowSelections: hasMany,
+              onBulkSelect: onListBulkSelect,
+              onSelect: onListSelect
             })]
-          })
-        }) : _jsx(_Fragment, {
-          children: !readOnly && !populatedDocs && (!value || typeof maxRows !== "number" || Array.isArray(value) && value.length < maxRows) ? _jsx(ShimmerEffect, {
-            height: "40px"
-          }) : null
-        })]
-      }), AfterInput, _jsx(RenderCustomComponent, {
-        CustomComponent: Description,
-        Fallback: _jsx(FieldDescription, {
-          description,
-          path
+          }), canCreate && !readOnly && /*#__PURE__*/_jsxs("p", {
+            className: `${baseClass}__dragAndDropText`,
+            children: [t('general:or'), " ", t('upload:dragAndDrop')]
+          })]
         })
+      }) : /*#__PURE__*/_jsx(_Fragment, {
+        children: !readOnly && !populatedDocs && (!value || typeof maxRows !== 'number' || Array.isArray(value) && value.length < maxRows) ? /*#__PURE__*/_jsx(ShimmerEffect, {
+          height: "40px"
+        }) : null
       })]
-    });
-    $[98] = AfterInput;
-    $[99] = BeforeInput;
-    $[100] = CreateDocDrawer;
-    $[101] = Description;
-    $[102] = Error;
-    $[103] = Label;
-    $[104] = ListDrawer;
-    $[105] = canCreate;
-    $[106] = description;
-    $[107] = displayPreview;
-    $[108] = hasMany;
-    $[109] = isSortable;
-    $[110] = label;
-    $[111] = localized;
-    $[112] = maxRows;
-    $[113] = onDocCreate;
-    $[114] = onListBulkSelect;
-    $[115] = onListSelect;
-    $[116] = onLocalFileSelection;
-    $[117] = onRemove;
-    $[118] = onReorder;
-    $[119] = openCreateDocDrawer;
-    $[120] = openListDrawer;
-    $[121] = path;
-    $[122] = populatedDocs;
-    $[123] = readOnly;
-    $[124] = reloadDoc;
-    $[125] = required;
-    $[126] = serverURL;
-    $[127] = showDropzone;
-    $[128] = showError;
-    $[129] = style;
-    $[130] = t;
-    $[131] = t31;
-    $[132] = t32;
-    $[133] = value;
-    $[134] = t33;
-  } else {
-    t33 = $[134];
-  }
-  return t33;
-}
-function _temp5(id_1) {
-  return _jsx(ShimmerEffect, {
-    height: "40px"
-  }, id_1);
-}
-function _temp4(t0) {
-  const {
-    value: value_1
-  } = t0;
-  return value_1.id;
-}
-function _temp3(t0) {
-  const {
-    value: value_0
-  } = t0;
-  return value_0.id;
-}
-function _temp2(doc_6) {
-  return doc_6.value?.id;
-}
-function _temp(doc_1) {
-  return doc_1.id;
+    }), AfterInput, /*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Description,
+      Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
+        path: path
+      })
+    })]
+  });
 }
 //# sourceMappingURL=Input.js.map