@panneau/medias 3.0.171 → 3.0.173

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';
@@ -21,8 +23,7 @@ import MediaCard from '@panneau/element-media-card';
 import Pagination from '@panneau/element-pagination';
 import Table from '@panneau/element-table';
 import Filters from '@panneau/filter-filters';
-import { useItems, useData, useApi } from '@panneau/data';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { useItemsStore, useData, useApi } from '@panneau/data';
 
 /* eslint-disable react/jsx-props-no-spreading */
 var MediasApiContext = /*#__PURE__*/React.createContext(null);
@@ -59,7 +60,7 @@ function MediasApiProvider(_ref) {
 MediasApiProvider.propTypes = propTypes$9;
 MediasApiProvider.defaultProps = defaultProps$9;
 
-var _excluded$7 = ["items", "pageItems"];
+var _excluded$7 = ["items"];
 var useMedias = function useMedias() {
   var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -70,18 +71,18 @@ var useMedias = function useMedias() {
     var requestedPage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     return api.get(query, requestedPage, count);
   }, [api, query, count]);
-  var _useItems = useItems(_objectSpread({
+  var _useItemsStore = useItemsStore('medias', _objectSpread({
       getPage: page !== null ? getItems : null,
       getItems: page === null ? getItems : null,
-      page: page
+      page: page,
+      count: count,
+      query: query
     }, opts)),
-    items = _useItems.items,
-    pageItems = _useItems.pageItems,
-    request = _objectWithoutProperties(_useItems, _excluded$7);
+    items = _useItemsStore.items,
+    props = _objectWithoutProperties(_useItemsStore, _excluded$7);
   return _objectSpread({
-    medias: page !== null ? pageItems : items,
-    allMedias: items
-  }, request);
+    items: items
+  }, props);
 };
 var useMedias$1 = useMedias;
 
@@ -214,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;
@@ -775,10 +772,8 @@ 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([PanneauPropTypes.medias, PanneauPropTypes.media]),
-  // }),
   buttons: PropTypes$1.buttons,
   filters: PropTypes$1.filters,
   columns: PropTypes$1.tableColumns,
@@ -789,16 +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
+  withStickySelection: PropTypes.bool,
+  className: PropTypes.string,
+  buttonsClassName: PropTypes.string
 };
 var defaultProps$5 = {
   items: null,
+  extraItems: null,
   types: null,
   buttons: null,
   filters: defaultFilters,
@@ -820,16 +816,17 @@ var defaultProps$5 = {
   }],
   theme: null,
   tableProps: null,
-  onSelectItem: null,
-  onSelectItems: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
-  className: null
+  withStickySelection: false,
+  className: null,
+  buttonsClassName: null
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
+    extraItems = _ref.extraItems,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
     buttons = _ref.buttons,
@@ -841,13 +838,13 @@ 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;
+    withStickySelection = _ref.withStickySelection,
+    className = _ref.className,
+    buttonsClassName = _ref.buttonsClassName;
   var _useState = useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
@@ -890,10 +887,16 @@ function MediasBrowser(_ref) {
   var _useMedias = useMedias$1(query, page, count, {
       items: baseItems
     }),
-    items = _useMedias.medias,
-    loading = _useMedias.loading,
-    lastPage = _useMedias.lastPage,
-    total = _useMedias.total;
+    items = _useMedias.items,
+    allItems = _useMedias.allItems,
+    _useMedias$loading = _useMedias.loading,
+    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
+    _useMedias$updateItem = _useMedias.updateItem,
+    updateItem = _useMedias$updateItem === void 0 ? null : _useMedias$updateItem,
+    _useMedias$pagination = _useMedias.pagination,
+    _useMedias$pagination2 = _useMedias$pagination === void 0 ? {} : _useMedias$pagination,
+    lastPage = _useMedias$pagination2.lastPage,
+    total = _useMedias$pagination2.total;
 
   // For picker
   useEffect(function () {
@@ -925,17 +928,10 @@ function MediasBrowser(_ref) {
   var onCloseMedia = useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-
-  // TODO: context for this?
-  useCallback(function () {
-    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    onSelectItems(media);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset, onSelectItems]);
-  var onSaveMedia = useCallback(function () {
+  var onSaveMedia = useCallback(function (item) {
     setCurrentMedia(null);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset]);
+    updateItem(item);
+  }, [setCurrentMedia, updateItem]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -963,13 +959,31 @@ function MediasBrowser(_ref) {
     }
     return filters;
   }, [filters, types]);
+  var finalItems = useMemo(function () {
+    if (withStickySelection && extraItems !== null) {
+      return uniqBy([].concat(_toConsumableArray((extraItems || []).map(function (item) {
+        var _item$id = item.id,
+          itemId = _item$id === void 0 ? null : _item$id;
+        return (allItems || []).find(function () {
+          var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref5$id = _ref5.id,
+            otherId = _ref5$id === void 0 ? null : _ref5$id;
+          return otherId === itemId;
+        }) || item || null;
+      }).filter(function (it) {
+        return it !== null;
+      })), _toConsumableArray(items || [])), function (it) {
+        return it === null || it === void 0 ? void 0 : it.id;
+      });
+    }
+    return items;
+  }, [items, page, allItems, withStickySelection, 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, {
@@ -985,7 +999,6 @@ function MediasBrowser(_ref) {
     onSave: onSaveMedia,
     onClose: onCloseMedia
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
-    className: "mt-0 pt-0",
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
@@ -994,12 +1007,12 @@ function MediasBrowser(_ref) {
     theme: theme
   }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
-    className: "ms-xl-auto"
+    className: buttonsClassName
   }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
   }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
-    className: "ms-xl-auto"
+    className: buttonsClassName
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
@@ -1026,29 +1039,28 @@ function MediasBrowser(_ref) {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
       vertical: true,
-      selectable: onSelectItem !== null,
       onClickDescription: function onClickDescription(it) {
         onOpenMedia(it);
       }
-    }
-  }, tableProps, {
-    items: items || [],
-    loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (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 {
@@ -1104,24 +1116,25 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
+  var _useMediasForm = useMediasForm(),
+    currentMedia = _useMediasForm.media;
+
+  // For selection
   var _useState = useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
+    pageItems = _useState2[0],
     setItems = _useState2[1];
-  var onItemsChange = useCallback(function (pageItems) {
-    setItems(pageItems);
+  var disabled = pageItems === null || pageItems.length < 1;
+  var onItemsChange = useCallback(function (newPageItems) {
+    setItems(newPageItems);
   }, [setItems]);
-  var disabled = initialItems === null || initialItems.length < 1;
-  var _useMediasForm = useMediasForm(),
-    currentMedia = _useMediasForm.media;
   var _useItemSelection = useItemSelection({
-      items: items,
+      items: pageItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
     }),
     onSelectItem = _useItemSelection.onSelectItem,
-    onSelectItems = _useItemSelection.onSelectItems,
     onSelectPage = _useItemSelection.onSelectPage,
     onClearSelected = _useItemSelection.onClearSelected,
     pageSelected = _useItemSelection.pageSelected,
@@ -1132,36 +1145,24 @@ function MediasPicker(_ref) {
       onConfirm(selectedItems);
     }
   }, [selectedItems, onConfirm]);
-
-  // const finalUploadButton = useMemo(
-  //     () => ({
-  //         ...(uploadButton || null),
-  //         ...(types !== null ? { 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,
+    items: initialItems // TODO: fix useItems if actually using this
+    ,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,
-    types: types
+    types: types,
+    extraItems: !multiple && initialSelectedItems !== null ? [initialSelectedItems] : initialSelectedItems
   }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__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

@@ -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');
@@ -24,7 +26,6 @@ var Pagination = require('@panneau/element-pagination');
 var Table = require('@panneau/element-table');
 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);
@@ -61,7 +62,7 @@ function MediasApiProvider(_ref) {
 MediasApiProvider.propTypes = propTypes$9;
 MediasApiProvider.defaultProps = defaultProps$9;
 
-var _excluded$7 = ["items", "pageItems"];
+var _excluded$7 = ["items"];
 var useMedias = function useMedias() {
   var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -72,18 +73,18 @@ var useMedias = function useMedias() {
     var requestedPage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     return api.get(query, requestedPage, count);
   }, [api, query, count]);
-  var _useItems = data.useItems(_objectSpread({
+  var _useItemsStore = data.useItemsStore('medias', _objectSpread({
       getPage: page !== null ? getItems : null,
       getItems: page === null ? getItems : null,
-      page: page
+      page: page,
+      count: count,
+      query: query
     }, opts)),
-    items = _useItems.items,
-    pageItems = _useItems.pageItems,
-    request = _objectWithoutProperties(_useItems, _excluded$7);
+    items = _useItemsStore.items,
+    props = _objectWithoutProperties(_useItemsStore, _excluded$7);
   return _objectSpread({
-    medias: page !== null ? pageItems : items,
-    allMedias: items
-  }, request);
+    items: items
+  }, props);
 };
 var useMedias$1 = useMedias;
 
@@ -216,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;
@@ -777,10 +774,8 @@ 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([PanneauPropTypes.medias, PanneauPropTypes.media]),
-  // }),
   buttons: core.PropTypes.buttons,
   filters: core.PropTypes.filters,
   columns: core.PropTypes.tableColumns,
@@ -791,16 +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
+  withStickySelection: PropTypes.bool,
+  className: PropTypes.string,
+  buttonsClassName: PropTypes.string
 };
 var defaultProps$5 = {
   items: null,
+  extraItems: null,
   types: null,
   buttons: null,
   filters: defaultFilters,
@@ -822,16 +818,17 @@ var defaultProps$5 = {
   }],
   theme: null,
   tableProps: null,
-  onSelectItem: null,
-  onSelectItems: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
-  className: null
+  withStickySelection: false,
+  className: null,
+  buttonsClassName: null
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
+    extraItems = _ref.extraItems,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
     buttons = _ref.buttons,
@@ -843,13 +840,13 @@ 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;
+    withStickySelection = _ref.withStickySelection,
+    className = _ref.className,
+    buttonsClassName = _ref.buttonsClassName;
   var _useState = React.useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
@@ -892,10 +889,16 @@ function MediasBrowser(_ref) {
   var _useMedias = useMedias$1(query, page, count, {
       items: baseItems
     }),
-    items = _useMedias.medias,
-    loading = _useMedias.loading,
-    lastPage = _useMedias.lastPage,
-    total = _useMedias.total;
+    items = _useMedias.items,
+    allItems = _useMedias.allItems,
+    _useMedias$loading = _useMedias.loading,
+    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
+    _useMedias$updateItem = _useMedias.updateItem,
+    updateItem = _useMedias$updateItem === void 0 ? null : _useMedias$updateItem,
+    _useMedias$pagination = _useMedias.pagination,
+    _useMedias$pagination2 = _useMedias$pagination === void 0 ? {} : _useMedias$pagination,
+    lastPage = _useMedias$pagination2.lastPage,
+    total = _useMedias$pagination2.total;
 
   // For picker
   React.useEffect(function () {
@@ -927,17 +930,10 @@ function MediasBrowser(_ref) {
   var onCloseMedia = React.useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-
-  // TODO: context for this?
-  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 () {
+  var onSaveMedia = React.useCallback(function (item) {
     setCurrentMedia(null);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset]);
+    updateItem(item);
+  }, [setCurrentMedia, updateItem]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -965,13 +961,31 @@ function MediasBrowser(_ref) {
     }
     return filters;
   }, [filters, types]);
+  var finalItems = React.useMemo(function () {
+    if (withStickySelection && extraItems !== null) {
+      return uniqBy([].concat(_toConsumableArray((extraItems || []).map(function (item) {
+        var _item$id = item.id,
+          itemId = _item$id === void 0 ? null : _item$id;
+        return (allItems || []).find(function () {
+          var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref5$id = _ref5.id,
+            otherId = _ref5$id === void 0 ? null : _ref5$id;
+          return otherId === itemId;
+        }) || item || null;
+      }).filter(function (it) {
+        return it !== null;
+      })), _toConsumableArray(items || [])), function (it) {
+        return it === null || it === void 0 ? void 0 : it.id;
+      });
+    }
+    return items;
+  }, [items, page, allItems, withStickySelection, 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, {
@@ -987,7 +1001,6 @@ function MediasBrowser(_ref) {
     onSave: onSaveMedia,
     onClose: onCloseMedia
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
-    className: "mt-0 pt-0",
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
@@ -996,12 +1009,12 @@ function MediasBrowser(_ref) {
     theme: theme
   }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
-    className: "ms-xl-auto"
+    className: buttonsClassName
   }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
   }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
-    className: "ms-xl-auto"
+    className: buttonsClassName
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
@@ -1028,29 +1041,28 @@ function MediasBrowser(_ref) {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
       vertical: true,
-      selectable: onSelectItem !== null,
       onClickDescription: function onClickDescription(it) {
         onOpenMedia(it);
       }
-    }
-  }, tableProps, {
-    items: items || [],
-    loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (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 {
@@ -1106,24 +1118,25 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
+  var _useMediasForm = useMediasForm(),
+    currentMedia = _useMediasForm.media;
+
+  // For selection
   var _useState = React.useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
+    pageItems = _useState2[0],
     setItems = _useState2[1];
-  var onItemsChange = React.useCallback(function (pageItems) {
-    setItems(pageItems);
+  var disabled = pageItems === null || pageItems.length < 1;
+  var onItemsChange = React.useCallback(function (newPageItems) {
+    setItems(newPageItems);
   }, [setItems]);
-  var disabled = initialItems === null || initialItems.length < 1;
-  var _useMediasForm = useMediasForm(),
-    currentMedia = _useMediasForm.media;
   var _useItemSelection = hooks.useItemSelection({
-      items: items,
+      items: pageItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
     }),
     onSelectItem = _useItemSelection.onSelectItem,
-    onSelectItems = _useItemSelection.onSelectItems,
     onSelectPage = _useItemSelection.onSelectPage,
     onClearSelected = _useItemSelection.onClearSelected,
     pageSelected = _useItemSelection.pageSelected,
@@ -1134,36 +1147,24 @@ function MediasPicker(_ref) {
       onConfirm(selectedItems);
     }
   }, [selectedItems, onConfirm]);
-
-  // const finalUploadButton = useMemo(
-  //     () => ({
-  //         ...(uploadButton || null),
-  //         ...(types !== null ? { 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,
+    items: initialItems // TODO: fix useItems if actually using this
+    ,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,
-    types: types
+    types: types,
+    extraItems: !multiple && initialSelectedItems !== null ? [initialSelectedItems] : initialSelectedItems
   }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__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.171",
+    "version": "3.0.173",
     "description": "",
     "keywords": [
         "javascript"
@@ -47,16 +47,16 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@panneau/core": "^3.0.169",
-        "@panneau/data": "^3.0.169",
+        "@panneau/data": "^3.0.173",
+        "@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.171",
-        "@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/filter-filters": "^3.0.171",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "38e041e7659ef78ddbec9da1232c1456366c2040"
+    "gitHead": "29037e4f0ed74d81586442a76daffcfb6d062200"
 }