@panneau/field-upload 4.0.50 → 4.0.56

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-field-upload-container{position:relative;width:100%}.panneau-field-upload-container .panneau-field-upload-dashboard{margin-bottom:10px;position:relative}.panneau-field-upload-container .panneau-field-upload-dashboardModal{position:relative;z-index:10001}.panneau-field-upload-container .panneau-field-upload-uppyDashboardContainer{margin-top:0}
+.panneau-field-upload-dashboard{margin-bottom:10px;position:relative}.panneau-field-upload-dashboardModal{position:relative;z-index:10001}.panneau-field-upload-uppyDashboardContainer{margin-top:0}

package/dist/index.d.ts

@@ -1,7 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Label } from '@panneau/core';
+import * as react from 'react';
+import { MediaType, Label } from '@panneau/core';
 
-type MediaType = 'audio' | 'image' | 'video' | 'document';
 type MediaSource = 'webcam' | 'facebook' | 'instagram' | 'dropbox' | 'google-drive';
 interface Media$1 {
     filename?: string;
@@ -49,7 +48,7 @@ interface UploadFieldProps {
     onClose?: ((value: Media$1 | Media$1[] | null) => void) | null;
     className?: string | null;
 }
-declare function UploadField({ resource, value, name, types, fileTypes, sources, withButton, withFind, withClearButton, withoutMedia, addButtonLabel: initialAddButtonLabel, findButtonLabel: initialFindButtonLabel, clearButtonLabel: initialCleanButtonLabel, allowMultipleUploads, closeAfterFinish, maxNumberOfFiles, namePath, thumbnailPath, sizePath, linkPath, uppyProps, width, height, disabled, uploadDisabled, outline, loading: parentLoading, onChange, onClear, onClickAdd, onClickFind, className, }: UploadFieldProps): react_jsx_runtime.JSX.Element;
+declare function UploadField({ resource, value, name, types, fileTypes, sources, withButton, withFind, withClearButton, withoutMedia, addButtonLabel: initialAddButtonLabel, findButtonLabel: initialFindButtonLabel, clearButtonLabel: initialCleanButtonLabel, allowMultipleUploads, closeAfterFinish, maxNumberOfFiles, namePath, thumbnailPath, sizePath, linkPath, uppyProps, width, height, disabled, uploadDisabled, outline, loading: parentLoading, onChange, onClear, onClickAdd, onClickFind, className, }: UploadFieldProps): react.JSX.Element;
 
 declare const _default: {
     id: string;
@@ -59,32 +58,32 @@ declare const _default: {
 interface AudioFieldProps {
     [key: string]: unknown;
 }
-declare function AudioField(props: AudioFieldProps): react_jsx_runtime.JSX.Element;
+declare function AudioField(props: AudioFieldProps): react.JSX.Element;
 
 interface ImageFieldProps {
     [key: string]: unknown;
 }
-declare function ImageField(props: ImageFieldProps): react_jsx_runtime.JSX.Element;
+declare function ImageField(props: ImageFieldProps): react.JSX.Element;
 
 interface ImagesFieldProps {
     [key: string]: unknown;
 }
-declare function ImagesField(props: ImagesFieldProps): react_jsx_runtime.JSX.Element;
+declare function ImagesField(props: ImagesFieldProps): react.JSX.Element;
 
 interface VideoFieldProps {
     [key: string]: unknown;
 }
-declare function VideoField(props: VideoFieldProps): react_jsx_runtime.JSX.Element;
+declare function VideoField(props: VideoFieldProps): react.JSX.Element;
 
 interface DocumentFieldProps {
     [key: string]: unknown;
 }
-declare function DocumentField(props: DocumentFieldProps): react_jsx_runtime.JSX.Element;
+declare function DocumentField(props: DocumentFieldProps): react.JSX.Element;
 
 interface FontFieldProps {
     [key: string]: unknown;
 }
-declare function FontField(props: FontFieldProps): react_jsx_runtime.JSX.Element;
+declare function FontField(props: FontFieldProps): react.JSX.Element;
 
 interface Media {
     id?: string | number;
@@ -102,6 +101,6 @@ interface UpdateFileFieldProps {
     fileTypes?: string[] | null;
     [key: string]: unknown;
 }
-declare function UpdateFileField({ value, onChange, ...props }: UpdateFileFieldProps): react_jsx_runtime.JSX.Element;
+declare function UpdateFileField({ value, onChange, ...props }: UpdateFileFieldProps): react.JSX.Element;
 
 export { AudioField, DocumentField, FontField, ImageField, ImagesField, UpdateFileField, VideoField, UploadField as default, _default as definition };

package/dist/index.js

@@ -1,11 +1,10 @@
-import { c } from 'react/compiler-runtime';
 import { UppyContextProvider } from '@uppy/react';
 import Dashboard from '@uppy/react/dashboard';
 import DashboardModal from '@uppy/react/dashboard-modal';
 import classNames from 'classnames';
-import isArray from 'lodash/isArray';
-import isObject from 'lodash/isObject';
-import { useState, useRef, useEffect } from 'react';
+import isArray from 'lodash-es/isArray';
+import isObject from 'lodash-es/isObject';
+import { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useQuery } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
@@ -16,516 +15,253 @@ import { useUppy } from '@panneau/uppy';
 import '@uppy/core/css/style.css';
 import '@uppy/dashboard/css/style.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { c } from 'react/compiler-runtime';
 
-var styles = {"container":"panneau-field-upload-container","dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
+var styles = {"dashboard":"panneau-field-upload-dashboard","dashboardModal":"panneau-field-upload-dashboardModal"};
 
+// import classNames from 'classnames';
 const DEFAULT_TYPES = ['audio', 'image', 'video'];
 const DEFAULT_SOURCES = ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'];
-function UploadField(t0) {
-  const $ = c(123);
-  const {
-    resource: t1,
-    value: t2,
-    name: t3,
-    types: t4,
-    fileTypes: t5,
-    sources: t6,
-    withButton: t7,
-    withFind: t8,
-    withClearButton: t9,
-    withoutMedia: t10,
-    addButtonLabel: t11,
-    findButtonLabel: t12,
-    clearButtonLabel: t13,
-    allowMultipleUploads: t14,
-    closeAfterFinish: t15,
-    maxNumberOfFiles: t16,
-    namePath: t17,
-    thumbnailPath: t18,
-    sizePath: t19,
-    linkPath: t20,
-    uppyProps: t21,
-    width: t22,
-    height: t23,
-    disabled: t24,
-    uploadDisabled: t25,
-    outline: t26,
-    loading: t27,
-    onChange: t28,
-    onClear: t29,
-    onClickAdd: t30,
-    onClickFind: t31,
-    className: t32
-  } = t0;
-  const resource = t1 === undefined ? "medias" : t1;
-  const value = t2 === undefined ? null : t2;
-  const name = t3 === undefined ? null : t3;
-  const types = t4 === undefined ? DEFAULT_TYPES : t4;
-  const fileTypes = t5 === undefined ? null : t5;
-  const sources = t6 === undefined ? DEFAULT_SOURCES : t6;
-  const withButton = t7 === undefined ? false : t7;
-  const withFind = t8 === undefined ? false : t8;
-  const withClearButton = t9 === undefined ? false : t9;
-  const withoutMedia = t10 === undefined ? false : t10;
-  const initialAddButtonLabel = t11 === undefined ? null : t11;
-  const initialFindButtonLabel = t12 === undefined ? null : t12;
-  const initialCleanButtonLabel = t13 === undefined ? null : t13;
-  const allowMultipleUploads = t14 === undefined ? false : t14;
-  const closeAfterFinish = t15 === undefined ? true : t15;
-  const maxNumberOfFiles = t16 === undefined ? 1 : t16;
-  const namePath = t17 === undefined ? "name" : t17;
-  const thumbnailPath = t18 === undefined ? "thumbnail_url" : t18;
-  const sizePath = t19 === undefined ? "metadata.size" : t19;
-  const linkPath = t20 === undefined ? null : t20;
-  const uppyProps = t21 === undefined ? null : t21;
-  const width = t22 === undefined ? null : t22;
-  const height = t23 === undefined ? 300 : t23;
-  const disabled = t24 === undefined ? false : t24;
-  const uploadDisabled = t25 === undefined ? false : t25;
-  const outline = t26 === undefined ? true : t26;
-  const parentLoading = t27 === undefined ? false : t27;
-  const onChange = t28 === undefined ? null : t28;
-  const onClear = t29 === undefined ? null : t29;
-  const onClickAdd = t30 === undefined ? null : t30;
-  const onClickFind = t31 === undefined ? null : t31;
-  const className = t32 === undefined ? null : t32;
-  let t33;
-  if ($[0] !== initialAddButtonLabel) {
-    t33 = initialAddButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
-      id: "BeKVq6"
-    });
-    $[0] = initialAddButtonLabel;
-    $[1] = t33;
-  } else {
-    t33 = $[1];
-  }
-  const addButtonLabel = t33;
-  let t34;
-  if ($[2] !== initialFindButtonLabel) {
-    t34 = initialFindButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
-      id: "une5WQ"
-    });
-    $[2] = initialFindButtonLabel;
-    $[3] = t34;
-  } else {
-    t34 = $[3];
-  }
-  const findButtonLabel = t34;
-  let t35;
-  if ($[4] !== initialCleanButtonLabel) {
-    t35 = initialCleanButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
-      id: "odaCUe"
-    });
-    $[4] = initialCleanButtonLabel;
-    $[5] = t35;
-  } else {
-    t35 = $[5];
-  }
-  const clearButtonLabel = t35;
-  const mergeData = _temp;
-  let t36;
-  if ($[6] !== allowMultipleUploads || $[7] !== onChange) {
-    t36 = response => {
-      let newValue_0 = null;
-      if (isArray(response)) {
-        if (allowMultipleUploads) {
-          newValue_0 = response;
-        } else {
-          const [first] = response;
-          newValue_0 = first;
-        }
-      } else {
-        if (response && response.successful) {
-          newValue_0 = response.successful.length > 0 ? response.successful[0].response.body : null;
-        }
-      }
-      if (isArray(newValue_0)) {
-        newValue_0 = newValue_0.map(val => mergeData(val));
+function UploadField({
+  resource = 'medias',
+  value = null,
+  name = null,
+  types = DEFAULT_TYPES,
+  fileTypes = null,
+  sources = DEFAULT_SOURCES,
+  withButton = false,
+  withFind = false,
+  withClearButton = false,
+  withoutMedia = false,
+  addButtonLabel: initialAddButtonLabel = null,
+  findButtonLabel: initialFindButtonLabel = null,
+  clearButtonLabel: initialCleanButtonLabel = null,
+  allowMultipleUploads = false,
+  closeAfterFinish = true,
+  maxNumberOfFiles = 1,
+  namePath = 'name',
+  thumbnailPath = 'thumbnail_url',
+  sizePath = 'metadata.size',
+  linkPath = null,
+  uppyProps = null,
+  width = null,
+  height = 300,
+  disabled = false,
+  uploadDisabled = false,
+  outline = true,
+  loading: parentLoading = false,
+  onChange = null,
+  onClear = null,
+  onClickAdd = null,
+  onClickFind = null,
+  className = null
+}) {
+  const addButtonLabel = initialAddButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
+    id: "BeKVq6"
+  });
+  const findButtonLabel = initialFindButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
+    id: "une5WQ"
+  });
+  const clearButtonLabel = initialCleanButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
+    id: "odaCUe"
+  });
+  const mergeData = useCallback(newValue => {
+    // Merge the response from our back-end
+    if (isObject(newValue) && isObject(newValue.response) && newValue.response.status === 200 && newValue.response.body !== null) {
+      return {
+        ...newValue,
+        ...(newValue.response.body || null)
+      };
+    }
+    return newValue;
+  }, []);
+  const onComplete = useCallback(response => {
+    let newValue_0 = null;
+    if (isArray(response)) {
+      if (allowMultipleUploads) {
+        newValue_0 = response;
       } else {
-        if (newValue_0 !== null) {
-          newValue_0 = mergeData(newValue_0);
-        }
+        const [first] = response;
+        newValue_0 = first;
       }
-      if (onChange !== null) {
-        onChange(newValue_0);
-      }
-    };
-    $[6] = allowMultipleUploads;
-    $[7] = onChange;
-    $[8] = t36;
-  } else {
-    t36 = $[8];
-  }
-  const onComplete = t36;
-  let t37;
-  if ($[9] !== types) {
-    t37 = types !== null ? types.join(".") : ["audio", "image", "video"].join(".");
-    $[9] = types;
-    $[10] = t37;
-  } else {
-    t37 = $[10];
-  }
-  const typesString = t37;
-  let t38;
-  bb0: {
-    if (fileTypes !== null) {
-      t38 = fileTypes;
-      break bb0;
+    } else if (response && response.successful) {
+      newValue_0 = response.successful.length > 0 ? response.successful[0].response.body : null;
     }
-    let t39;
-    if ($[11] !== typesString) {
-      t39 = typesString.split(".").map(_temp2);
-      $[11] = typesString;
-      $[12] = t39;
-    } else {
-      t39 = $[12];
+    if (isArray(newValue_0)) {
+      newValue_0 = newValue_0.map(val => mergeData(val));
+    } else if (newValue_0 !== null) {
+      newValue_0 = mergeData(newValue_0);
     }
-    t38 = t39;
-  }
-  const allowedFileTypes = t38;
-  const t39 = allowMultipleUploads && maxNumberOfFiles === 1 ? 50 : maxNumberOfFiles;
-  let t40;
-  if ($[13] !== allowMultipleUploads || $[14] !== allowedFileTypes || $[15] !== onComplete || $[16] !== sources || $[17] !== t39 || $[18] !== uppyProps) {
-    t40 = {
-      maxNumberOfFiles: t39,
-      allowedFileTypes,
-      sources,
-      ...uppyProps,
-      allowMultipleUploads,
-      autoProceed: true,
-      onComplete
-    };
-    $[13] = allowMultipleUploads;
-    $[14] = allowedFileTypes;
-    $[15] = onComplete;
-    $[16] = sources;
-    $[17] = t39;
-    $[18] = uppyProps;
-    $[19] = t40;
-  } else {
-    t40 = $[19];
-  }
-  const uppyFinalProps = t40;
+    if (onChange !== null) {
+      onChange(newValue_0);
+    }
+  }, [onChange, allowMultipleUploads, mergeData]);
+  const typesString = useMemo(() => types !== null ? types.join('.') : ['audio', 'image', 'video'].join('.'), [types]);
+  const allowedFileTypes = useMemo(() => {
+    if (fileTypes !== null) {
+      return fileTypes;
+    }
+    return typesString.split('.').map(type => `${type}/*`);
+  }, [typesString, fileTypes]);
+  const uppyFinalProps = useMemo(() => ({
+    maxNumberOfFiles: allowMultipleUploads && maxNumberOfFiles === 1 ? 50 : maxNumberOfFiles,
+    allowedFileTypes,
+    sources,
+    ...uppyProps,
+    allowMultipleUploads,
+    autoProceed: true,
+    onComplete
+  }), [uppyProps, allowedFileTypes, allowMultipleUploads, maxNumberOfFiles, sources, onComplete]);
   const uppy = useUppy(uppyFinalProps);
   const [modalOpened, setModalOpened] = useState(false);
-  let t41;
-  if ($[20] !== modalOpened) {
-    t41 = () => {
-      setModalOpened(!modalOpened);
-    };
-    $[20] = modalOpened;
-    $[21] = t41;
-  } else {
-    t41 = $[21];
-  }
-  const openModal = t41;
-  let t42;
-  if ($[22] !== uppy) {
-    t42 = () => {
-      setModalOpened(false);
-      if (uppy !== null) {
-        uppy.cancelAll({
-          reason: "user"
-        });
-      }
-    };
-    $[22] = uppy;
-    $[23] = t42;
-  } else {
-    t42 = $[23];
-  }
-  const closeModal = t42;
-  let t43;
-  if ($[24] !== onClear || $[25] !== uppy) {
-    t43 = () => {
-      if (onClear !== null) {
-        onClear();
-      }
-      if (uppy !== null) {
-        uppy.cancelAll({
-          reason: "user"
-        });
-      }
-    };
-    $[24] = onClear;
-    $[25] = uppy;
-    $[26] = t43;
-  } else {
-    t43 = $[26];
-  }
-  const onClickClear = t43;
-  let t44;
-  if ($[27] !== onChange || $[28] !== value) {
-    t44 = idx => {
-      if (onChange !== null && isArray(value) && value.length > 1) {
-        onChange(value.filter((v, i) => i !== idx));
-      } else {
-        if (onChange !== null) {
-          onChange(null);
-        }
-      }
-    };
-    $[27] = onChange;
-    $[28] = value;
-    $[29] = t44;
-  } else {
-    t44 = $[29];
-  }
-  const onClickRemove = t44;
-  let t45;
-  bb1: {
-    if (isArray(value)) {
-      t45 = value;
-      break bb1;
+  const openModal = useCallback(() => {
+    setModalOpened(!modalOpened);
+  }, [modalOpened, setModalOpened]);
+  const closeModal = useCallback(() => {
+    setModalOpened(false);
+    if (uppy !== null) {
+      uppy.cancelAll({
+        reason: 'user'
+      });
     }
-    let t46;
-    if ($[30] !== value) {
-      t46 = value !== null ? [value] : null;
-      $[30] = value;
-      $[31] = t46;
-    } else {
-      t46 = $[31];
+  }, [uppy, setModalOpened]);
+  const onClickClear = useCallback(() => {
+    if (onClear !== null) {
+      onClear();
     }
-    t45 = t46;
-  }
-  const values = t45;
+    if (onChange !== null) {
+      onChange(null);
+    }
+    if (uppy !== null) {
+      uppy.cancelAll({
+        reason: 'user'
+      });
+    }
+  }, [uppy, onClear]);
+  const onClickRemove = useCallback(idx => {
+    if (onChange !== null && isArray(value) && value.length > 1) {
+      onChange(value.filter((v, i) => i !== idx));
+    } else if (onChange !== null) {
+      onChange(null);
+    }
+  }, [value, onChange]);
+  const values = useMemo(() => {
+    if (isArray(value)) {
+      return value;
+    }
+    return value !== null ? [value] : null;
+  }, [value]);
+
+  // Resource-modal-picker
   const hasMedia = values !== null && values.length > 0;
   const [resourceModalOpen, setResourceModalOpen] = useState(false);
   const showResourceModal = resource !== null && withFind && resourceModalOpen;
-  let t46;
-  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-    t46 = () => {
-      setResourceModalOpen(true);
-    };
-    $[32] = t46;
-  } else {
-    t46 = $[32];
-  }
-  const openResourceModal = t46;
-  let t47;
-  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-    t47 = [];
-    $[33] = t47;
-  } else {
-    t47 = $[33];
-  }
-  const [modalItems, setModalItems] = useState(t47);
-  let t48;
-  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-    t48 = () => {
-      setResourceModalOpen(false);
-      setModalItems([]);
-    };
-    $[34] = t48;
-  } else {
-    t48 = $[34];
-  }
-  const closeResourceModal = t48;
-  let t49;
-  if ($[35] !== onClickFind) {
-    t49 = () => {
-      if (onClickFind !== null) {
-        onClickFind();
-      } else {
-        openResourceModal();
-      }
-    };
-    $[35] = onClickFind;
-    $[36] = t49;
-  } else {
-    t49 = $[36];
-  }
-  const finalOnClickFind = t49;
-  let t50;
-  if ($[37] !== allowMultipleUploads || $[38] !== modalItems) {
-    t50 = newValue_1 => {
-      if (allowMultipleUploads) {
-        if (newValue_1 !== null && !isArray(newValue_1)) {
-          const {
-            id: t51
-          } = newValue_1 || {};
-          const id = t51 === undefined ? null : t51;
-          if (id !== null) {
-            const previous = (modalItems || []).find(t52 => {
-              const {
-                id: t53
-              } = t52 === undefined ? {} : t52;
-              const itemId = t53 === undefined ? null : t53;
-              return id === itemId;
-            });
-            if (previous) {
-              setModalItems((modalItems || []).filter(t54 => {
-                const {
-                  id: t55
-                } = t54 === undefined ? {} : t54;
-                const itemId_0 = t55 === undefined ? null : t55;
-                return id !== itemId_0;
-              }));
-            } else {
-              setModalItems([...(modalItems || []), newValue_1]);
-            }
-          }
-        } else {
-          if (newValue_1 !== null && isArray(newValue_1)) {
-            setModalItems(newValue_1);
+  const openResourceModal = useCallback(() => {
+    setResourceModalOpen(true);
+  }, [resourceModalOpen, setResourceModalOpen]);
+  const [modalItems, setModalItems] = useState([]);
+  const closeResourceModal = useCallback(() => {
+    setResourceModalOpen(false);
+    setModalItems([]);
+  }, [resourceModalOpen, setResourceModalOpen, setModalItems]);
+  const finalOnClickFind = useCallback(() => {
+    if (onClickFind !== null) {
+      onClickFind();
+    } else {
+      openResourceModal();
+    }
+  }, [onClickFind, openResourceModal]);
+  const onSelectionChange = useCallback(newValue_1 => {
+    if (allowMultipleUploads) {
+      if (newValue_1 !== null && !isArray(newValue_1)) {
+        const {
+          id = null
+        } = newValue_1 || {};
+        if (id !== null) {
+          const previous = (modalItems || []).find(({
+            id: itemId = null
+          } = {}) => id === itemId);
+          if (previous) {
+            setModalItems((modalItems || []).filter(({
+              id: itemId_0 = null
+            } = {}) => id !== itemId_0));
+          } else {
+            setModalItems([...(modalItems || []), newValue_1]);
           }
         }
-      } else {
+      } else if (newValue_1 !== null && isArray(newValue_1)) {
         setModalItems(newValue_1);
       }
-    };
-    $[37] = allowMultipleUploads;
-    $[38] = modalItems;
-    $[39] = t50;
-  } else {
-    t50 = $[39];
-  }
-  const onSelectionChange = t50;
-  let t51;
-  if ($[40] !== modalItems || $[41] !== onChange) {
-    t51 = () => {
-      if (onChange !== null) {
-        onChange(modalItems);
-        setResourceModalOpen(false);
-        setModalItems([]);
-      }
-    };
-    $[40] = modalItems;
-    $[41] = onChange;
-    $[42] = t51;
-  } else {
-    t51 = $[42];
-  }
-  const confirmResourceModal = t51;
-  let t52;
-  if ($[43] !== types) {
-    t52 = {
-      types
-    };
-    $[43] = types;
-    $[44] = t52;
-  } else {
-    t52 = $[44];
-  }
-  const initialQuery = t52;
+    } else {
+      setModalItems(newValue_1);
+    }
+  }, [onChange, setResourceModalOpen, allowMultipleUploads, modalItems, setModalItems]);
+  const confirmResourceModal = useCallback(() => {
+    if (onChange !== null) {
+      // Always multiple onchange
+      onChange(modalItems);
+      setResourceModalOpen(false);
+      setModalItems([]);
+    }
+  }, [onChange, setResourceModalOpen, modalItems, allowMultipleUploads, setModalItems]);
+  const initialQuery = useMemo(() => ({
+    types
+  }), [types]);
   const {
     query: listQuery,
     onPageChange: onListPageChange,
     onQueryChange: onListQueryChange,
     onQueryReset: onListQueryReset
   } = useQuery(initialQuery, true);
-  let t53;
-  if ($[45] !== onListPageChange) {
-    t53 = (e, t54) => {
-      const pageNumber = t54 === undefined ? null : t54;
-      e.preventDefault();
-      e.stopPropagation();
-      onListPageChange(pageNumber);
-    };
-    $[45] = onListPageChange;
-    $[46] = t53;
-  } else {
-    t53 = $[46];
-  }
-  const finalOnPageChange = t53;
-  let t54;
-  if ($[47] !== onListQueryChange) {
-    t54 = newQuery => {
-      onListQueryChange(newQuery);
-    };
-    $[47] = onListQueryChange;
-    $[48] = t54;
-  } else {
-    t54 = $[48];
-  }
-  const finalOnQueryChange = t54;
+  const finalOnPageChange = useCallback((e, pageNumber = null) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onListPageChange(pageNumber);
+  }, [onListPageChange]);
+  const finalOnQueryChange = useCallback(newQuery => {
+    onListQueryChange(newQuery);
+  }, [onListQueryChange]);
   const containerRef = useRef(null);
+
+  // Keep this stable, uppy doesnt like changes
   const [finalUppy, setFinalUppy] = useState(null);
-  let t55;
-  let t56;
-  if ($[49] !== finalUppy || $[50] !== uppy) {
-    t55 = () => {
-      if (uppy !== null && finalUppy === null) {
-        setFinalUppy(uppy);
-      }
-    };
-    t56 = [uppy, finalUppy];
-    $[49] = finalUppy;
-    $[50] = uppy;
-    $[51] = t55;
-    $[52] = t56;
-  } else {
-    t55 = $[51];
-    t56 = $[52];
-  }
-  useEffect(t55, t56);
+  useEffect(() => {
+    if (uppy !== null && finalUppy === null) {
+      setFinalUppy(uppy);
+    }
+  }, [uppy, finalUppy]);
+
+  // Uppy state
   const [loading, setLoading] = useState(false);
-  let t57;
-  if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
-    t57 = () => {
-      setLoading(true);
-    };
-    $[53] = t57;
-  } else {
-    t57 = $[53];
-  }
-  const startLoading = t57;
-  let t58;
-  if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
-    t58 = () => {
-      setLoading(false);
-    };
-    $[54] = t58;
-  } else {
-    t58 = $[54];
-  }
-  const endLoading = t58;
-  let t59;
-  let t60;
-  if ($[55] !== uppy) {
-    t59 = () => {
+  const startLoading = useCallback(() => {
+    setLoading(true);
+  }, []);
+  const endLoading = useCallback(() => {
+    setLoading(false);
+  }, []);
+  useEffect(() => {
+    if (uppy !== null) {
+      uppy.on('upload', startLoading);
+      uppy.on('complete', endLoading);
+      uppy.on('upload-error', endLoading);
+      uppy.on('error', endLoading);
+      uppy.on('cancell-all', endLoading);
+    }
+    return () => {
       if (uppy !== null) {
-        uppy.on("upload", startLoading);
-        uppy.on("complete", endLoading);
-        uppy.on("upload-error", endLoading);
-        uppy.on("error", endLoading);
-        uppy.on("cancell-all", endLoading);
+        uppy.off('upload', startLoading);
+        uppy.off('complete', endLoading);
+        uppy.off('upload-error', endLoading);
+        uppy.off('error', endLoading);
+        uppy.off('cancell-all', endLoading);
       }
-      return () => {
-        if (uppy !== null) {
-          uppy.off("upload", startLoading);
-          uppy.off("complete", endLoading);
-          uppy.off("upload-error", endLoading);
-          uppy.off("error", endLoading);
-          uppy.off("cancell-all", endLoading);
-        }
-      };
     };
-    t60 = [uppy, startLoading, endLoading];
-    $[55] = uppy;
-    $[56] = t59;
-    $[57] = t60;
-  } else {
-    t59 = $[56];
-    t60 = $[57];
-  }
-  useEffect(t59, t60);
+  }, [uppy, startLoading, endLoading]);
   const finalLoading = loading || parentLoading;
-  const t61 = className !== null;
-  let t62;
-  if ($[58] !== className || $[59] !== t61) {
-    t62 = classNames([styles.container, {
-      [className]: t61
-    }]);
-    $[58] = className;
-    $[59] = t61;
-    $[60] = t62;
-  } else {
-    t62 = $[60];
-  }
-  let t63;
-  if ($[61] !== disabled || $[62] !== hasMedia || $[63] !== linkPath || $[64] !== namePath || $[65] !== onClickRemove || $[66] !== sizePath || $[67] !== thumbnailPath || $[68] !== values || $[69] !== withoutMedia) {
-    t63 = !withoutMedia && hasMedia ? /*#__PURE__*/jsx(MediaCards, {
+  return /*#__PURE__*/jsxs("div", {
+    className: className,
+    ref: containerRef,
+    children: [!withoutMedia && hasMedia ? /*#__PURE__*/jsx(MediaCards, {
       value: values,
       namePath: namePath,
       thumbnailPath: thumbnailPath,
@@ -533,59 +269,60 @@ function UploadField(t0) {
       linkPath: linkPath,
       disabled: disabled,
       onClickRemove: onClickRemove
-    }) : null;
-    $[61] = disabled;
-    $[62] = hasMedia;
-    $[63] = linkPath;
-    $[64] = namePath;
-    $[65] = onClickRemove;
-    $[66] = sizePath;
-    $[67] = thumbnailPath;
-    $[68] = values;
-    $[69] = withoutMedia;
-    $[70] = t63;
-  } else {
-    t63 = $[70];
-  }
-  let t64;
-  if ($[71] !== clearButtonLabel || $[72] !== hasMedia || $[73] !== onClickClear || $[74] !== withClearButton || $[75] !== withoutMedia) {
-    t64 = !withoutMedia && hasMedia && withClearButton ? /*#__PURE__*/jsx("div", {
-      className: "row mt-2",
-      children: /*#__PURE__*/jsx("div", {
-        className: "col-auto",
-        children: /*#__PURE__*/jsx(Button, {
-          type: "button",
-          theme: "primary",
-          onClick: onClickClear,
-          children: /*#__PURE__*/jsx(Label, {
-            children: clearButtonLabel
-          })
+    }) : null, /*#__PURE__*/jsxs("div", {
+      className: classNames('d-flex'),
+      children: [withClearButton && !withoutMedia && hasMedia ? /*#__PURE__*/jsx(Button, {
+        type: "button",
+        theme: "primary",
+        onClick: onClickClear,
+        children: /*#__PURE__*/jsx(Label, {
+          children: clearButtonLabel
         })
-      })
-    }) : null;
-    $[71] = clearButtonLabel;
-    $[72] = hasMedia;
-    $[73] = onClickClear;
-    $[74] = withClearButton;
-    $[75] = withoutMedia;
-    $[76] = t64;
-  } else {
-    t64 = $[76];
-  }
-  let t65;
-  if ($[77] !== closeAfterFinish || $[78] !== closeModal || $[79] !== finalUppy || $[80] !== hasMedia || $[81] !== height || $[82] !== modalOpened || $[83] !== showResourceModal || $[84] !== sources || $[85] !== uploadDisabled || $[86] !== width || $[87] !== withButton) {
-    t65 = finalUppy !== null ? /*#__PURE__*/jsxs(UppyContextProvider, {
+      }) : null, withButton && (withoutMedia || !hasMedia || allowMultipleUploads) ? /*#__PURE__*/jsx(Button, {
+        type: "button",
+        theme: "primary",
+        icon: finalLoading ? 'loading' : 'upload',
+        iconPosition: "right",
+        onClick: onClickAdd || openModal,
+        disabled: finalLoading || disabled,
+        outline: outline,
+        className: classNames([{
+          'me-2': withFind
+        }]),
+        children: /*#__PURE__*/jsx(Label, {
+          children: finalLoading ? /*#__PURE__*/jsx(FormattedMessage, {
+            id: "NozDYd"
+          }) : addButtonLabel
+        })
+      }) : null, withFind && (withoutMedia || !hasMedia || allowMultipleUploads) ? /*#__PURE__*/jsx(Button, {
+        type: "button",
+        theme: "primary",
+        icon: "search",
+        iconPosition: "right",
+        onClick: finalOnClickFind,
+        disabled: disabled,
+        outline: outline,
+        children: /*#__PURE__*/jsx(Label, {
+          children: findButtonLabel
+        })
+      }) : null]
+    }), finalUppy !== null ? /*#__PURE__*/jsxs(UppyContextProvider, {
       uppy: finalUppy,
       children: [!uploadDisabled && !hasMedia && !withButton && finalUppy !== null ? /*#__PURE__*/jsx("div", {
         className: styles.dashboard,
         children: /*#__PURE__*/jsx(Dashboard, {
-          uppy: finalUppy,
+          uppy: finalUppy
+          // {...(containerWidth !== null && height !== null
+          //     ? { width: containerWidth }
+          // : null)}
+          ,
           ...(width !== null ? {
             width
           } : null),
           ...(height !== null ? {
             height
           } : null),
+          disabled: disabled,
           plugins: sources,
           inline: true,
           showProgressDetails: true,
@@ -596,6 +333,7 @@ function UploadField(t0) {
         uppy: finalUppy,
         className: styles.dashboardModal,
         plugins: sources,
+        disabled: disabled,
         open: true,
         onRequestClose: closeModal,
         proudlyDisplayPoweredByUppy: false,
@@ -607,79 +345,7 @@ function UploadField(t0) {
         doneButtonHandler: closeModal,
         closeAfterFinish: closeAfterFinish
       }) : null]
-    }) : null;
-    $[77] = closeAfterFinish;
-    $[78] = closeModal;
-    $[79] = finalUppy;
-    $[80] = hasMedia;
-    $[81] = height;
-    $[82] = modalOpened;
-    $[83] = showResourceModal;
-    $[84] = sources;
-    $[85] = uploadDisabled;
-    $[86] = width;
-    $[87] = withButton;
-    $[88] = t65;
-  } else {
-    t65 = $[88];
-  }
-  let t66;
-  if ($[89] !== addButtonLabel || $[90] !== allowMultipleUploads || $[91] !== disabled || $[92] !== finalLoading || $[93] !== finalOnClickFind || $[94] !== findButtonLabel || $[95] !== hasMedia || $[96] !== onClickAdd || $[97] !== openModal || $[98] !== outline || $[99] !== withButton || $[100] !== withFind || $[101] !== withoutMedia) {
-    t66 = withoutMedia || (!hasMedia || allowMultipleUploads) && (withButton || withFind) ? /*#__PURE__*/jsxs("div", {
-      className: "row",
-      children: [withButton ? /*#__PURE__*/jsx("div", {
-        className: "col-auto mb-2 pe-0",
-        children: /*#__PURE__*/jsx(Button, {
-          id: "trigger-uppy",
-          type: "button",
-          theme: "primary",
-          icon: finalLoading ? "loading" : "upload",
-          iconPosition: "right",
-          onClick: onClickAdd || openModal,
-          disabled: finalLoading || disabled,
-          outline: outline,
-          children: /*#__PURE__*/jsx(Label, {
-            children: finalLoading ? /*#__PURE__*/jsx(FormattedMessage, {
-              id: "NozDYd"
-            }) : addButtonLabel
-          })
-        })
-      }) : null, withFind ? /*#__PURE__*/jsx("div", {
-        className: "col-auto mb-2",
-        children: /*#__PURE__*/jsx(Button, {
-          type: "button",
-          theme: "primary",
-          icon: "search",
-          iconPosition: "right",
-          onClick: finalOnClickFind,
-          disabled: disabled,
-          outline: outline,
-          children: /*#__PURE__*/jsx(Label, {
-            children: findButtonLabel
-          })
-        })
-      }) : null]
-    }) : null;
-    $[89] = addButtonLabel;
-    $[90] = allowMultipleUploads;
-    $[91] = disabled;
-    $[92] = finalLoading;
-    $[93] = finalOnClickFind;
-    $[94] = findButtonLabel;
-    $[95] = hasMedia;
-    $[96] = onClickAdd;
-    $[97] = openModal;
-    $[98] = outline;
-    $[99] = withButton;
-    $[100] = withFind;
-    $[101] = withoutMedia;
-    $[102] = t66;
-  } else {
-    t66 = $[102];
-  }
-  let t67;
-  if ($[103] !== allowMultipleUploads || $[104] !== confirmResourceModal || $[105] !== disabled || $[106] !== finalOnPageChange || $[107] !== finalOnQueryChange || $[108] !== listQuery || $[109] !== modalItems || $[110] !== name || $[111] !== onListQueryReset || $[112] !== onSelectionChange || $[113] !== resource || $[114] !== showResourceModal) {
-    t67 = showResourceModal ? /*#__PURE__*/jsx(ModalResourceItems, {
+    }) : null, showResourceModal ? /*#__PURE__*/jsx(ModalResourceItems, {
       id: `upload-${name}`,
       resource: resource,
       query: listQuery,
@@ -721,53 +387,8 @@ function UploadField(t0) {
           })]
         })]
       })
-    }) : null;
-    $[103] = allowMultipleUploads;
-    $[104] = confirmResourceModal;
-    $[105] = disabled;
-    $[106] = finalOnPageChange;
-    $[107] = finalOnQueryChange;
-    $[108] = listQuery;
-    $[109] = modalItems;
-    $[110] = name;
-    $[111] = onListQueryReset;
-    $[112] = onSelectionChange;
-    $[113] = resource;
-    $[114] = showResourceModal;
-    $[115] = t67;
-  } else {
-    t67 = $[115];
-  }
-  let t68;
-  if ($[116] !== t62 || $[117] !== t63 || $[118] !== t64 || $[119] !== t65 || $[120] !== t66 || $[121] !== t67) {
-    t68 = /*#__PURE__*/jsxs("div", {
-      className: t62,
-      ref: containerRef,
-      children: [t63, t64, t65, t66, t67]
-    });
-    $[116] = t62;
-    $[117] = t63;
-    $[118] = t64;
-    $[119] = t65;
-    $[120] = t66;
-    $[121] = t67;
-    $[122] = t68;
-  } else {
-    t68 = $[122];
-  }
-  return t68;
-}
-function _temp2(type) {
-  return `${type}/*`;
-}
-function _temp(newValue) {
-  if (isObject(newValue) && isObject(newValue.response) && newValue.response.status === 200 && newValue.response.body !== null) {
-    return {
-      ...newValue,
-      ...(newValue.response.body || null)
-    };
-  }
-  return newValue;
+    }) : null]
+  });
 }
 
 var definition = [{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "4.0.50",
+    "version": "4.0.56",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -36,6 +36,9 @@
     "type": "module",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
+    "sideEffects": [
+        "**/*.css"
+    ],
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
@@ -67,13 +70,13 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@panneau/core": "^4.0.50",
-        "@panneau/element-button": "^4.0.50",
-        "@panneau/element-label": "^4.0.50",
-        "@panneau/element-media-card": "^4.0.50",
-        "@panneau/modal-resource-items": "^4.0.50",
-        "@panneau/themes": "^4.0.50",
-        "@panneau/uppy": "^4.0.50",
+        "@panneau/core": "^4.0.56",
+        "@panneau/element-button": "^4.0.56",
+        "@panneau/element-label": "^4.0.56",
+        "@panneau/element-media-card": "^4.0.56",
+        "@panneau/modal-resource-items": "^4.0.56",
+        "@panneau/themes": "^4.0.56",
+        "@panneau/uppy": "^4.0.56",
         "@uppy/core": "^5.1.1",
         "@uppy/dashboard": "^5.0.4",
         "@uppy/react": "^5.1.1",
@@ -86,5 +89,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c5d4004686dae5529035f8eac83571739e24340d"
+    "gitHead": "9c3ba1bdd04699e0150f84a35f2bdbdec073bd59"
 }