@panneau/field-upload 4.0.62 → 4.0.64

package/dist/index.d.ts

@@ -1,106 +1,56 @@
 import * as react from 'react';
-import { MediaType, Label } from '@panneau/core';
+import { Media, MediaType, Label } from '@panneau/core';
+import { UseUppyOptions } from '@panneau/uppy';
 
 type MediaSource = 'webcam' | 'facebook' | 'instagram' | 'dropbox' | 'google-drive';
-interface Media$1 {
-    filename?: string;
-    size?: number;
-    url?: string;
-    id?: string | number;
-    [key: string]: unknown;
-}
-interface UppyProps {
-    withUUID?: boolean;
-    [key: string]: unknown;
-}
 interface UploadFieldProps {
-    resource?: string;
-    value?: Media$1 | Media$1[] | null;
+    value?: Media | Media[] | null;
     name?: string | null;
     types?: MediaType[] | null;
     fileTypes?: string[] | null;
     sources?: MediaSource[];
     withButton?: boolean;
-    withFind?: boolean;
     withClearButton?: boolean;
     withoutMedia?: boolean;
     addButtonLabel?: Label | null;
-    findButtonLabel?: Label | null;
     clearButtonLabel?: Label | null;
-    allowMultipleUploads?: boolean;
+    multiple?: boolean;
     closeAfterFinish?: boolean;
     maxNumberOfFiles?: number;
     namePath?: string;
     thumbnailPath?: string;
     sizePath?: string;
     linkPath?: string | null;
-    uppyProps?: UppyProps | null;
+    uppyConfig?: UseUppyOptions | null;
     width?: number | null;
     height?: number | null;
     disabled?: boolean;
     uploadDisabled?: boolean;
     outline?: boolean;
     loading?: boolean;
-    onChange?: ((value: Media$1 | Media$1[] | null) => void) | null;
+    onChange?: ((value: Media | Media[] | null) => void) | null;
     onClear?: (() => void) | null;
     onClickAdd?: (() => void) | null;
-    onClickFind?: (() => void) | null;
-    onClose?: ((value: Media$1 | Media$1[] | null) => void) | null;
+    onClose?: ((value: Media | Media[] | 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.Element;
+declare function UploadField({ value, types, fileTypes, sources, withButton, withClearButton, withoutMedia, addButtonLabel: initialAddButtonLabel, clearButtonLabel: initialCleanButtonLabel, multiple, closeAfterFinish, maxNumberOfFiles, namePath, thumbnailPath, sizePath, linkPath, uppyConfig, width, height, disabled, uploadDisabled, outline, loading: parentLoading, onChange, onClear, onClickAdd, className, }: UploadFieldProps): react.JSX.Element;
 
 declare const _default: {
     id: string;
     component: string;
 }[];
 
-interface AudioFieldProps {
-    [key: string]: unknown;
-}
-declare function AudioField(props: AudioFieldProps): react.JSX.Element;
-
-interface ImageFieldProps {
-    [key: string]: unknown;
-}
-declare function ImageField(props: ImageFieldProps): react.JSX.Element;
+declare function AudioUploadField(props: UploadFieldProps): react.JSX.Element;
 
-interface ImagesFieldProps {
-    [key: string]: unknown;
-}
-declare function ImagesField(props: ImagesFieldProps): react.JSX.Element;
+declare function ImageUploadField(props: UploadFieldProps): react.JSX.Element;
 
-interface VideoFieldProps {
-    [key: string]: unknown;
-}
-declare function VideoField(props: VideoFieldProps): react.JSX.Element;
+declare function ImagesUploadField(props: UploadFieldProps): react.JSX.Element;
 
-interface DocumentFieldProps {
-    [key: string]: unknown;
-}
-declare function DocumentField(props: DocumentFieldProps): react.JSX.Element;
+declare function VideoUploadField(props: UploadFieldProps): react.JSX.Element;
 
-interface FontFieldProps {
-    [key: string]: unknown;
-}
-declare function FontField(props: FontFieldProps): react.JSX.Element;
+declare function DocumentUploadField(props: UploadFieldProps): react.JSX.Element;
 
-interface Media {
-    id?: string | number;
-    type?: string;
-    published?: boolean;
-    featured?: boolean;
-    created_at?: string;
-    updated_at?: string;
-    [key: string]: unknown;
-}
-interface UpdateFileFieldProps {
-    value?: Media | null;
-    onChange?: ((value: Media | null) => void) | null;
-    types?: string[] | null;
-    fileTypes?: string[] | null;
-    [key: string]: unknown;
-}
-declare function UpdateFileField({ value, onChange, ...props }: UpdateFileFieldProps): react.JSX.Element;
+declare function FontUploadField(props: UploadFieldProps): react.JSX.Element;
 
-export { AudioField, DocumentField, FontField, ImageField, ImagesField, UpdateFileField, VideoField, UploadField as default, _default as definition };
+export { AudioUploadField as AudioField, DocumentUploadField as DocumentField, FontUploadField as FontField, ImageUploadField as ImageField, ImagesUploadField as ImagesField, VideoUploadField as VideoField, UploadField as default, _default as definition };

package/dist/index.js

@@ -1,321 +1,425 @@
+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-es/isArray';
 import isObject from 'lodash-es/isObject';
-import { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useQuery } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
 import Label from '@panneau/element-label';
-import MediaCard, { MediaCards } from '@panneau/element-media-card';
-import ModalResourceItems from '@panneau/modal-resource-items';
+import { MediaCards } from '@panneau/element-media-card';
 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';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 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({
-  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;
+function UploadField(t0) {
+  const $ = c(86);
+  const {
+    value: t1,
+    types: t2,
+    fileTypes: t3,
+    sources: t4,
+    withButton: t5,
+    withClearButton: t6,
+    withoutMedia: t7,
+    addButtonLabel: t8,
+    clearButtonLabel: t9,
+    multiple: t10,
+    closeAfterFinish: t11,
+    maxNumberOfFiles: t12,
+    namePath: t13,
+    thumbnailPath: t14,
+    sizePath: t15,
+    linkPath: t16,
+    uppyConfig: t17,
+    width: t18,
+    height: t19,
+    disabled: t20,
+    uploadDisabled: t21,
+    outline: t22,
+    loading: t23,
+    onChange: t24,
+    onClear: t25,
+    onClickAdd: t26,
+    className: t27
+  } = t0;
+  const value = t1 === undefined ? null : t1;
+  const types = t2 === undefined ? DEFAULT_TYPES : t2;
+  const fileTypes = t3 === undefined ? null : t3;
+  const sources = t4 === undefined ? DEFAULT_SOURCES : t4;
+  const withButton = t5 === undefined ? false : t5;
+  const withClearButton = t6 === undefined ? false : t6;
+  const withoutMedia = t7 === undefined ? false : t7;
+  const initialAddButtonLabel = t8 === undefined ? null : t8;
+  const initialCleanButtonLabel = t9 === undefined ? null : t9;
+  const multiple = t10 === undefined ? false : t10;
+  const closeAfterFinish = t11 === undefined ? true : t11;
+  const maxNumberOfFiles = t12 === undefined ? 1 : t12;
+  const namePath = t13 === undefined ? "name" : t13;
+  const thumbnailPath = t14 === undefined ? "thumbnail_url" : t14;
+  const sizePath = t15 === undefined ? "metadata.size" : t15;
+  const linkPath = t16 === undefined ? null : t16;
+  const uppyConfig = t17 === undefined ? null : t17;
+  const width = t18 === undefined ? null : t18;
+  const height = t19 === undefined ? 300 : t19;
+  const disabled = t20 === undefined ? false : t20;
+  const uploadDisabled = t21 === undefined ? false : t21;
+  const outline = t22 === undefined ? true : t22;
+  const parentLoading = t23 === undefined ? false : t23;
+  const onChange = t24 === undefined ? null : t24;
+  const onClear = t25 === undefined ? null : t25;
+  const onClickAdd = t26 === undefined ? null : t26;
+  const className = t27 === undefined ? null : t27;
+  let t28;
+  if ($[0] !== initialAddButtonLabel) {
+    t28 = initialAddButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
+      id: "BeKVq6"
+    });
+    $[0] = initialAddButtonLabel;
+    $[1] = t28;
+  } else {
+    t28 = $[1];
+  }
+  const addButtonLabel = t28;
+  let t29;
+  if ($[2] !== initialCleanButtonLabel) {
+    t29 = initialCleanButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
+      id: "odaCUe"
+    });
+    $[2] = initialCleanButtonLabel;
+    $[3] = t29;
+  } else {
+    t29 = $[3];
+  }
+  const clearButtonLabel = t29;
+  const mergeData = _temp;
+  let t30;
+  if ($[4] !== multiple || $[5] !== onChange) {
+    t30 = response => {
+      let newValue_0 = null;
+      if (isArray(response)) {
+        if (multiple) {
+          newValue_0 = response;
+        } else {
+          const [first] = response;
+          newValue_0 = first;
+        }
       } else {
-        const [first] = response;
-        newValue_0 = first;
+        if (response && response.successful) {
+          newValue_0 = response.successful.length > 0 ? response.successful[0].response.body : null;
+        }
       }
-    } 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));
-    } else if (newValue_0 !== null) {
-      newValue_0 = mergeData(newValue_0);
-    }
-    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 (isArray(newValue_0)) {
+        newValue_0 = newValue_0.map(val => mergeData(val));
+      } else {
+        if (newValue_0 !== null) {
+          newValue_0 = mergeData(newValue_0);
+        }
+      }
+      if (onChange !== null) {
+        onChange(newValue_0);
+      }
+    };
+    $[4] = multiple;
+    $[5] = onChange;
+    $[6] = t30;
+  } else {
+    t30 = $[6];
+  }
+  const onComplete = t30;
+  let t31;
+  if ($[7] !== types) {
+    t31 = types !== null ? types.join(".") : ["audio", "image", "video"].join(".");
+    $[7] = types;
+    $[8] = t31;
+  } else {
+    t31 = $[8];
+  }
+  const typesString = t31;
+  let t32;
+  bb0: {
     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);
-  const openModal = useCallback(() => {
-    setModalOpened(!modalOpened);
-  }, [modalOpened, setModalOpened]);
-  const closeModal = useCallback(() => {
-    setModalOpened(false);
-    if (uppy !== null) {
-      uppy.cancelAll({
-        reason: 'user'
-      });
-    }
-  }, [uppy, setModalOpened]);
-  const onClickClear = useCallback(() => {
-    if (onClear !== null) {
-      onClear();
-    }
-    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;
+      t32 = fileTypes;
+      break bb0;
     }
-    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;
-  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();
+    let t33;
+    if ($[9] !== typesString) {
+      t33 = typesString.split(".").map(_temp2);
+      $[9] = typesString;
+      $[10] = t33;
     } else {
-      openResourceModal();
+      t33 = $[10];
     }
-  }, [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]);
-          }
+    t32 = t33;
+  }
+  const allowedFileTypes = t32;
+  const t33 = multiple && maxNumberOfFiles === 1 ? 50 : maxNumberOfFiles;
+  let t34;
+  if ($[11] !== allowedFileTypes || $[12] !== multiple || $[13] !== onComplete || $[14] !== sources || $[15] !== t33 || $[16] !== uppyConfig) {
+    t34 = {
+      maxNumberOfFiles: t33,
+      allowedFileTypes,
+      sources,
+      ...uppyConfig,
+      allowMultipleUploads: multiple,
+      autoProceed: true,
+      onComplete
+    };
+    $[11] = allowedFileTypes;
+    $[12] = multiple;
+    $[13] = onComplete;
+    $[14] = sources;
+    $[15] = t33;
+    $[16] = uppyConfig;
+    $[17] = t34;
+  } else {
+    t34 = $[17];
+  }
+  const uppyFinalProps = t34;
+  const uppy = useUppy(uppyFinalProps);
+  const [modalOpened, setModalOpened] = useState(false);
+  let t35;
+  if ($[18] !== modalOpened) {
+    t35 = () => {
+      setModalOpened(!modalOpened);
+    };
+    $[18] = modalOpened;
+    $[19] = t35;
+  } else {
+    t35 = $[19];
+  }
+  const openModal = t35;
+  let t36;
+  if ($[20] !== uppy) {
+    t36 = () => {
+      setModalOpened(false);
+      if (uppy !== null) {
+        uppy.cancelAll();
+      }
+    };
+    $[20] = uppy;
+    $[21] = t36;
+  } else {
+    t36 = $[21];
+  }
+  const closeModal = t36;
+  let t37;
+  if ($[22] !== onChange || $[23] !== onClear || $[24] !== uppy) {
+    t37 = () => {
+      if (onClear !== null) {
+        onClear();
+      }
+      if (onChange !== null) {
+        onChange(null);
+      }
+      if (uppy !== null) {
+        uppy.cancelAll();
+      }
+    };
+    $[22] = onChange;
+    $[23] = onClear;
+    $[24] = uppy;
+    $[25] = t37;
+  } else {
+    t37 = $[25];
+  }
+  const onClickClear = t37;
+  let t38;
+  if ($[26] !== onChange || $[27] !== value) {
+    t38 = idx => {
+      if (onChange !== null && isArray(value) && value.length > 1) {
+        onChange(value.filter((v, i) => i !== idx));
+      } else {
+        if (onChange !== null) {
+          onChange(null);
         }
-      } else if (newValue_1 !== null && isArray(newValue_1)) {
-        setModalItems(newValue_1);
       }
-    } 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);
-  const finalOnPageChange = useCallback((e, pageNumber = null) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onListPageChange(pageNumber);
-  }, [onListPageChange]);
-  const finalOnQueryChange = useCallback(newQuery => {
-    onListQueryChange(newQuery);
-  }, [onListQueryChange]);
+    };
+    $[26] = onChange;
+    $[27] = value;
+    $[28] = t38;
+  } else {
+    t38 = $[28];
+  }
+  const onClickRemove = t38;
+  const hasMedia = isArray(value) ? value.length > 0 : value !== null;
   const containerRef = useRef(null);
-
-  // Keep this stable, uppy doesnt like changes
   const [finalUppy, setFinalUppy] = useState(null);
-  useEffect(() => {
-    if (uppy !== null && finalUppy === null) {
-      setFinalUppy(uppy);
-    }
-  }, [uppy, finalUppy]);
-
-  // Uppy state
+  let t39;
+  let t40;
+  if ($[29] !== finalUppy || $[30] !== uppy) {
+    t39 = () => {
+      if (uppy !== null && finalUppy === null) {
+        setFinalUppy(uppy);
+      }
+    };
+    t40 = [uppy, finalUppy];
+    $[29] = finalUppy;
+    $[30] = uppy;
+    $[31] = t39;
+    $[32] = t40;
+  } else {
+    t39 = $[31];
+    t40 = $[32];
+  }
+  useEffect(t39, t40);
   const [loading, setLoading] = useState(false);
-  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 () => {
+  let t41;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t41 = () => {
+      setLoading(true);
+    };
+    $[33] = t41;
+  } else {
+    t41 = $[33];
+  }
+  const startLoading = t41;
+  let t42;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t42 = () => {
+      setLoading(false);
+    };
+    $[34] = t42;
+  } else {
+    t42 = $[34];
+  }
+  const endLoading = t42;
+  let t43;
+  let t44;
+  if ($[35] !== uppy) {
+    t43 = () => {
       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);
+        uppy.on("upload", startLoading);
+        uppy.on("complete", endLoading);
+        uppy.on("upload-error", endLoading);
+        uppy.on("error", endLoading);
       }
+      return () => {
+        if (uppy !== null) {
+          uppy.off("upload", startLoading);
+          uppy.off("complete", endLoading);
+          uppy.off("upload-error", endLoading);
+          uppy.off("error", endLoading);
+        }
+      };
     };
-  }, [uppy, startLoading, endLoading]);
+    t44 = [uppy, startLoading, endLoading];
+    $[35] = uppy;
+    $[36] = t43;
+    $[37] = t44;
+  } else {
+    t43 = $[36];
+    t44 = $[37];
+  }
+  useEffect(t43, t44);
   const finalLoading = loading || parentLoading;
-  return /*#__PURE__*/jsxs("div", {
-    className: className,
-    ref: containerRef,
-    children: [!withoutMedia && hasMedia ? /*#__PURE__*/jsx(MediaCards, {
-      value: values,
+  let t45;
+  if ($[38] !== disabled || $[39] !== hasMedia || $[40] !== linkPath || $[41] !== namePath || $[42] !== onClickRemove || $[43] !== sizePath || $[44] !== thumbnailPath || $[45] !== value || $[46] !== withoutMedia) {
+    t45 = !withoutMedia && hasMedia ? /*#__PURE__*/jsx(MediaCards, {
+      value: value,
       namePath: namePath,
       thumbnailPath: thumbnailPath,
       sizePath: sizePath,
       linkPath: linkPath,
       disabled: disabled,
       onClickRemove: onClickRemove
-    }) : 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, 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, {
+    }) : null;
+    $[38] = disabled;
+    $[39] = hasMedia;
+    $[40] = linkPath;
+    $[41] = namePath;
+    $[42] = onClickRemove;
+    $[43] = sizePath;
+    $[44] = thumbnailPath;
+    $[45] = value;
+    $[46] = withoutMedia;
+    $[47] = t45;
+  } else {
+    t45 = $[47];
+  }
+  let t46;
+  if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+    t46 = classNames("d-flex");
+    $[48] = t46;
+  } else {
+    t46 = $[48];
+  }
+  let t47;
+  if ($[49] !== clearButtonLabel || $[50] !== hasMedia || $[51] !== onClickClear || $[52] !== withClearButton || $[53] !== withoutMedia) {
+    t47 = withClearButton && !withoutMedia && hasMedia ? /*#__PURE__*/jsx(Button, {
+      type: "button",
+      theme: "primary",
+      onClick: onClickClear,
+      children: /*#__PURE__*/jsx(Label, {
+        children: clearButtonLabel
+      })
+    }) : null;
+    $[49] = clearButtonLabel;
+    $[50] = hasMedia;
+    $[51] = onClickClear;
+    $[52] = withClearButton;
+    $[53] = withoutMedia;
+    $[54] = t47;
+  } else {
+    t47 = $[54];
+  }
+  let t48;
+  if ($[55] !== addButtonLabel || $[56] !== disabled || $[57] !== finalLoading || $[58] !== hasMedia || $[59] !== multiple || $[60] !== onClickAdd || $[61] !== openModal || $[62] !== outline || $[63] !== withButton || $[64] !== withoutMedia) {
+    t48 = withButton && (withoutMedia || !hasMedia || multiple) ? /*#__PURE__*/jsx(Button, {
+      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;
+    $[55] = addButtonLabel;
+    $[56] = disabled;
+    $[57] = finalLoading;
+    $[58] = hasMedia;
+    $[59] = multiple;
+    $[60] = onClickAdd;
+    $[61] = openModal;
+    $[62] = outline;
+    $[63] = withButton;
+    $[64] = withoutMedia;
+    $[65] = t48;
+  } else {
+    t48 = $[65];
+  }
+  let t49;
+  if ($[66] !== t47 || $[67] !== t48) {
+    t49 = /*#__PURE__*/jsxs("div", {
+      className: t46,
+      children: [t47, t48]
+    });
+    $[66] = t47;
+    $[67] = t48;
+    $[68] = t49;
+  } else {
+    t49 = $[68];
+  }
+  let t50;
+  if ($[69] !== closeAfterFinish || $[70] !== closeModal || $[71] !== disabled || $[72] !== finalUppy || $[73] !== hasMedia || $[74] !== height || $[75] !== modalOpened || $[76] !== sources || $[77] !== uploadDisabled || $[78] !== width || $[79] !== withButton) {
+    t50 = 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
-          // {...(containerWidth !== null && height !== null
-          //     ? { width: containerWidth }
-          // : null)}
-          ,
+          uppy: finalUppy,
           ...(width !== null ? {
             width
           } : null),
@@ -324,12 +428,9 @@ function UploadField({
           } : null),
           disabled: disabled,
           plugins: sources,
-          inline: true,
-          showProgressDetails: true,
-          areInsidesReadyToBeVisible: true,
           proudlyDisplayPoweredByUppy: false
         })
-      }) : null, !showResourceModal && !uploadDisabled && withButton && finalUppy !== null && modalOpened ? /*#__PURE__*/jsx(DashboardModal, {
+      }) : null, !uploadDisabled && withButton && finalUppy !== null && modalOpened ? /*#__PURE__*/jsx(DashboardModal, {
         uppy: finalUppy,
         className: styles.dashboardModal,
         plugins: sources,
@@ -338,80 +439,79 @@ function UploadField({
         onRequestClose: closeModal,
         proudlyDisplayPoweredByUppy: false,
         closeModalOnClickOutside: true,
-        areInsidesReadyToBeVisible: true,
-        isDashboardVisible: true,
-        showProgressDetails: true,
-        showAddFilesPanel: true,
         doneButtonHandler: closeModal,
         closeAfterFinish: closeAfterFinish
       }) : null]
-    }) : null, showResourceModal ? /*#__PURE__*/jsx(ModalResourceItems, {
-      id: `upload-${name}`,
-      resource: resource,
-      query: listQuery,
-      onPageChange: finalOnPageChange,
-      onQueryChange: finalOnQueryChange,
-      onQueryReset: onListQueryReset,
-      baseUrl: null,
-      showActions: false,
-      selectable: true,
-      selectedItems: modalItems,
-      onSelectionChange: onSelectionChange,
-      multipleSelection: allowMultipleUploads,
-      onClosed: closeResourceModal,
-      children: /*#__PURE__*/jsxs("div", {
-        className: "d-flex mt-4 justify-content-between",
-        children: [modalItems !== null && modalItems.length > 0 ? /*#__PURE__*/jsxs("span", {
-          className: "me-2",
-          children: [modalItems.length, " items"]
-        }) : /*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsxs("div", {
-          className: "d-flex",
-          children: [/*#__PURE__*/jsx(Button, {
-            type: "button",
-            theme: "secondary",
-            onClick: closeResourceModal,
-            disabled: disabled,
-            className: "d-block me-2",
-            children: /*#__PURE__*/jsx(FormattedMessage, {
-              id: "PyxZY2"
-            })
-          }), /*#__PURE__*/jsx(Button, {
-            type: "button",
-            theme: "primary",
-            onClick: confirmResourceModal,
-            disabled: disabled || modalItems !== null && modalItems.length === 0,
-            className: "d-block",
-            children: /*#__PURE__*/jsx(FormattedMessage, {
-              id: "rvOVCV"
-            })
-          })]
-        })]
-      })
-    }) : null]
-  });
+    }) : null;
+    $[69] = closeAfterFinish;
+    $[70] = closeModal;
+    $[71] = disabled;
+    $[72] = finalUppy;
+    $[73] = hasMedia;
+    $[74] = height;
+    $[75] = modalOpened;
+    $[76] = sources;
+    $[77] = uploadDisabled;
+    $[78] = width;
+    $[79] = withButton;
+    $[80] = t50;
+  } else {
+    t50 = $[80];
+  }
+  let t51;
+  if ($[81] !== className || $[82] !== t45 || $[83] !== t49 || $[84] !== t50) {
+    t51 = /*#__PURE__*/jsxs("div", {
+      className: className,
+      ref: containerRef,
+      children: [t45, t49, t50]
+    });
+    $[81] = className;
+    $[82] = t45;
+    $[83] = t49;
+    $[84] = t50;
+    $[85] = t51;
+  } else {
+    t51 = $[85];
+  }
+  return t51;
+}
+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;
 }
 
 var definition = [{
   id: 'upload',
   component: 'Upload'
 }, {
-  id: 'audio',
-  component: 'Audio'
+  id: 'audio-upload',
+  component: 'AudioUpload'
+}, {
+  id: 'image-upload',
+  component: 'ImageUpload'
 }, {
-  id: 'image',
-  component: 'Image'
+  id: 'images-upload',
+  component: 'ImagesUpload'
 }, {
-  id: 'video',
-  component: 'Video'
+  id: 'video-upload',
+  component: 'VideoUpload'
 }, {
-  id: 'document',
-  component: 'Document'
+  id: 'document-upload',
+  component: 'DocumentUpload'
 }, {
-  id: 'font',
-  component: 'Font'
+  id: 'font-upload',
+  component: 'FontUpload'
 }];
 
-function AudioField(props) {
+function AudioUploadField(props) {
   const $ = c(3);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -420,12 +520,11 @@ function AudioField(props) {
   } else {
     t0 = $[0];
   }
-  const types = t0;
   let t1;
   if ($[1] !== props) {
     t1 = /*#__PURE__*/jsx(UploadField, {
       ...props,
-      types: types
+      types: t0
     });
     $[1] = props;
     $[2] = t1;
@@ -435,7 +534,7 @@ function AudioField(props) {
   return t1;
 }
 
-function ImageField(props) {
+function ImageUploadField(props) {
   const $ = c(3);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -444,12 +543,11 @@ function ImageField(props) {
   } else {
     t0 = $[0];
   }
-  const types = t0;
   let t1;
   if ($[1] !== props) {
     t1 = /*#__PURE__*/jsx(UploadField, {
       ...props,
-      types: types
+      types: t0
     });
     $[1] = props;
     $[2] = t1;
@@ -459,7 +557,7 @@ function ImageField(props) {
   return t1;
 }
 
-function ImagesField(props) {
+function ImagesUploadField(props) {
   const $ = c(3);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -468,13 +566,12 @@ function ImagesField(props) {
   } else {
     t0 = $[0];
   }
-  const types = t0;
   let t1;
   if ($[1] !== props) {
     t1 = /*#__PURE__*/jsx(UploadField, {
       ...props,
-      types: types,
-      allowMultipleUploads: true
+      types: t0,
+      multiple: true
     });
     $[1] = props;
     $[2] = t1;
@@ -484,7 +581,7 @@ function ImagesField(props) {
   return t1;
 }
 
-function VideoField(props) {
+function VideoUploadField(props) {
   const $ = c(3);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -493,12 +590,11 @@ function VideoField(props) {
   } else {
     t0 = $[0];
   }
-  const types = t0;
   let t1;
   if ($[1] !== props) {
     t1 = /*#__PURE__*/jsx(UploadField, {
       ...props,
-      types: types
+      types: t0
     });
     $[1] = props;
     $[2] = t1;
@@ -508,7 +604,7 @@ function VideoField(props) {
   return t1;
 }
 
-function DocumentField(props) {
+function DocumentUploadField(props) {
   const $ = c(4);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -517,7 +613,6 @@ function DocumentField(props) {
   } else {
     t0 = $[0];
   }
-  const fileTypes = t0;
   let t1;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = ["document"];
@@ -525,13 +620,12 @@ function DocumentField(props) {
   } else {
     t1 = $[1];
   }
-  const types = t1;
   let t2;
   if ($[2] !== props) {
     t2 = /*#__PURE__*/jsx(UploadField, {
+      fileTypes: t0,
       ...props,
-      fileTypes: fileTypes,
-      types: types
+      types: t1
     });
     $[2] = props;
     $[3] = t2;
@@ -541,7 +635,7 @@ function DocumentField(props) {
   return t2;
 }
 
-function FontField(props) {
+function FontUploadField(props) {
   const $ = c(3);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -550,12 +644,11 @@ function FontField(props) {
   } else {
     t0 = $[0];
   }
-  const fileTypes = t0;
   let t1;
   if ($[1] !== props) {
     t1 = /*#__PURE__*/jsx(UploadField, {
-      ...props,
-      fileTypes: fileTypes
+      fileTypes: t0,
+      ...props
     });
     $[1] = props;
     $[2] = t1;
@@ -565,189 +658,4 @@ function FontField(props) {
   return t1;
 }
 
-function UpdateFileField(t0) {
-  const $ = c(24);
-  let props;
-  let t1;
-  let t2;
-  if ($[0] !== t0) {
-    ({
-      value: t1,
-      onChange: t2,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = props;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    props = $[1];
-    t1 = $[2];
-    t2 = $[3];
-  }
-  const value = t1 === undefined ? null : t1;
-  const [newValue, setNewValue] = useState(null);
-  const [visibleFile, setVisibleFile] = useState(null);
-  let t3;
-  if ($[4] !== value) {
-    t3 = value || {};
-    $[4] = value;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  const {
-    id: previousId,
-    type: t4
-  } = t3;
-  const type = t4 === undefined ? null : t4;
-  let t5;
-  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = t6 => {
-      const uploadedFile = t6 === undefined ? null : t6;
-      if (uploadedFile !== null) {
-        setVisibleFile(uploadedFile);
-      }
-      setNewValue(uploadedFile);
-    };
-    $[6] = t5;
-  } else {
-    t5 = $[6];
-  }
-  const onUploadChange = t5;
-  let t6;
-  if ($[7] !== previousId) {
-    t6 = {
-      meta: {
-        previousId
-      }
-    };
-    $[7] = previousId;
-    $[8] = t6;
-  } else {
-    t6 = $[8];
-  }
-  const uppyProps = t6;
-  let t7;
-  bb0: {
-    if (type === "image") {
-      let t8;
-      if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-        t8 = {
-          types: ["image"]
-        };
-        $[9] = t8;
-      } else {
-        t8 = $[9];
-      }
-      t7 = t8;
-      break bb0;
-    }
-    if (type === "audio") {
-      let t8;
-      if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-        t8 = {
-          types: ["audio"]
-        };
-        $[10] = t8;
-      } else {
-        t8 = $[10];
-      }
-      t7 = t8;
-      break bb0;
-    }
-    if (type === "video") {
-      let t8;
-      if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-        t8 = {
-          types: ["video"]
-        };
-        $[11] = t8;
-      } else {
-        t8 = $[11];
-      }
-      t7 = t8;
-      break bb0;
-    }
-    if (type === "document") {
-      let t8;
-      if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-        t8 = {
-          types: [],
-          fileTypes: [".pdf"]
-        };
-        $[12] = t8;
-      } else {
-        t8 = $[12];
-      }
-      t7 = t8;
-      break bb0;
-    }
-    t7 = null;
-  }
-  const uploadProps = t7;
-  const t8 = visibleFile || value;
-  let t9;
-  if ($[13] !== t8) {
-    t9 = /*#__PURE__*/jsx("div", {
-      className: "mb-3",
-      children: /*#__PURE__*/jsx(MediaCard, {
-        value: t8,
-        withoutDescription: true
-      })
-    });
-    $[13] = t8;
-    $[14] = t9;
-  } else {
-    t9 = $[14];
-  }
-  let t10;
-  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = /*#__PURE__*/jsx(FormattedMessage, {
-      id: "daHjZg"
-    });
-    $[15] = t10;
-  } else {
-    t10 = $[15];
-  }
-  let t11;
-  if ($[16] !== newValue || $[17] !== props || $[18] !== uploadProps || $[19] !== uppyProps) {
-    t11 = /*#__PURE__*/jsx("div", {
-      className: "mb-3",
-      children: /*#__PURE__*/jsx(UploadField, {
-        ...props,
-        ...uploadProps,
-        addButtonLabel: t10,
-        allowMultipleUploads: false,
-        linkPath: "panneauUrl",
-        onChange: onUploadChange,
-        onClose: onUploadChange,
-        maxNumberOfFiles: 1,
-        value: newValue,
-        withButton: true,
-        uppyProps: uppyProps
-      })
-    });
-    $[16] = newValue;
-    $[17] = props;
-    $[18] = uploadProps;
-    $[19] = uppyProps;
-    $[20] = t11;
-  } else {
-    t11 = $[20];
-  }
-  let t12;
-  if ($[21] !== t11 || $[22] !== t9) {
-    t12 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t9, t11]
-    });
-    $[21] = t11;
-    $[22] = t9;
-    $[23] = t12;
-  } else {
-    t12 = $[23];
-  }
-  return t12;
-}
-
-export { AudioField, DocumentField, FontField, ImageField, ImagesField, UpdateFileField, VideoField, UploadField as default, definition };
+export { AudioUploadField as AudioField, DocumentUploadField as DocumentField, FontUploadField as FontField, ImageUploadField as ImageField, ImagesUploadField as ImagesField, VideoUploadField as VideoField, UploadField as default, definition };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-upload",
-    "version": "4.0.62",
+    "version": "4.0.64",
     "description": "An Upload field",
     "keywords": [
         "javascript"
@@ -65,10 +65,10 @@
         "@panneau/core": "^4.0.58",
         "@panneau/element-button": "^4.0.62",
         "@panneau/element-label": "^4.0.58",
-        "@panneau/element-media-card": "^4.0.62",
-        "@panneau/modal-resource-items": "^4.0.62",
+        "@panneau/element-media-card": "^4.0.63",
+        "@panneau/modal-resource-items": "^4.0.64",
         "@panneau/themes": "^4.0.58",
-        "@panneau/uppy": "^4.0.61",
+        "@panneau/uppy": "^4.0.63",
         "@uppy/core": "^5.1.1",
         "@uppy/dashboard": "^5.0.4",
         "@uppy/react": "^5.1.1",
@@ -89,5 +89,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "17bd4ce7368c35adbc2a0512b6df756053afd0b8"
+    "gitHead": "989601b7dc15b368b6b5f12970aaa60f8e1aa132"
 }