@payloadcms/ui 3.0.0-beta.95 → 3.0.0-beta.97

package/dist/fields/Upload/Input.js

@@ -1,11 +1,13 @@
 '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';
 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 { Dropzone } from '../../elements/Dropzone/index.js';
 import { useListDrawer } from '../../elements/ListDrawer/index.js';
 import { ShimmerEffect } from '../../elements/ShimmerEffect/index.js';
@@ -21,20 +23,20 @@ import { UploadComponentHasOne } from './HasOne/index.js';
 import './index.scss';
 export const baseClass = 'upload';
 export function UploadInput(props) {
+  const $ = _c(125);
   const {
-    Description,
-    Error,
-    Label,
-    allowNewUpload,
     api,
     className,
+    Description,
     description,
     descriptionProps,
+    Error,
     errorProps,
     field,
     filterOptions: filterOptionsFromProps,
     hasMany,
     isSortable,
+    Label,
     label,
     labelProps,
     maxRows,
@@ -50,7 +52,7 @@ export function UploadInput(props) {
     width
   } = props;
   const [populatedDocs, setPopulatedDocs] = React.useState();
-  const [activeRelationTo, setActiveRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
+  const [activeRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
   const {
     openModal
   } = useModal();
@@ -71,296 +73,601 @@ export function UploadInput(props) {
     i18n,
     t
   } = useTranslation();
-  const filterOptions = useMemo(() => {
-    return {
+  let t0;
+  let t1;
+  if ($[0] !== filterOptionsFromProps || $[1] !== activeRelationTo) {
+    t1 = filterOptionsFromProps?.[activeRelationTo] || {};
+    $[0] = filterOptionsFromProps;
+    $[1] = activeRelationTo;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let 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 {
+    t3 = $[8];
+  }
+  let t4;
+  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
+    };
+    $[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] !== filterOptionsFromProps || $[19] !== activeRelationTo || $[20] !== t6) {
+    t7 = {
       ...filterOptionsFromProps,
-      [activeRelationTo]: {
-        ...(filterOptionsFromProps?.[activeRelationTo] || {}),
-        id: {
-          ...(filterOptionsFromProps?.[activeRelationTo]?.id || {}),
-          not_in: (filterOptionsFromProps?.[activeRelationTo]?.id?.not_in || []).concat(...((Array.isArray(value) || value ? [value] : []) || []))
-        }
-      }
+      [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
+    };
+    $[24] = t8;
+    $[25] = filterOptions;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  const [ListDrawer,, t10] = useListDrawer(t9);
+  const {
+    closeDrawer: closeListDrawer,
+    openDrawer: openListDrawer
+  } = t10;
+  let t11;
+  if ($[27] !== activeRelationTo) {
+    t11 = {
+      collectionSlug: activeRelationTo
     };
-  }, [value, activeRelationTo, filterOptionsFromProps]);
-  const [ListDrawer, ListDrawerToggler, {
-    closeDrawer: closeListDrawer
-  }] = useListDrawer({
-    collectionSlugs: typeof relationTo === 'string' ? [relationTo] : relationTo,
-    filterOptions
-  });
-  const inputRef = React.useRef(null);
+    $[27] = activeRelationTo;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  const [CreateDocDrawer,, t12] = useDocumentDrawer(t11);
+  const {
+    closeDrawer: closeCreateDocDrawer,
+    openDrawer: openCreateDocDrawer
+  } = t12;
   const loadedValueDocsRef = React.useRef(false);
-  const canCreate = useMemo(() => {
-    if (typeof activeRelationTo === 'string') {
+  let t13;
+  bb0: {
+    if (typeof activeRelationTo === "string") {
       if (permissions?.collections && permissions.collections?.[activeRelationTo]?.create) {
         if (permissions.collections[activeRelationTo].create?.permission === true) {
-          return true;
+          t13 = true;
+          break bb0;
         }
       }
     }
-    return false;
-  }, [activeRelationTo, permissions]);
-  const onChange = React.useCallback(newValue => {
-    if (typeof onChangeFromProps === 'function') {
-      onChangeFromProps(newValue);
-    }
-  }, [onChangeFromProps]);
-  const populateDocs = React.useCallback(async (ids, relatedCollectionSlug) => {
-    const query = {
-      depth: 0,
-      draft: true,
-      limit: ids.length,
-      locale: code,
-      where: {
-        and: [{
-          id: {
-            in: ids
-          }
-        }]
+    t13 = false;
+  }
+  const canCreate = t13;
+  let t14;
+  if ($[29] !== onChangeFromProps) {
+    t14 = newValue => {
+      if (typeof onChangeFromProps === "function") {
+        onChangeFromProps(newValue);
       }
     };
-    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 => doc.id === id));
-      return {
-        ...json,
-        docs: sortedDocs
+    $[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
+            }
+          }]
+        }
       };
-    }
-    return null;
-  }, [code, serverURL, api, i18n.language]);
-  const onUploadSuccess = useCallback(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
-      }]);
-    }
-  }, [value, onChange, activeRelationTo, hasMany]);
-  const onFileSelection = 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);
-    setOnSuccess(onUploadSuccess);
-    if (typeof maxRows === 'number') setMaxFiles(maxRows);
-    openModal(drawerSlug);
-  }, [drawerSlug, hasMany, onUploadSuccess, openModal, relationTo, setCollectionSlug, setInitialFiles, setOnSuccess, maxRows, setMaxFiles]);
-  // only hasMany can bulk select
-  const onListBulkSelect = React.useCallback(async docs => {
-    const selectedDocIDs = Object.entries(docs).reduce((acc, [docID, isSelected]) => {
-      if (isSelected) {
-        acc.push(docID);
+      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
+        };
       }
-      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();
-  }, [activeRelationTo, closeListDrawer, onChange, populateDocs, value]);
-  const onListSelect = React.useCallback(async ({
-    collectionSlug,
-    docID: docID_0
-  }) => {
-    const loadedDocs_0 = await populateDocs([docID_0], collectionSlug);
-    const selectedDoc = loadedDocs_0 ? loadedDocs_0.docs?.[0] : null;
-    setPopulatedDocs(currentDocs_1 => {
-      if (selectedDoc) {
-        if (hasMany) {
-          return [...(currentDocs_1 || []), {
+      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 {
+        const firstDoc = newDocs[0];
+        onChange(firstDoc.id);
+        setPopulatedDocs([{
+          relationTo: activeRelationTo,
+          value: firstDoc
+        }]);
+      }
+    };
+    $[36] = hasMany;
+    $[37] = value;
+    $[38] = onChange;
+    $[39] = activeRelationTo;
+    $[40] = t16;
+  } else {
+    t16 = $[40];
+  }
+  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 {
+    t17 = $[51];
+  }
+  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();
+    };
+    $[52] = populateDocs;
+    $[53] = activeRelationTo;
+    $[54] = onChange;
+    $[55] = value;
+    $[56] = closeListDrawer;
+    $[57] = t18;
+  } else {
+    t18 = $[57];
+  }
+  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 [{
-          relationTo: activeRelationTo,
-          value: selectedDoc
-        }];
+        return currentDocs_2;
+      });
+      if (hasMany) {
+        onChange([...(Array.isArray(value) ? value : []), docID_0]);
+      } else {
+        onChange(docID_0);
       }
-      return currentDocs_1;
-    });
-    if (hasMany) {
-      onChange([...(Array.isArray(value) ? value : []), docID_0]);
-    } else {
-      onChange(docID_0);
-    }
-    closeListDrawer();
-  }, [closeListDrawer, hasMany, populateDocs, onChange, value, activeRelationTo]);
-  // 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) {
-        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
-          })));
+      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] !== 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 {
+    t22 = $[73];
+  }
+  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();
       }
-      loadedValueDocsRef.current = true;
+    };
+    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 {
+      t31 = $[120];
     }
-    if (!loadedValueDocsRef.current) {
-      void loadInitialDocs();
+    let t32;
+    if ($[121] !== errorProps) {
+      t32 = errorProps || {};
+      $[121] = errorProps;
+      $[122] = t32;
+    } else {
+      t32 = $[122];
     }
-  }, [populateDocs, activeRelationTo, value]);
-  const showDropzone = !readOnly && (!value || hasMany && Array.isArray(value) && (typeof maxRows !== 'number' || value.length < maxRows));
-  return /*#__PURE__*/_jsxs("div", {
-    className: [fieldBaseClass, baseClass, className, showError && 'error', readOnly && 'read-only'].filter(Boolean).join(' '),
-    style: {
-      ...style,
-      width
-    },
-    children: [/*#__PURE__*/_jsx(FieldLabel, {
-      Label: Label,
-      label: label,
-      required: required,
-      ...(labelProps || {}),
-      field: field
-    }), /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__wrap`,
-      children: /*#__PURE__*/_jsx(FieldError, {
-        CustomError: Error,
-        path: path,
-        ...(errorProps || {}),
-        field: field
-      })
-    }), /*#__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, {
-          fileDocs: populatedDocs,
-          isSortable: isSortable && !readOnly,
-          onRemove: onRemove,
-          onReorder: onReorder,
-          readonly: readOnly,
-          serverURL: serverURL
-        }) : /*#__PURE__*/_jsx("div", {
-          className: `${baseClass}__loadingRows`,
-          children: value.map(id_0 => /*#__PURE__*/_jsx(ShimmerEffect, {
-            height: "40px"
-          }, id_0))
-        })
-      }) : null, !hasMany && value ? /*#__PURE__*/_jsx(_Fragment, {
-        children: populatedDocs && populatedDocs?.length > 0 ? /*#__PURE__*/_jsx(UploadComponentHasOne, {
-          fileDoc: populatedDocs[0],
-          onRemove: onRemove,
-          readonly: readOnly,
-          serverURL: serverURL
-        }) : /*#__PURE__*/_jsx(ShimmerEffect, {
-          height: "62px"
+    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
         })
-      }) : null, showDropzone ? /*#__PURE__*/_jsx(Dropzone, {
-        multipleFiles: hasMany,
-        onChange: onFileSelection,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__dropzoneContent`,
-          children: [/*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__dropzoneContent__buttons`,
-            children: [/*#__PURE__*/_jsx(Button, {
-              buttonStyle: "icon-label",
-              disabled: readOnly || !canCreate,
-              icon: "plus",
-              iconPosition: "left",
-              onClick: () => {
-                if (!readOnly) {
-                  if (hasMany) {
-                    onFileSelection();
-                  } else if (inputRef.current) {
-                    inputRef.current.click();
+      }), _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')
-            }), /*#__PURE__*/_jsx("input", {
-              "aria-hidden": "true",
-              className: `${baseClass}__hidden-input`,
-              disabled: readOnly,
-              hidden: true,
-              multiple: hasMany,
-              onChange: e => {
-                if (e.target.files && e.target.files.length > 0) {
-                  onFileSelection(e.target.files);
-                }
-              },
-              ref: inputRef,
-              type: "file"
-            }), /*#__PURE__*/_jsx(ListDrawerToggler, {
-              className: `${baseClass}__toggler`,
-              disabled: readOnly,
-              children: /*#__PURE__*/_jsx(Button, {
-                buttonStyle: "icon-label",
-                el: "span",
-                icon: "plus",
-                iconPosition: "left",
-                children: t('fields:chooseFromExisting')
-              })
-            }), /*#__PURE__*/_jsx(ListDrawer, {
-              enableRowSelections: hasMany,
-              onBulkSelect: onListBulkSelect,
-              onSelect: onListSelect
+                },
+                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, {
+                enableRowSelections: hasMany,
+                onBulkSelect: onListBulkSelect,
+                onSelect: onListSelect
+              })]
+            }), _jsxs("p", {
+              className: `${baseClass}__dragAndDropText`,
+              children: [t("general:or"), " ", t("upload:dragAndDrop")]
             })]
-          }), /*#__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
+          })
+        }) : _jsx(_Fragment, {
+          children: !readOnly && !populatedDocs && (!value || typeof maxRows !== "number" || Array.isArray(value) && value.length < maxRows) ? _jsx(ShimmerEffect, {
+            height: "40px"
+          }) : null
+        })]
+      }), _jsx(FieldDescription, {
+        Description,
+        description,
+        ...t33,
+        field
       })]
-    }), /*#__PURE__*/_jsx(FieldDescription, {
-      Description: Description,
-      description: description,
-      ...(descriptionProps || {}),
-      field: 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 t30;
+}
+function _temp(id_0) {
+  return _jsx(ShimmerEffect, {
+    height: "40px"
+  }, id_0);
 }
 //# sourceMappingURL=Input.js.map