@panneau/medias 3.0.170 → 3.0.172

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-medias-mediaFrame{margin-bottom:10px;position:relative}.panneau-medias-playButton{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+.panneau-medias-mediaFrame{aspect-ratio:1/1;margin-bottom:10px;position:relative}.panneau-medias-playButton{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

package/es/index.js

@@ -9,10 +9,12 @@ 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 ImageDisplay from '@panneau/display-image';
 import MediaPlayer from '@panneau/element-media-player';
-import MediaPreview from '@panneau/element-media-preview';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import uniqBy from 'lodash/uniqBy';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import Buttons from '@panneau/element-buttons';
 import Grid from '@panneau/element-grid';
@@ -20,10 +22,8 @@ import Icon from '@panneau/element-icon';
 import MediaCard from '@panneau/element-media-card';
 import Pagination from '@panneau/element-pagination';
 import Table from '@panneau/element-table';
-import UploadField from '@panneau/field-upload';
 import Filters from '@panneau/filter-filters';
 import { useItems, useData, useApi } from '@panneau/data';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 
 /* eslint-disable react/jsx-props-no-spreading */
 var MediasApiContext = /*#__PURE__*/React.createContext(null);
@@ -215,22 +215,18 @@ function MediaFrame(_ref) {
     setShowPlayer(!showPlayer);
   }, [showPlayer, setShowPlayer]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([className, 'position-relative', _defineProperty({}, className, className != null)])
+    className: classNames([styles.mediaFrame, 'position-relative', 'd-flex', 'flex-grow-1', 'w-100', 'mw-100', _defineProperty({}, className, className != null)])
   }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
     value: value,
     width: "100%"
-  }) : /*#__PURE__*/React.createElement(MediaPreview, {
+  }) : /*#__PURE__*/React.createElement(ImageDisplay, {
+    className: "w-100",
     value: value,
-    width: "100%"
-  }, /*#__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",
-    size: "lg"
-  }) : null)));
+    maxWidth: "100%",
+    maxHeight: "100%",
+    withoutZoom: true,
+    onClick: type === 'video' || type === 'audio' ? onClick : null
+  }));
 }
 MediaFrame.propTypes = propTypes$8;
 MediaFrame.defaultProps = defaultProps$8;
@@ -268,6 +264,7 @@ var defaultFields = [{
     }]
   }),
   isList: true,
+  hideWithoutValue: true,
   fields: [{
     id: 'user',
     label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -309,6 +306,7 @@ var defaultFields = [{
     }]
   }),
   isList: true,
+  hideWithoutValue: true,
   fields: [{
     id: 'format',
     label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -696,6 +694,10 @@ var defaultColumns = [{
 ];
 
 var defaultFilters = [{
+  id: 'search',
+  component: 'search',
+  name: 'search'
+}, {
   id: 'types',
   component: 'select',
   name: 'types',
@@ -744,7 +746,8 @@ var defaultFilters = [{
     value: 'document'
   }],
   multiple: true
-},
+}
+
 // {
 //     id: 'author',
 //     component: 'select',
@@ -763,20 +766,14 @@ var defaultFilters = [{
 //     itemLabelPath: 'label',
 //     multiple: true,
 // },
-{
-  id: 'search',
-  component: 'search',
-  name: 'search'
-}];
+];
 
 var _excluded$5 = ["page", "count"],
   _excluded2 = ["types"];
 var propTypes$5 = {
   items: PropTypes$1.medias,
+  extraItems: PropTypes$1.medias,
   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,
@@ -787,18 +784,17 @@ var propTypes$5 = {
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
-  onSelectItem: PropTypes.func,
-  onSelectItems: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+  buttonsClassName: PropTypes.string
 };
 var defaultProps$5 = {
   items: null,
+  extraItems: null,
   types: null,
-  uploadButton: null,
   buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
@@ -819,19 +815,18 @@ var defaultProps$5 = {
   }],
   theme: null,
   tableProps: null,
-  onSelectItem: null,
-  onSelectItems: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
-  className: null
+  className: null,
+  buttonsClassName: null
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
+    extraItems = _ref.extraItems,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
-    uploadButton = _ref.uploadButton,
     buttons = _ref.buttons,
     filters = _ref.filters,
     columns = _ref.columns,
@@ -841,13 +836,12 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     tableProps = _ref.tableProps,
-    onSelectItem = _ref.onSelectItem,
-    onSelectItems = _ref.onSelectItems,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
-    className = _ref.className;
+    className = _ref.className,
+    buttonsClassName = _ref.buttonsClassName;
   var _useState = useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
@@ -901,7 +895,7 @@ function MediasBrowser(_ref) {
       onItemsChange(items);
     }
   }, [items, onItemsChange]);
-  var _useState3 = useState(initialLayout || 'grid'),
+  var _useState3 = useState(initialLayout || 'table'),
     _useState4 = _slicedToArray(_useState3, 2),
     layout = _useState4[0],
     setLayout = _useState4[1];
@@ -925,11 +919,6 @@ function MediasBrowser(_ref) {
   var onCloseMedia = useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-  var onChangeMedia = useCallback(function () {
-    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    onSelectItems(media);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset, onSelectItems]);
   var onSaveMedia = useCallback(function () {
     setCurrentMedia(null);
     onQueryReset();
@@ -961,13 +950,20 @@ function MediasBrowser(_ref) {
     }
     return filters;
   }, [filters, types]);
+  var finalItems = useMemo(function () {
+    if (page === 1 && extraItems !== null) {
+      return uniqBy([].concat(_toConsumableArray(extraItems), _toConsumableArray(items || [])), function (it) {
+        return it === null || it === void 0 ? void 0 : it.id;
+      });
+    }
+    return items;
+  }, [items, page, extraItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
-    outline: true,
     onClick: onCloseMedia,
     icon: "arrow-left"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -982,29 +978,22 @@ function MediasBrowser(_ref) {
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
-    items: buttons,
-    className: "mb-2"
-  }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
-    className: "mt-0 pt-0",
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
     onChange: onQueryChange,
     onReset: onQueryReset,
     theme: theme
-  }, uploadButton !== null ? /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    className: "w-auto mb-2",
-    onChange: onChangeMedia,
-    withButton: true,
-    withoutMedia: true
-  }, uploadButton)) : null) : null, filters === null && uploadButton !== null ? /*#__PURE__*/React.createElement("div", {
+  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: buttonsClassName
+  }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
-  }, /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    onChange: onChangeMedia,
-    withButton: true,
-    withoutMedia: true
-  }, uploadButton))) : null, /*#__PURE__*/React.createElement("div", {
+  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: buttonsClassName
+  }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
       'justify-content-end': !hasLayouts
@@ -1029,26 +1018,29 @@ function MediasBrowser(_ref) {
     componentProps: {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
-      vertical: true
-    }
-  }, tableProps, {
-    items: items || [],
-    loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
+      vertical: true,
+      onClickDescription: function onClickDescription(it) {
+        onOpenMedia(it);
+      }
+    },
+    onSelectItem: function onSelectItem(it) {
       return onOpenMedia(it);
     }
+  }, tableProps, {
+    items: finalItems || [],
+    loading: loading
   })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
     theme: theme,
     columns: columns,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
-    }, "\u2014")
+    }, "\u2014"),
+    onSelectItem: function onSelectItem(it) {
+      return onOpenMedia(it);
+    }
   }, tableProps, {
-    items: items,
+    items: finalItems,
     loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
-      return onOpenMedia(it);
-    },
     actionsProps: {
       getEditPropsFromItem: function getEditPropsFromItem(it) {
         return {
@@ -1066,13 +1058,12 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["items", "value", "types", "uploadButton", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
+var _excluded$4 = ["items", "value", "types", "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({})),
   types: PropTypes.arrayOf(PropTypes.string),
-  uploadButton: PropTypes.shape({}),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
@@ -1087,7 +1078,6 @@ var defaultProps$4 = {
   items: null,
   value: null,
   types: null,
-  uploadButton: null,
   onClose: null,
   multiple: false,
   withoutButtons: false,
@@ -1098,7 +1088,6 @@ function MediasPicker(_ref) {
   var initialItems = _ref.items,
     initialSelectedItems = _ref.value,
     types = _ref.types,
-    uploadButton = _ref.uploadButton,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
@@ -1107,61 +1096,50 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
+  // For selection only
   var _useState = useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
+    currentItems = _useState2[0],
     setItems = _useState2[1];
   var onItemsChange = useCallback(function (pageItems) {
     setItems(pageItems);
   }, [setItems]);
-  var disabled = initialItems === null || initialItems.length < 1;
   var _useMediasForm = useMediasForm(),
     currentMedia = _useMediasForm.media;
   var _useItemSelection = useItemSelection({
-      items: items,
+      currentItems: currentItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
     }),
     onSelectItem = _useItemSelection.onSelectItem,
-    onSelectItems = _useItemSelection.onSelectItems,
     onSelectPage = _useItemSelection.onSelectPage,
     onClearSelected = _useItemSelection.onClearSelected,
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
+  var disabled = currentItems === null || currentItems.length < 1;
   var onConfirmSelection = useCallback(function () {
     if (onConfirm !== null) {
       onConfirm(selectedItems);
     }
   }, [selectedItems, onConfirm]);
-  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: multiple,
+      selectable: true,
       multipleSelection: multiple,
       onSelectItem: onSelectItem,
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    }, tableProps),
-    items: items,
-    onSelectItem: onSelectItem,
-    onSelectItems: onSelectItems,
+    }, tableProps)
+    // items={initialItems} // TODO: fix useItems if using this
+    ,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,
-    uploadButton: finalUploadButton,
     types: types
   }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"

package/lib/index.js

@@ -11,10 +11,12 @@ 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 ImageDisplay = require('@panneau/display-image');
 var MediaPlayer = require('@panneau/element-media-player');
-var MediaPreview = require('@panneau/element-media-preview');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var uniqBy = require('lodash/uniqBy');
 var core = require('@panneau/core');
 var Buttons = require('@panneau/element-buttons');
 var Grid = require('@panneau/element-grid');
@@ -22,10 +24,8 @@ var Icon = require('@panneau/element-icon');
 var MediaCard = require('@panneau/element-media-card');
 var Pagination = require('@panneau/element-pagination');
 var Table = require('@panneau/element-table');
-var UploadField = require('@panneau/field-upload');
 var Filters = require('@panneau/filter-filters');
 var data = require('@panneau/data');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 
 /* eslint-disable react/jsx-props-no-spreading */
 var MediasApiContext = /*#__PURE__*/React.createContext(null);
@@ -217,22 +217,18 @@ function MediaFrame(_ref) {
     setShowPlayer(!showPlayer);
   }, [showPlayer, setShowPlayer]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([className, 'position-relative', _defineProperty({}, className, className != null)])
+    className: classNames([styles.mediaFrame, 'position-relative', 'd-flex', 'flex-grow-1', 'w-100', 'mw-100', _defineProperty({}, className, className != null)])
   }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
     value: value,
     width: "100%"
-  }) : /*#__PURE__*/React.createElement(MediaPreview, {
+  }) : /*#__PURE__*/React.createElement(ImageDisplay, {
+    className: "w-100",
     value: value,
-    width: "100%"
-  }, /*#__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",
-    size: "lg"
-  }) : null)));
+    maxWidth: "100%",
+    maxHeight: "100%",
+    withoutZoom: true,
+    onClick: type === 'video' || type === 'audio' ? onClick : null
+  }));
 }
 MediaFrame.propTypes = propTypes$8;
 MediaFrame.defaultProps = defaultProps$8;
@@ -270,6 +266,7 @@ var defaultFields = [{
     }]
   }),
   isList: true,
+  hideWithoutValue: true,
   fields: [{
     id: 'user',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -311,6 +308,7 @@ var defaultFields = [{
     }]
   }),
   isList: true,
+  hideWithoutValue: true,
   fields: [{
     id: 'format',
     label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -698,6 +696,10 @@ var defaultColumns = [{
 ];
 
 var defaultFilters = [{
+  id: 'search',
+  component: 'search',
+  name: 'search'
+}, {
   id: 'types',
   component: 'select',
   name: 'types',
@@ -746,7 +748,8 @@ var defaultFilters = [{
     value: 'document'
   }],
   multiple: true
-},
+}
+
 // {
 //     id: 'author',
 //     component: 'select',
@@ -765,20 +768,14 @@ var defaultFilters = [{
 //     itemLabelPath: 'label',
 //     multiple: true,
 // },
-{
-  id: 'search',
-  component: 'search',
-  name: 'search'
-}];
+];
 
 var _excluded$5 = ["page", "count"],
   _excluded2 = ["types"];
 var propTypes$5 = {
   items: core.PropTypes.medias,
+  extraItems: core.PropTypes.medias,
   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,
@@ -789,18 +786,17 @@ var propTypes$5 = {
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
-  onSelectItem: PropTypes.func,
-  onSelectItems: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+  buttonsClassName: PropTypes.string
 };
 var defaultProps$5 = {
   items: null,
+  extraItems: null,
   types: null,
-  uploadButton: null,
   buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
@@ -821,19 +817,18 @@ var defaultProps$5 = {
   }],
   theme: null,
   tableProps: null,
-  onSelectItem: null,
-  onSelectItems: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
-  className: null
+  className: null,
+  buttonsClassName: null
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
+    extraItems = _ref.extraItems,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
-    uploadButton = _ref.uploadButton,
     buttons = _ref.buttons,
     filters = _ref.filters,
     columns = _ref.columns,
@@ -843,13 +838,12 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     tableProps = _ref.tableProps,
-    onSelectItem = _ref.onSelectItem,
-    onSelectItems = _ref.onSelectItems,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
-    className = _ref.className;
+    className = _ref.className,
+    buttonsClassName = _ref.buttonsClassName;
   var _useState = React.useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
@@ -903,7 +897,7 @@ function MediasBrowser(_ref) {
       onItemsChange(items);
     }
   }, [items, onItemsChange]);
-  var _useState3 = React.useState(initialLayout || 'grid'),
+  var _useState3 = React.useState(initialLayout || 'table'),
     _useState4 = _slicedToArray(_useState3, 2),
     layout = _useState4[0],
     setLayout = _useState4[1];
@@ -927,11 +921,6 @@ function MediasBrowser(_ref) {
   var onCloseMedia = React.useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-  var onChangeMedia = React.useCallback(function () {
-    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    onSelectItems(media);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset, onSelectItems]);
   var onSaveMedia = React.useCallback(function () {
     setCurrentMedia(null);
     onQueryReset();
@@ -963,13 +952,20 @@ function MediasBrowser(_ref) {
     }
     return filters;
   }, [filters, types]);
+  var finalItems = React.useMemo(function () {
+    if (page === 1 && extraItems !== null) {
+      return uniqBy([].concat(_toConsumableArray(extraItems), _toConsumableArray(items || [])), function (it) {
+        return it === null || it === void 0 ? void 0 : it.id;
+      });
+    }
+    return items;
+  }, [items, page, extraItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
-    outline: true,
     onClick: onCloseMedia,
     icon: "arrow-left"
   }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -984,29 +980,22 @@ function MediasBrowser(_ref) {
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
     onClose: onCloseMedia
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
-    items: buttons,
-    className: "mb-2"
-  }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
-    className: "mt-0 pt-0",
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
     onChange: onQueryChange,
     onReset: onQueryReset,
     theme: theme
-  }, uploadButton !== null ? /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    className: "w-auto mb-2",
-    onChange: onChangeMedia,
-    withButton: true,
-    withoutMedia: true
-  }, uploadButton)) : null) : null, filters === null && uploadButton !== null ? /*#__PURE__*/React.createElement("div", {
+  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: buttonsClassName
+  }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
-  }, /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    onChange: onChangeMedia,
-    withButton: true,
-    withoutMedia: true
-  }, uploadButton))) : null, /*#__PURE__*/React.createElement("div", {
+  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    items: buttons,
+    className: buttonsClassName
+  }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
       'justify-content-end': !hasLayouts
@@ -1031,26 +1020,29 @@ function MediasBrowser(_ref) {
     componentProps: {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
-      vertical: true
-    }
-  }, tableProps, {
-    items: items || [],
-    loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
+      vertical: true,
+      onClickDescription: function onClickDescription(it) {
+        onOpenMedia(it);
+      }
+    },
+    onSelectItem: function onSelectItem(it) {
       return onOpenMedia(it);
     }
+  }, tableProps, {
+    items: finalItems || [],
+    loading: loading
   })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
     theme: theme,
     columns: columns,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
-    }, "\u2014")
+    }, "\u2014"),
+    onSelectItem: function onSelectItem(it) {
+      return onOpenMedia(it);
+    }
   }, tableProps, {
-    items: items,
+    items: finalItems,
     loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
-      return onOpenMedia(it);
-    },
     actionsProps: {
       getEditPropsFromItem: function getEditPropsFromItem(it) {
         return {
@@ -1068,13 +1060,12 @@ function MediasBrowser(_ref) {
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["items", "value", "types", "uploadButton", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
+var _excluded$4 = ["items", "value", "types", "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({})),
   types: PropTypes.arrayOf(PropTypes.string),
-  uploadButton: PropTypes.shape({}),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
@@ -1089,7 +1080,6 @@ var defaultProps$4 = {
   items: null,
   value: null,
   types: null,
-  uploadButton: null,
   onClose: null,
   multiple: false,
   withoutButtons: false,
@@ -1100,7 +1090,6 @@ function MediasPicker(_ref) {
   var initialItems = _ref.items,
     initialSelectedItems = _ref.value,
     types = _ref.types,
-    uploadButton = _ref.uploadButton,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
@@ -1109,61 +1098,50 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
+  // For selection only
   var _useState = React.useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
+    currentItems = _useState2[0],
     setItems = _useState2[1];
   var onItemsChange = React.useCallback(function (pageItems) {
     setItems(pageItems);
   }, [setItems]);
-  var disabled = initialItems === null || initialItems.length < 1;
   var _useMediasForm = useMediasForm(),
     currentMedia = _useMediasForm.media;
   var _useItemSelection = hooks.useItemSelection({
-      items: items,
+      currentItems: currentItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
     }),
     onSelectItem = _useItemSelection.onSelectItem,
-    onSelectItems = _useItemSelection.onSelectItems,
     onSelectPage = _useItemSelection.onSelectPage,
     onClearSelected = _useItemSelection.onClearSelected,
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
+  var disabled = currentItems === null || currentItems.length < 1;
   var onConfirmSelection = React.useCallback(function () {
     if (onConfirm !== null) {
       onConfirm(selectedItems);
     }
   }, [selectedItems, onConfirm]);
-  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: multiple,
+      selectable: true,
       multipleSelection: multiple,
       onSelectItem: onSelectItem,
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    }, tableProps),
-    items: items,
-    onSelectItem: onSelectItem,
-    onSelectItems: onSelectItems,
+    }, tableProps)
+    // items={initialItems} // TODO: fix useItems if using this
+    ,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,
-    uploadButton: finalUploadButton,
     types: types
   }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.170",
+    "version": "3.0.172",
     "description": "",
     "keywords": [
         "javascript"
@@ -48,19 +48,18 @@
         "@babel/runtime": "^7.12.5",
         "@panneau/core": "^3.0.169",
         "@panneau/data": "^3.0.169",
+        "@panneau/display-image": "^3.0.172",
         "@panneau/element-button": "^3.0.169",
         "@panneau/element-buttons": "^3.0.169",
         "@panneau/element-form": "^3.0.169",
         "@panneau/element-form-status": "^3.0.169",
-        "@panneau/element-grid": "^3.0.169",
+        "@panneau/element-grid": "^3.0.172",
         "@panneau/element-icon": "^3.0.169",
-        "@panneau/element-media-card": "^3.0.169",
-        "@panneau/element-media-player": "^3.0.169",
-        "@panneau/element-media-preview": "^3.0.169",
+        "@panneau/element-media-card": "^3.0.172",
+        "@panneau/element-media-player": "^3.0.172",
         "@panneau/element-pagination": "^3.0.169",
         "@panneau/element-table": "^3.0.170",
-        "@panneau/field-upload": "^3.0.170",
-        "@panneau/filter-filters": "^3.0.169",
+        "@panneau/filter-filters": "^3.0.171",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -69,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "45ef2fa2498fa7a3cd2bcea9a76ac0410d7e3d7f"
+    "gitHead": "74ada3ded1a27ab2d7008d67790d8431f57c5b0a"
 }