@panneau/medias 3.0.153 → 3.0.156

package/es/index.js

@@ -8,11 +8,12 @@ import { useDisplaysComponentsManager, useFieldComponent, usePanneauResource } f
 import { useForm, useQuery, useItemSelection } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
 import Form from '@panneau/element-form';
+import FormStatus from '@panneau/element-form-status';
 import MediaPlayer from '@panneau/element-media-player';
 import MediaPreview from '@panneau/element-media-preview';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { get } from 'lodash';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import Buttons from '@panneau/element-buttons';
 import Grid from '@panneau/element-grid';
@@ -213,25 +214,28 @@ function MediaFrame(_ref) {
     setShowPlayer(!showPlayer);
   }, [showPlayer, setShowPlayer]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([className, _defineProperty({}, className, className != null)])
+    className: classNames([className, 'position-relative', _defineProperty({}, className, className != null)])
   }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
-    value: value
+    value: value,
+    width: "100%"
   }) : /*#__PURE__*/React.createElement(MediaPreview, {
     value: value,
     width: "100%"
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.playButton
   }, !showPlayer && (type === 'video' || type === 'embed' || type === 'audio') ? /*#__PURE__*/React.createElement(Button, {
     className: "rounded-circle",
     theme: "secondary",
     onClick: onClick,
-    icon: "play-fill"
-  }) : null));
+    icon: "play-fill",
+    size: "lg"
+  }) : null)));
 }
 MediaFrame.propTypes = propTypes$8;
 MediaFrame.defaultProps = defaultProps$8;
 
-var _excluded$6 = ["label", "path", "component"];
+var _excluded$6 = ["path"],
+  _excluded2$1 = ["label", "value", "component"];
 var propTypes$7 = {
   value: PropTypes.shape({
     metadata: PropTypes.shape({}),
@@ -256,61 +260,78 @@ var defaultProps$7 = {
 function MediaMetadata(_ref) {
   var sections = _ref.sections,
     displays = _ref.displays,
-    value = _ref.value,
+    filtersValue = _ref.value,
     className = _ref.className;
   var displayComponents = useDisplaysComponentsManager();
   var finalSections = useMemo(function () {
-    var displaysWithoutSection = (displays || []).filter(function (_ref2) {
-      var _ref2$section = _ref2.section,
-        section = _ref2$section === void 0 ? null : _ref2$section;
+    var displaysWithValue = (displays || []).map(function (_ref2) {
+      var _ref2$path = _ref2.path,
+        path = _ref2$path === void 0 ? null : _ref2$path,
+        props = _objectWithoutProperties(_ref2, _excluded$6);
+      return _objectSpread({
+        value: get(filtersValue, path, null)
+      }, props);
+    }).filter(function (_ref3) {
+      var _ref3$value = _ref3.value,
+        value = _ref3$value === void 0 ? null : _ref3$value;
+      return value !== null;
+    });
+    var displaysWithoutSection = (displaysWithValue || []).filter(function (_ref4) {
+      var _ref4$section = _ref4.section,
+        section = _ref4$section === void 0 ? null : _ref4$section;
       return section === null;
     });
-    return (sections || []).map(function (_ref3) {
-      var _ref3$id = _ref3.id,
-        id = _ref3$id === void 0 ? null : _ref3$id,
-        _ref3$title = _ref3.title,
-        title = _ref3$title === void 0 ? null : _ref3$title;
+    return (sections || []).map(function (_ref5) {
+      var _ref5$id = _ref5.id,
+        id = _ref5$id === void 0 ? null : _ref5$id,
+        _ref5$title = _ref5.title,
+        title = _ref5$title === void 0 ? null : _ref5$title;
       return {
         id: id,
         title: title,
-        items: (displays || []).filter(function (_ref4) {
-          var _ref4$section = _ref4.section,
-            section = _ref4$section === void 0 ? null : _ref4$section;
+        items: (displaysWithValue || []).filter(function (_ref6) {
+          var _ref6$section = _ref6.section,
+            section = _ref6$section === void 0 ? null : _ref6$section;
           return section === id;
         })
       };
     }).concat({
+      id: 'others',
       title: null,
       items: displaysWithoutSection
+    }).filter(function (_ref7) {
+      var _ref7$items = _ref7.items,
+        items = _ref7$items === void 0 ? null : _ref7$items;
+      return items !== null && items.length > 0;
     });
-  }, [sections, displays]);
+  }, [sections, displays, filtersValue]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['px-2', _defineProperty({}, className, className !== null)])
-  }, (finalSections || []).map(function (_ref6, i) {
-    var _ref6$title = _ref6.title,
-      title = _ref6$title === void 0 ? null : _ref6$title,
-      _ref6$items = _ref6.items,
-      items = _ref6$items === void 0 ? [] : _ref6$items;
+  }, (finalSections || []).map(function (_ref9, idx) {
+    var _ref9$title = _ref9.title,
+      title = _ref9$title === void 0 ? null : _ref9$title,
+      _ref9$items = _ref9.items,
+      items = _ref9$items === void 0 ? [] : _ref9$items;
     return /*#__PURE__*/React.createElement("div", {
-      className: "mb-5",
-      key: "section-".concat(i + 1)
+      className: idx < finalSections.length - 1 ? 'mb-5' : null,
+      key: "section-".concat(idx + 1)
     }, title !== null ? /*#__PURE__*/React.createElement("h6", {
       className: "px-1"
     }, title) : null, /*#__PURE__*/React.createElement("ul", {
       className: "list-group list-group-flush"
-    }, (items || []).map(function (_ref7, index) {
-      var label = _ref7.label,
-        path = _ref7.path,
-        _ref7$component = _ref7.component,
-        component = _ref7$component === void 0 ? null : _ref7$component,
-        props = _objectWithoutProperties(_ref7, _excluded$6);
+    }, (items || []).map(function (_ref10, index) {
+      var label = _ref10.label,
+        value = _ref10.value,
+        _ref10$component = _ref10.component,
+        component = _ref10$component === void 0 ? null : _ref10$component,
+        props = _objectWithoutProperties(_ref10, _excluded2$1);
       var Component = displayComponents.getComponent(component || 'text');
-      var itemValue = get(value, path, null);
+      var itemValue = value || null;
       return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
+        key: "item-".concat(index + 1),
         className: classNames(['row', 'd-flex', 'align-items-center', 'justify-content-between', 'p-1', 'border-secondary-1', 'border-1', 'border-bottom', 'text-small', {
           'border-top': index === 0
-        }]),
-        key: "item-".concat(index + 1)
+        }])
       }, /*#__PURE__*/React.createElement("div", {
         className: "col-auto"
       }, label), /*#__PURE__*/React.createElement("div", {
@@ -477,7 +498,7 @@ var propTypes$6 = {
     name: PropTypes.string
   })),
   onChange: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
   onDelete: PropTypes.func,
   onClose: PropTypes.func,
   className: PropTypes.string
@@ -497,7 +518,7 @@ function MediaForm(_ref) {
     sections = _ref.sections,
     displays = _ref.displays,
     onChange = _ref.onChange,
-    onConfirm = _ref.onConfirm,
+    onSave = _ref.onSave,
     onDelete = _ref.onDelete,
     onClose = _ref.onClose,
     className = _ref.className;
@@ -509,9 +530,9 @@ function MediaForm(_ref) {
     destroy = _useMediaDestroy.destroy,
     destroying = _useMediaDestroy.loading;
   var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2);
-    _useState2[0];
-    var setChanged = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    changed = _useState2[0],
+    setChanged = _useState2[1];
   var disabled = updating || destroying || initialValue === null;
   var _ref2 = initialValue || {},
     _ref2$name = _ref2.name,
@@ -525,21 +546,26 @@ function MediaForm(_ref) {
     setChanged(true);
   }, [onChange, setChanged]);
   var onMediaSaved = useCallback(function (newValue) {
-    if (onConfirm !== null) {
-      onConfirm(newValue);
+    if (onSave !== null) {
+      onSave(newValue);
     }
     setChanged(false);
   }, [onChange, setChanged]);
   var onDeleteMedia = useCallback(function () {
     // Destroy
-    if (onClose !== null) {
-      onClose();
-    }
-    if (onDelete !== null) {
-      onDelete();
-    }
-    setChanged(false);
-  }, [destroy, setChanged]);
+    var _ref3 = initialValue || {},
+      _ref3$id = _ref3.id,
+      id = _ref3$id === void 0 ? null : _ref3$id;
+    destroy(id, initialValue).then(function () {
+      if (onClose !== null) {
+        onClose();
+      }
+      if (onDelete !== null) {
+        onDelete();
+      }
+      setChanged(false);
+    });
+  }, [initialValue, destroy, destroying, setChanged]);
   var postForm = useCallback(function (action, data) {
     return initialValue !== null ? update(initialValue.id, data) : new Promise();
   }, [initialValue, update]);
@@ -548,36 +574,41 @@ function MediaForm(_ref) {
       postForm: postForm,
       onComplete: onMediaSaved,
       value: initialValue,
-      setValue: onChange
+      setValue: onChangeMedia,
+      disabled: updating
     }),
     value = _useForm.value,
     setValue = _useForm.setValue,
-    fields = _useForm.fields;
-    _useForm.onSubmit;
-    _useForm.status;
-    _useForm.generalError;
-    _useForm.errors;
+    fields = _useForm.fields,
+    onSubmit = _useForm.onSubmit,
+    status = _useForm.status,
+    generalError = _useForm.generalError;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['text-body', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
-    className: "d-inline"
+    className: "d-flex w-100 align-items-start justify-content-between mb-3 pb-2 border-bottom"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-end mb-0"
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "d-inline text-break mb-1"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    className: "me-2",
+    className: "me-2 mb-1",
     theme: "danger",
-    onClick: onDeleteMedia
+    onClick: onDeleteMedia,
+    disabled: destroying
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "Bhu3B2",
     defaultMessage: [{
       "type": 0,
       "value": "Delete"
     }]
-  })), onConfirm !== null ? /*#__PURE__*/React.createElement(Button, {
+  })), onSave !== null ? /*#__PURE__*/React.createElement(Button, {
+    className: "mb-1",
     theme: "primary",
-    onClick: onConfirm
+    onClick: onSubmit,
+    disabled: !changed || updating || destroying
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "R1HYj0",
     defaultMessage: [{
@@ -589,10 +620,7 @@ function MediaForm(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-md-6"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "position-relative w-100",
-    style: {
-      height: 400
-    }
+    className: "position-relative w-100"
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.mediaFrame
   }, /*#__PURE__*/React.createElement(MediaFrame, {
@@ -612,7 +640,11 @@ function MediaForm(_ref) {
     value: value,
     sections: sections,
     displays: displays
-  }))));
+  }), generalError !== null && status !== null ? /*#__PURE__*/React.createElement("div", {
+    className: "mt-5"
+  }, /*#__PURE__*/React.createElement(FormStatus, {
+    status: status
+  })) : null)));
 }
 MediaForm.propTypes = propTypes$6;
 MediaForm.defaultProps = defaultProps$6;
@@ -732,7 +764,20 @@ var defaultColumns = [{
   }),
   component: 'avatar',
   path: 'metadata.author',
-  namePath: 'name'
+  namePath: 'name',
+  withoutName: true
+}, {
+  id: 'actions',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "rtwfuZ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Actions"
+    }]
+  })
+  // component: 'button',
+  // label: 'Edit',
+  // url: '/edit/1',
 }
 // {
 //     id: 'status',
@@ -743,9 +788,9 @@ var defaultColumns = [{
 ];
 
 var defaultFilters = [{
-  id: 'type',
+  id: 'types',
   component: 'select',
-  name: 'type',
+  name: 'types',
   placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "9/t5wK",
     defaultMessage: [{
@@ -825,10 +870,14 @@ var defaultFilters = [{
   name: 'search'
 }];
 
-var _excluded$5 = ["page", "count"];
+var _excluded$5 = ["page", "count"],
+  _excluded2 = ["types"];
 var propTypes$5 = {
   items: PropTypes$1.medias,
-  uploadButton: PropTypes.func,
+  types: PropTypes.arrayOf(PropTypes.string),
+  uploadButton: PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes$1.medias, PropTypes$1.media])
+  }),
   buttons: PropTypes$1.buttons,
   filters: PropTypes$1.filters,
   columns: PropTypes$1.tableColumns,
@@ -848,6 +897,7 @@ var propTypes$5 = {
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
   onSelectItem: PropTypes.func,
+  onSelectItems: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
@@ -856,6 +906,7 @@ var propTypes$5 = {
 };
 var defaultProps$5 = {
   items: null,
+  types: null,
   uploadButton: null,
   buttons: null,
   filters: defaultFilters,
@@ -882,6 +933,7 @@ var defaultProps$5 = {
   theme: null,
   tableProps: null,
   onSelectItem: null,
+  onSelectItems: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectedCount: null,
@@ -890,6 +942,7 @@ var defaultProps$5 = {
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
+    types = _ref.types,
     baseUrl = _ref.baseUrl,
     uploadButton = _ref.uploadButton,
     buttons = _ref.buttons,
@@ -903,6 +956,7 @@ function MediasBrowser(_ref) {
     theme = _ref.theme,
     tableProps = _ref.tableProps,
     onSelectItem = _ref.onSelectItem,
+    onSelectItems = _ref.onSelectItems,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
@@ -911,9 +965,14 @@ function MediasBrowser(_ref) {
   var _ref2 = metadatas || {},
     sections = _ref2.sections,
     displays = _ref2.displays;
+  var _useState = useState(initialItems || null),
+    _useState2 = _slicedToArray(_useState, 1),
+    baseItems = _useState2[0];
   var baseQuery = useMemo(function () {
-    return initialQuery;
-  }, [initialQuery]);
+    return _objectSpread(_objectSpread({}, initialQuery), {}, {
+      types: types
+    });
+  }, [initialQuery, types]);
   var _useQuery = useQuery(baseQuery),
     fullQuery = _useQuery.query,
     onPageChange = _useQuery.onPageChange,
@@ -938,8 +997,13 @@ function MediasBrowser(_ref) {
     count = _useMemo$count === void 0 ? null : _useMemo$count,
     _useMemo$query = _useMemo.query,
     query = _useMemo$query === void 0 ? null : _useMemo$query;
+
+  // eslint-disable-next-line no-unused-vars
+  var _ref4 = query || {};
+    _ref4.types;
+    var queryWithoutTypes = _objectWithoutProperties(_ref4, _excluded2);
   var _useMedias = useMedias$1(query, page, count, {
-      initialItems: initialItems
+      items: baseItems
     }),
     items = _useMedias.medias,
     loading = _useMedias.loading,
@@ -952,10 +1016,10 @@ function MediasBrowser(_ref) {
       onItemsChange(items);
     }
   }, [items, onItemsChange]);
-  var _useState = useState(initialLayout || 'grid'),
-    _useState2 = _slicedToArray(_useState, 2),
-    layout = _useState2[0],
-    setLayout = _useState2[1];
+  var _useState3 = useState(initialLayout || 'grid'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    layout = _useState4[0],
+    setLayout = _useState4[1];
   var hasLayouts = useMemo(function () {
     return layouts !== null && layouts.length > 1;
   }, [layouts]);
@@ -965,21 +1029,22 @@ function MediasBrowser(_ref) {
       onLayoutChange(newLayout);
     }
   }, [setLayout]);
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    media = _useState4[0],
-    setMedia = _useState4[1];
-  var onOpenMedia = useCallback(function (currentMedia) {
-    setMedia(currentMedia);
-  }, [setMedia]);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentMedia = _useState6[0],
+    setCurrentMedia = _useState6[1];
+  var onOpenMedia = useCallback(function (media) {
+    setCurrentMedia(media);
+  }, [setCurrentMedia]);
   var onCloseMedia = useCallback(function () {
-    setMedia(null);
-  }, [setMedia]);
-  var onUploadMedia = useCallback(function (newMedia) {
-    setMedia(null);
-    onSelectItem(newMedia || null);
+    setCurrentMedia(null);
+  }, [setCurrentMedia]);
+  var onChangeMedia = useCallback(function () {
+    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    console.log('media', media);
+    onSelectItems(media);
     onQueryReset();
-  }, [setMedia, onQueryReset, onSelectItem]);
+  }, [setCurrentMedia, onQueryReset, onSelectItems]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -994,9 +1059,22 @@ function MediasBrowser(_ref) {
     withPreviousNext: true,
     alwaysShowButtons: true
   });
+  var finalFilters = useMemo(function () {
+    if (types !== null && filters !== null) {
+      return (filters || []).map(function (filter) {
+        var _ref5 = filter || {},
+          _ref5$id = _ref5.id,
+          id = _ref5$id === void 0 ? null : _ref5$id;
+        return id === 'types' ? _objectSpread(_objectSpread({}, filter), {}, {
+          disabled: true
+        }) : filter;
+      });
+    }
+    return filters;
+  }, [filters, types]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
-  }, media !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
@@ -1010,7 +1088,7 @@ function MediasBrowser(_ref) {
       "value": "Back to files"
     }]
   }))), /*#__PURE__*/React.createElement(MediaForm, {
-    value: media,
+    value: currentMedia,
     fields: fields,
     sections: sections,
     displays: displays,
@@ -1018,14 +1096,15 @@ function MediasBrowser(_ref) {
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, uploadButton !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    onChange: onUploadMedia,
+    onChange: onChangeMedia,
     withButton: true
   }, uploadButton))) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
     className: "mb-2"
   }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
-    filters: filters,
+    clearValue: types !== null ? queryWithoutTypes : null,
+    filters: finalFilters,
     onChange: onQueryChange,
     onReset: onQueryReset,
     theme: theme
@@ -1079,11 +1158,13 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
+var _excluded$4 = ["items", "value", "types", "uploadButton", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
 var propTypes$4 = {
   // eslint-disable-next-line react/forbid-prop-types
+  items: PropTypes.arrayOf(PropTypes.shape({})),
   value: PropTypes.arrayOf(PropTypes.shape({})),
-  selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
+  types: PropTypes.arrayOf(PropTypes.string),
+  uploadButton: PropTypes.shape({}),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
@@ -1095,8 +1176,10 @@ var propTypes$4 = {
   className: PropTypes.string
 };
 var defaultProps$4 = {
+  items: null,
   value: null,
-  selectedItems: null,
+  types: null,
+  uploadButton: null,
   onClose: null,
   multiple: false,
   withoutButtons: false,
@@ -1104,8 +1187,10 @@ var defaultProps$4 = {
   className: null
 };
 function MediasPicker(_ref) {
-  var value = _ref.value,
-    initialSelectedItems = _ref.selectedItems,
+  var initialItems = _ref.items,
+    initialSelectedItems = _ref.value,
+    types = _ref.types,
+    uploadButton = _ref.uploadButton,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
@@ -1114,14 +1199,14 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  var _useState = useState(value),
+  var _useState = useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
     setItems = _useState2[1];
   var onItemsChange = useCallback(function (pageItems) {
     setItems(pageItems);
   }, [setItems]);
-  var disabled = value === null || value.length < 1;
+  var disabled = initialItems === null || initialItems.length < 1;
   var _useItemSelection = useItemSelection({
       items: items,
       selectedItems: initialSelectedItems,
@@ -1129,26 +1214,40 @@ function MediasPicker(_ref) {
       multipleSelection: multiple
     }),
     onSelectItem = _useItemSelection.onSelectItem,
+    onSelectItems = _useItemSelection.onSelectItems,
     onSelectPage = _useItemSelection.onSelectPage,
     onClearSelected = _useItemSelection.onClearSelected,
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
+  var finalUploadButton = useMemo(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, uploadButton || null), types !== null ? {
+      types: types
+    } : null), {}, {
+      allowMultipleUploads: multiple,
+      maxNumberOfFiles: multiple ? 10 : 0,
+      value: selectedItems
+    });
+  }, [uploadButton, selectedItems, multiple]);
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
     tableProps: _objectSpread({
-      selectable: true,
+      selectable: multiple,
       multipleSelection: multiple,
       onSelectItem: onSelectItem,
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
     }, tableProps),
+    items: items,
     onSelectItem: onSelectItem,
+    onSelectItems: onSelectItems,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
-    onClearSelected: onClearSelected
+    onClearSelected: onClearSelected,
+    uploadButton: finalUploadButton,
+    types: types
   }, props)), multiple && !withoutButtons ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"
   }, /*#__PURE__*/React.createElement("div", {

package/lib/index.js

@@ -10,11 +10,12 @@ var contexts = require('@panneau/core/contexts');
 var hooks = require('@panneau/core/hooks');
 var Button = require('@panneau/element-button');
 var Form = require('@panneau/element-form');
+var FormStatus = require('@panneau/element-form-status');
 var MediaPlayer = require('@panneau/element-media-player');
 var MediaPreview = require('@panneau/element-media-preview');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var lodash = require('lodash');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var core = require('@panneau/core');
 var Buttons = require('@panneau/element-buttons');
 var Grid = require('@panneau/element-grid');
@@ -215,25 +216,28 @@ function MediaFrame(_ref) {
     setShowPlayer(!showPlayer);
   }, [showPlayer, setShowPlayer]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([className, _defineProperty({}, className, className != null)])
+    className: classNames([className, 'position-relative', _defineProperty({}, className, className != null)])
   }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
-    value: value
+    value: value,
+    width: "100%"
   }) : /*#__PURE__*/React.createElement(MediaPreview, {
     value: value,
     width: "100%"
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.playButton
   }, !showPlayer && (type === 'video' || type === 'embed' || type === 'audio') ? /*#__PURE__*/React.createElement(Button, {
     className: "rounded-circle",
     theme: "secondary",
     onClick: onClick,
-    icon: "play-fill"
-  }) : null));
+    icon: "play-fill",
+    size: "lg"
+  }) : null)));
 }
 MediaFrame.propTypes = propTypes$8;
 MediaFrame.defaultProps = defaultProps$8;
 
-var _excluded$6 = ["label", "path", "component"];
+var _excluded$6 = ["path"],
+  _excluded2$1 = ["label", "value", "component"];
 var propTypes$7 = {
   value: PropTypes.shape({
     metadata: PropTypes.shape({}),
@@ -258,61 +262,78 @@ var defaultProps$7 = {
 function MediaMetadata(_ref) {
   var sections = _ref.sections,
     displays = _ref.displays,
-    value = _ref.value,
+    filtersValue = _ref.value,
     className = _ref.className;
   var displayComponents = contexts.useDisplaysComponentsManager();
   var finalSections = React.useMemo(function () {
-    var displaysWithoutSection = (displays || []).filter(function (_ref2) {
-      var _ref2$section = _ref2.section,
-        section = _ref2$section === void 0 ? null : _ref2$section;
+    var displaysWithValue = (displays || []).map(function (_ref2) {
+      var _ref2$path = _ref2.path,
+        path = _ref2$path === void 0 ? null : _ref2$path,
+        props = _objectWithoutProperties(_ref2, _excluded$6);
+      return _objectSpread({
+        value: lodash.get(filtersValue, path, null)
+      }, props);
+    }).filter(function (_ref3) {
+      var _ref3$value = _ref3.value,
+        value = _ref3$value === void 0 ? null : _ref3$value;
+      return value !== null;
+    });
+    var displaysWithoutSection = (displaysWithValue || []).filter(function (_ref4) {
+      var _ref4$section = _ref4.section,
+        section = _ref4$section === void 0 ? null : _ref4$section;
       return section === null;
     });
-    return (sections || []).map(function (_ref3) {
-      var _ref3$id = _ref3.id,
-        id = _ref3$id === void 0 ? null : _ref3$id,
-        _ref3$title = _ref3.title,
-        title = _ref3$title === void 0 ? null : _ref3$title;
+    return (sections || []).map(function (_ref5) {
+      var _ref5$id = _ref5.id,
+        id = _ref5$id === void 0 ? null : _ref5$id,
+        _ref5$title = _ref5.title,
+        title = _ref5$title === void 0 ? null : _ref5$title;
       return {
         id: id,
         title: title,
-        items: (displays || []).filter(function (_ref4) {
-          var _ref4$section = _ref4.section,
-            section = _ref4$section === void 0 ? null : _ref4$section;
+        items: (displaysWithValue || []).filter(function (_ref6) {
+          var _ref6$section = _ref6.section,
+            section = _ref6$section === void 0 ? null : _ref6$section;
           return section === id;
         })
       };
     }).concat({
+      id: 'others',
       title: null,
       items: displaysWithoutSection
+    }).filter(function (_ref7) {
+      var _ref7$items = _ref7.items,
+        items = _ref7$items === void 0 ? null : _ref7$items;
+      return items !== null && items.length > 0;
     });
-  }, [sections, displays]);
+  }, [sections, displays, filtersValue]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['px-2', _defineProperty({}, className, className !== null)])
-  }, (finalSections || []).map(function (_ref6, i) {
-    var _ref6$title = _ref6.title,
-      title = _ref6$title === void 0 ? null : _ref6$title,
-      _ref6$items = _ref6.items,
-      items = _ref6$items === void 0 ? [] : _ref6$items;
+  }, (finalSections || []).map(function (_ref9, idx) {
+    var _ref9$title = _ref9.title,
+      title = _ref9$title === void 0 ? null : _ref9$title,
+      _ref9$items = _ref9.items,
+      items = _ref9$items === void 0 ? [] : _ref9$items;
     return /*#__PURE__*/React.createElement("div", {
-      className: "mb-5",
-      key: "section-".concat(i + 1)
+      className: idx < finalSections.length - 1 ? 'mb-5' : null,
+      key: "section-".concat(idx + 1)
     }, title !== null ? /*#__PURE__*/React.createElement("h6", {
       className: "px-1"
     }, title) : null, /*#__PURE__*/React.createElement("ul", {
       className: "list-group list-group-flush"
-    }, (items || []).map(function (_ref7, index) {
-      var label = _ref7.label,
-        path = _ref7.path,
-        _ref7$component = _ref7.component,
-        component = _ref7$component === void 0 ? null : _ref7$component,
-        props = _objectWithoutProperties(_ref7, _excluded$6);
+    }, (items || []).map(function (_ref10, index) {
+      var label = _ref10.label,
+        value = _ref10.value,
+        _ref10$component = _ref10.component,
+        component = _ref10$component === void 0 ? null : _ref10$component,
+        props = _objectWithoutProperties(_ref10, _excluded2$1);
       var Component = displayComponents.getComponent(component || 'text');
-      var itemValue = lodash.get(value, path, null);
+      var itemValue = value || null;
       return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
+        key: "item-".concat(index + 1),
         className: classNames(['row', 'd-flex', 'align-items-center', 'justify-content-between', 'p-1', 'border-secondary-1', 'border-1', 'border-bottom', 'text-small', {
           'border-top': index === 0
-        }]),
-        key: "item-".concat(index + 1)
+        }])
       }, /*#__PURE__*/React.createElement("div", {
         className: "col-auto"
       }, label), /*#__PURE__*/React.createElement("div", {
@@ -479,7 +500,7 @@ var propTypes$6 = {
     name: PropTypes.string
   })),
   onChange: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
   onDelete: PropTypes.func,
   onClose: PropTypes.func,
   className: PropTypes.string
@@ -499,7 +520,7 @@ function MediaForm(_ref) {
     sections = _ref.sections,
     displays = _ref.displays,
     onChange = _ref.onChange,
-    onConfirm = _ref.onConfirm,
+    onSave = _ref.onSave,
     onDelete = _ref.onDelete,
     onClose = _ref.onClose,
     className = _ref.className;
@@ -511,9 +532,9 @@ function MediaForm(_ref) {
     destroy = _useMediaDestroy.destroy,
     destroying = _useMediaDestroy.loading;
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2);
-    _useState2[0];
-    var setChanged = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    changed = _useState2[0],
+    setChanged = _useState2[1];
   var disabled = updating || destroying || initialValue === null;
   var _ref2 = initialValue || {},
     _ref2$name = _ref2.name,
@@ -527,21 +548,26 @@ function MediaForm(_ref) {
     setChanged(true);
   }, [onChange, setChanged]);
   var onMediaSaved = React.useCallback(function (newValue) {
-    if (onConfirm !== null) {
-      onConfirm(newValue);
+    if (onSave !== null) {
+      onSave(newValue);
     }
     setChanged(false);
   }, [onChange, setChanged]);
   var onDeleteMedia = React.useCallback(function () {
     // Destroy
-    if (onClose !== null) {
-      onClose();
-    }
-    if (onDelete !== null) {
-      onDelete();
-    }
-    setChanged(false);
-  }, [destroy, setChanged]);
+    var _ref3 = initialValue || {},
+      _ref3$id = _ref3.id,
+      id = _ref3$id === void 0 ? null : _ref3$id;
+    destroy(id, initialValue).then(function () {
+      if (onClose !== null) {
+        onClose();
+      }
+      if (onDelete !== null) {
+        onDelete();
+      }
+      setChanged(false);
+    });
+  }, [initialValue, destroy, destroying, setChanged]);
   var postForm = React.useCallback(function (action, data) {
     return initialValue !== null ? update(initialValue.id, data) : new Promise();
   }, [initialValue, update]);
@@ -550,36 +576,41 @@ function MediaForm(_ref) {
       postForm: postForm,
       onComplete: onMediaSaved,
       value: initialValue,
-      setValue: onChange
+      setValue: onChangeMedia,
+      disabled: updating
     }),
     value = _useForm.value,
     setValue = _useForm.setValue,
-    fields = _useForm.fields;
-    _useForm.onSubmit;
-    _useForm.status;
-    _useForm.generalError;
-    _useForm.errors;
+    fields = _useForm.fields,
+    onSubmit = _useForm.onSubmit,
+    status = _useForm.status,
+    generalError = _useForm.generalError;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['text-body', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
-    className: "d-inline"
+    className: "d-flex w-100 align-items-start justify-content-between mb-3 pb-2 border-bottom"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-end mb-0"
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "d-inline text-break mb-1"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    className: "me-2",
+    className: "me-2 mb-1",
     theme: "danger",
-    onClick: onDeleteMedia
+    onClick: onDeleteMedia,
+    disabled: destroying
   }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "Bhu3B2",
     defaultMessage: [{
       "type": 0,
       "value": "Delete"
     }]
-  })), onConfirm !== null ? /*#__PURE__*/React.createElement(Button, {
+  })), onSave !== null ? /*#__PURE__*/React.createElement(Button, {
+    className: "mb-1",
     theme: "primary",
-    onClick: onConfirm
+    onClick: onSubmit,
+    disabled: !changed || updating || destroying
   }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "R1HYj0",
     defaultMessage: [{
@@ -591,10 +622,7 @@ function MediaForm(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "col-md-6"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "position-relative w-100",
-    style: {
-      height: 400
-    }
+    className: "position-relative w-100"
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.mediaFrame
   }, /*#__PURE__*/React.createElement(MediaFrame, {
@@ -614,7 +642,11 @@ function MediaForm(_ref) {
     value: value,
     sections: sections,
     displays: displays
-  }))));
+  }), generalError !== null && status !== null ? /*#__PURE__*/React.createElement("div", {
+    className: "mt-5"
+  }, /*#__PURE__*/React.createElement(FormStatus, {
+    status: status
+  })) : null)));
 }
 MediaForm.propTypes = propTypes$6;
 MediaForm.defaultProps = defaultProps$6;
@@ -734,7 +766,20 @@ var defaultColumns = [{
   }),
   component: 'avatar',
   path: 'metadata.author',
-  namePath: 'name'
+  namePath: 'name',
+  withoutName: true
+}, {
+  id: 'actions',
+  label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "rtwfuZ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Actions"
+    }]
+  })
+  // component: 'button',
+  // label: 'Edit',
+  // url: '/edit/1',
 }
 // {
 //     id: 'status',
@@ -745,9 +790,9 @@ var defaultColumns = [{
 ];
 
 var defaultFilters = [{
-  id: 'type',
+  id: 'types',
   component: 'select',
-  name: 'type',
+  name: 'types',
   placeholder: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "9/t5wK",
     defaultMessage: [{
@@ -827,10 +872,14 @@ var defaultFilters = [{
   name: 'search'
 }];
 
-var _excluded$5 = ["page", "count"];
+var _excluded$5 = ["page", "count"],
+  _excluded2 = ["types"];
 var propTypes$5 = {
   items: core.PropTypes.medias,
-  uploadButton: PropTypes.func,
+  types: PropTypes.arrayOf(PropTypes.string),
+  uploadButton: PropTypes.shape({
+    value: PropTypes.oneOfType([core.PropTypes.medias, core.PropTypes.media])
+  }),
   buttons: core.PropTypes.buttons,
   filters: core.PropTypes.filters,
   columns: core.PropTypes.tableColumns,
@@ -850,6 +899,7 @@ var propTypes$5 = {
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
   onSelectItem: PropTypes.func,
+  onSelectItems: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
@@ -858,6 +908,7 @@ var propTypes$5 = {
 };
 var defaultProps$5 = {
   items: null,
+  types: null,
   uploadButton: null,
   buttons: null,
   filters: defaultFilters,
@@ -884,6 +935,7 @@ var defaultProps$5 = {
   theme: null,
   tableProps: null,
   onSelectItem: null,
+  onSelectItems: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectedCount: null,
@@ -892,6 +944,7 @@ var defaultProps$5 = {
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
+    types = _ref.types,
     baseUrl = _ref.baseUrl,
     uploadButton = _ref.uploadButton,
     buttons = _ref.buttons,
@@ -905,6 +958,7 @@ function MediasBrowser(_ref) {
     theme = _ref.theme,
     tableProps = _ref.tableProps,
     onSelectItem = _ref.onSelectItem,
+    onSelectItems = _ref.onSelectItems,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
@@ -913,9 +967,14 @@ function MediasBrowser(_ref) {
   var _ref2 = metadatas || {},
     sections = _ref2.sections,
     displays = _ref2.displays;
+  var _useState = React.useState(initialItems || null),
+    _useState2 = _slicedToArray(_useState, 1),
+    baseItems = _useState2[0];
   var baseQuery = React.useMemo(function () {
-    return initialQuery;
-  }, [initialQuery]);
+    return _objectSpread(_objectSpread({}, initialQuery), {}, {
+      types: types
+    });
+  }, [initialQuery, types]);
   var _useQuery = hooks.useQuery(baseQuery),
     fullQuery = _useQuery.query,
     onPageChange = _useQuery.onPageChange,
@@ -940,8 +999,13 @@ function MediasBrowser(_ref) {
     count = _useMemo$count === void 0 ? null : _useMemo$count,
     _useMemo$query = _useMemo.query,
     query = _useMemo$query === void 0 ? null : _useMemo$query;
+
+  // eslint-disable-next-line no-unused-vars
+  var _ref4 = query || {};
+    _ref4.types;
+    var queryWithoutTypes = _objectWithoutProperties(_ref4, _excluded2);
   var _useMedias = useMedias$1(query, page, count, {
-      initialItems: initialItems
+      items: baseItems
     }),
     items = _useMedias.medias,
     loading = _useMedias.loading,
@@ -954,10 +1018,10 @@ function MediasBrowser(_ref) {
       onItemsChange(items);
     }
   }, [items, onItemsChange]);
-  var _useState = React.useState(initialLayout || 'grid'),
-    _useState2 = _slicedToArray(_useState, 2),
-    layout = _useState2[0],
-    setLayout = _useState2[1];
+  var _useState3 = React.useState(initialLayout || 'grid'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    layout = _useState4[0],
+    setLayout = _useState4[1];
   var hasLayouts = React.useMemo(function () {
     return layouts !== null && layouts.length > 1;
   }, [layouts]);
@@ -967,21 +1031,22 @@ function MediasBrowser(_ref) {
       onLayoutChange(newLayout);
     }
   }, [setLayout]);
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    media = _useState4[0],
-    setMedia = _useState4[1];
-  var onOpenMedia = React.useCallback(function (currentMedia) {
-    setMedia(currentMedia);
-  }, [setMedia]);
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentMedia = _useState6[0],
+    setCurrentMedia = _useState6[1];
+  var onOpenMedia = React.useCallback(function (media) {
+    setCurrentMedia(media);
+  }, [setCurrentMedia]);
   var onCloseMedia = React.useCallback(function () {
-    setMedia(null);
-  }, [setMedia]);
-  var onUploadMedia = React.useCallback(function (newMedia) {
-    setMedia(null);
-    onSelectItem(newMedia || null);
+    setCurrentMedia(null);
+  }, [setCurrentMedia]);
+  var onChangeMedia = React.useCallback(function () {
+    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    console.log('media', media);
+    onSelectItems(media);
     onQueryReset();
-  }, [setMedia, onQueryReset, onSelectItem]);
+  }, [setCurrentMedia, onQueryReset, onSelectItems]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -996,9 +1061,22 @@ function MediasBrowser(_ref) {
     withPreviousNext: true,
     alwaysShowButtons: true
   });
+  var finalFilters = React.useMemo(function () {
+    if (types !== null && filters !== null) {
+      return (filters || []).map(function (filter) {
+        var _ref5 = filter || {},
+          _ref5$id = _ref5.id,
+          id = _ref5$id === void 0 ? null : _ref5$id;
+        return id === 'types' ? _objectSpread(_objectSpread({}, filter), {}, {
+          disabled: true
+        }) : filter;
+      });
+    }
+    return filters;
+  }, [filters, types]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
-  }, media !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
@@ -1012,7 +1090,7 @@ function MediasBrowser(_ref) {
       "value": "Back to files"
     }]
   }))), /*#__PURE__*/React.createElement(MediaForm, {
-    value: media,
+    value: currentMedia,
     fields: fields,
     sections: sections,
     displays: displays,
@@ -1020,14 +1098,15 @@ function MediasBrowser(_ref) {
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, uploadButton !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    onChange: onUploadMedia,
+    onChange: onChangeMedia,
     withButton: true
   }, uploadButton))) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
     className: "mb-2"
   }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
-    filters: filters,
+    clearValue: types !== null ? queryWithoutTypes : null,
+    filters: finalFilters,
     onChange: onQueryChange,
     onReset: onQueryReset,
     theme: theme
@@ -1081,11 +1160,13 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
+var _excluded$4 = ["items", "value", "types", "uploadButton", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
 var propTypes$4 = {
   // eslint-disable-next-line react/forbid-prop-types
+  items: PropTypes.arrayOf(PropTypes.shape({})),
   value: PropTypes.arrayOf(PropTypes.shape({})),
-  selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
+  types: PropTypes.arrayOf(PropTypes.string),
+  uploadButton: PropTypes.shape({}),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
@@ -1097,8 +1178,10 @@ var propTypes$4 = {
   className: PropTypes.string
 };
 var defaultProps$4 = {
+  items: null,
   value: null,
-  selectedItems: null,
+  types: null,
+  uploadButton: null,
   onClose: null,
   multiple: false,
   withoutButtons: false,
@@ -1106,8 +1189,10 @@ var defaultProps$4 = {
   className: null
 };
 function MediasPicker(_ref) {
-  var value = _ref.value,
-    initialSelectedItems = _ref.selectedItems,
+  var initialItems = _ref.items,
+    initialSelectedItems = _ref.value,
+    types = _ref.types,
+    uploadButton = _ref.uploadButton,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
@@ -1116,14 +1201,14 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  var _useState = React.useState(value),
+  var _useState = React.useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
     setItems = _useState2[1];
   var onItemsChange = React.useCallback(function (pageItems) {
     setItems(pageItems);
   }, [setItems]);
-  var disabled = value === null || value.length < 1;
+  var disabled = initialItems === null || initialItems.length < 1;
   var _useItemSelection = hooks.useItemSelection({
       items: items,
       selectedItems: initialSelectedItems,
@@ -1131,26 +1216,40 @@ function MediasPicker(_ref) {
       multipleSelection: multiple
     }),
     onSelectItem = _useItemSelection.onSelectItem,
+    onSelectItems = _useItemSelection.onSelectItems,
     onSelectPage = _useItemSelection.onSelectPage,
     onClearSelected = _useItemSelection.onClearSelected,
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
+  var finalUploadButton = React.useMemo(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, uploadButton || null), types !== null ? {
+      types: types
+    } : null), {}, {
+      allowMultipleUploads: multiple,
+      maxNumberOfFiles: multiple ? 10 : 0,
+      value: selectedItems
+    });
+  }, [uploadButton, selectedItems, multiple]);
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
     tableProps: _objectSpread({
-      selectable: true,
+      selectable: multiple,
       multipleSelection: multiple,
       onSelectItem: onSelectItem,
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
     }, tableProps),
+    items: items,
     onSelectItem: onSelectItem,
+    onSelectItems: onSelectItems,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
-    onClearSelected: onClearSelected
+    onClearSelected: onClearSelected,
+    uploadButton: finalUploadButton,
+    types: types
   }, props)), multiple && !withoutButtons ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"
   }, /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.153",
+    "version": "3.0.156",
     "description": "",
     "keywords": [
         "javascript"
@@ -46,20 +46,21 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^3.0.153",
-        "@panneau/data": "^3.0.153",
-        "@panneau/element-button": "^3.0.153",
-        "@panneau/element-buttons": "^3.0.153",
-        "@panneau/element-form": "^3.0.153",
-        "@panneau/element-grid": "^3.0.153",
-        "@panneau/element-icon": "^3.0.153",
-        "@panneau/element-media-card": "^3.0.153",
-        "@panneau/element-media-player": "^3.0.153",
-        "@panneau/element-media-preview": "^3.0.153",
-        "@panneau/element-pagination": "^3.0.153",
-        "@panneau/element-table": "^3.0.153",
-        "@panneau/field-upload": "^3.0.153",
-        "@panneau/filter-filters": "^3.0.153",
+        "@panneau/core": "^3.0.156",
+        "@panneau/data": "^3.0.156",
+        "@panneau/element-button": "^3.0.156",
+        "@panneau/element-buttons": "^3.0.156",
+        "@panneau/element-form": "^3.0.156",
+        "@panneau/element-form-status": "^3.0.156",
+        "@panneau/element-grid": "^3.0.156",
+        "@panneau/element-icon": "^3.0.156",
+        "@panneau/element-media-card": "^3.0.156",
+        "@panneau/element-media-player": "^3.0.156",
+        "@panneau/element-media-preview": "^3.0.156",
+        "@panneau/element-pagination": "^3.0.156",
+        "@panneau/element-table": "^3.0.156",
+        "@panneau/field-upload": "^3.0.156",
+        "@panneau/filter-filters": "^3.0.156",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "715118ddbe09d7e7129bdb5cce0aad91aaa96768"
+    "gitHead": "3a248daabc4ba795ed1d39d148c1f1667fb203a3"
 }