@panneau/medias 3.0.172 → 3.0.174

package/es/index.js

@@ -23,7 +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 { useItemsStore, useData, useApi } from '@panneau/data';
 
 /* eslint-disable react/jsx-props-no-spreading */
 var MediasApiContext = /*#__PURE__*/React.createContext(null);
@@ -60,60 +60,42 @@ 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;
   var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var api = useMediasApi();
+  var trashed = useMemo(function () {
+    var _ref = opts || {},
+      trashedOpt = _ref.trashed;
+    return trashedOpt;
+  }, [opts]);
+  var finalQuery = useMemo(function () {
+    return _objectSpread(_objectSpread({}, query), {}, {
+      trashed: trashed
+    });
+  }, [query, trashed]);
   var getItems = useCallback(function () {
     var requestedPage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    return api.get(query, requestedPage, count);
-  }, [api, query, count]);
-  var _useItems = useItems(_objectSpread({
+    return trashed ? api.getTrashed(query, requestedPage, count) : api.get(query, requestedPage, count);
+  }, [api, query, count, trashed]);
+  var _useItemsStore = useItemsStore('medias', _objectSpread({
       getPage: page !== null ? getItems : null,
       getItems: page === null ? getItems : null,
-      page: page
+      page: page,
+      count: count,
+      query: finalQuery
     }, 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;
 
-var useMediasRecent = function useMediasRecent(opts) {
-  var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'media-gallery-recent-searches';
-  var addSearchValue = useCallback(function (value) {
-    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined' && value) {
-      var recent = window.localStorage.getItem(key) || null;
-      var current = recent !== null ? JSON.parse(recent || '[]') : [];
-      var encoded = JSON.stringify([value].concat(_toConsumableArray(current)));
-      window.localStorage.setItem(key, encoded);
-      return true;
-    }
-    return false;
-  }, [key]);
-  var getSearchValues = useCallback(function () {
-    var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
-    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {
-      var recent = window.localStorage.getItem(key) || null;
-      var current = recent !== null ? JSON.parse(recent || '[]') : [];
-      return current.slice(0, count);
-    }
-    return [];
-  }, [key]);
-  return {
-    addSearchValue: addSearchValue,
-    getSearchValues: getSearchValues
-  };
-};
-var useMediasRecent$1 = useMediasRecent;
-
 var _excluded$6 = ["data"];
 var useMedia = function useMedia(id, opts) {
   var api = useMediasApi();
@@ -132,19 +114,19 @@ var useMedia$1 = useMedia;
 var useMediaCreate = function useMediaCreate() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
+    creating = _useState2[0],
+    setCreating = _useState2[1];
   var api = useMediasApi();
   var create = useCallback(function (data) {
-    setLoading(true);
+    setCreating(true);
     return api.create(data).then(function (response) {
-      setLoading(false);
+      setCreating(false);
       return response;
     });
-  }, [api, setLoading]);
+  }, [api, setCreating]);
   return {
     create: create,
-    loading: loading
+    creating: creating
   };
 };
 var useMediaCreate$1 = useMediaCreate;
@@ -152,41 +134,62 @@ var useMediaCreate$1 = useMediaCreate;
 var useMediaUpdate = function useMediaUpdate() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
+    updating = _useState2[0],
+    setUpdating = _useState2[1];
   var api = useMediasApi();
   var update = useCallback(function (id, data) {
-    setLoading(true);
+    setUpdating(true);
     return api.update(id, data).then(function (response) {
-      setLoading(false);
+      setUpdating(false);
       return response;
     });
-  }, [api, setLoading]);
+  }, [api, setUpdating]);
   return {
     update: update,
-    loading: loading
+    updating: updating
   };
 };
 var useMediaUpdate$1 = useMediaUpdate;
 
-var useMediaDestroy = function useMediaDestroy() {
+var useMediaDelete = function useMediaDelete() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
+    deleting = _useState2[0],
+    setDeleting = _useState2[1];
   var api = useMediasApi();
-  var destroy = useCallback(function (id, data) {
-    setLoading(true);
+  var mediaDelete = useCallback(function (id, data) {
+    setDeleting(true);
     return api["delete"](id, data).then(function (response) {
-      setLoading(false);
+      setDeleting(false);
       return response;
     });
-  }, [api, setLoading]);
+  }, [api, setDeleting]);
   return {
-    destroy: destroy,
-    loading: loading
+    mediaDelete: mediaDelete,
+    deleting: deleting
   };
 };
+var useMediaDelete$1 = useMediaDelete;
+
+var useMediaTrash = function useMediaTrash() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    trashing = _useState2[0],
+    setTrashing = _useState2[1];
+  var api = useMediasApi();
+  var mediaTrash = useCallback(function (id, data) {
+    setTrashing(true);
+    return api.trash(id, data).then(function (response) {
+      setTrashing(false);
+      return response;
+    });
+  }, [api, setTrashing]);
+  return {
+    mediaTrash: mediaTrash,
+    trashing: trashing
+  };
+};
+var useMediaTrash$1 = useMediaTrash;
 
 var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
 
@@ -381,6 +384,7 @@ var propTypes$7 = {
   onSave: PropTypes.func,
   onDelete: PropTypes.func,
   onClose: PropTypes.func,
+  withTrash: PropTypes.bool,
   className: PropTypes.string,
   children: PropTypes.node
 };
@@ -391,6 +395,7 @@ var defaultProps$7 = {
   onSave: null,
   onDelete: null,
   onClose: null,
+  withTrash: false,
   className: null,
   children: null
 };
@@ -401,25 +406,31 @@ function MediaForm(_ref) {
     onSave = _ref.onSave,
     onDelete = _ref.onDelete,
     onClose = _ref.onClose,
+    withTrash = _ref.withTrash,
     className = _ref.className,
     children = _ref.children;
   var FieldsComponent = useFieldComponent('fields');
   var _useMediaUpdate = useMediaUpdate$1(),
     update = _useMediaUpdate.update,
-    updating = _useMediaUpdate.loading;
-  var _useMediaDestroy = useMediaDestroy(),
-    destroy = _useMediaDestroy.destroy,
-    destroying = _useMediaDestroy.loading;
+    updating = _useMediaUpdate.updating;
+  var _useMediaTrash = useMediaTrash$1(),
+    mediaTrash = _useMediaTrash.mediaTrash,
+    trashing = _useMediaTrash.trashing;
+  var _useMediaDelete = useMediaDelete$1(),
+    mediaDelete = _useMediaDelete.mediaDelete,
+    deleting = _useMediaDelete.deleting;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     changed = _useState2[0],
     setChanged = _useState2[1];
-  var disabled = updating || destroying || initialValue === null;
+  var disabled = updating || deleting || trashing || initialValue === null;
   var _ref2 = initialValue || {},
     _ref2$name = _ref2.name,
     name = _ref2$name === void 0 ? null : _ref2$name,
     _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? null : _ref2$type;
+    type = _ref2$type === void 0 ? null : _ref2$type,
+    _ref2$deletedAt = _ref2.deletedAt,
+    deletedAt = _ref2$deletedAt === void 0 ? null : _ref2$deletedAt;
   var onChangeMedia = useCallback(function (newValue) {
     if (onChange !== null) {
       onChange(newValue);
@@ -433,20 +444,32 @@ function MediaForm(_ref) {
     setChanged(false);
   }, [onChange, setChanged]);
   var onDeleteMedia = useCallback(function () {
-    // Destroy
     var _ref3 = initialValue || {},
       _ref3$id = _ref3.id,
       id = _ref3$id === void 0 ? null : _ref3$id;
-    destroy(id, initialValue).then(function () {
-      if (onDelete !== null) {
-        onDelete();
-      }
-      setChanged(false);
-      if (onClose !== null) {
-        onClose();
-      }
-    });
-  }, [initialValue, destroy, destroying, setChanged]);
+    if (withTrash && deletedAt !== null) {
+      mediaTrash(id, initialValue).then(function () {
+        if (onDelete !== null) {
+          onDelete();
+        }
+        setChanged(false);
+        if (onClose !== null) {
+          onClose();
+        }
+      });
+    } else {
+      // Destroy
+      mediaDelete(id, initialValue).then(function () {
+        if (onDelete !== null) {
+          onDelete();
+        }
+        setChanged(false);
+        if (onClose !== null) {
+          onClose();
+        }
+      });
+    }
+  }, [initialValue, mediaDelete, mediaTrash, deletedAt, setChanged, withTrash]);
   var postForm = useCallback(function (action, data) {
     return initialValue !== null ? update(initialValue.id, data) : new Promise();
   }, [initialValue, update]);
@@ -477,9 +500,17 @@ function MediaForm(_ref) {
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
     className: "me-2 mb-1 mt-1",
     theme: "danger",
+    icon: withTrash && deletedAt !== null ? 'trash-fill' : 'trash',
+    iconPosition: "right",
     onClick: onDeleteMedia,
-    disabled: destroying
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    disabled: deleting || trashing
+  }, withTrash && deletedAt === null ? /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "PSlT7H",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Trash"
+    }]
+  }) : /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "Bhu3B2",
     defaultMessage: [{
       "type": 0,
@@ -488,8 +519,10 @@ function MediaForm(_ref) {
   })), onSave !== null ? /*#__PURE__*/React.createElement(Button, {
     className: "mb-1 mt-1",
     theme: "primary",
+    icon: changed ? 'check-all' : 'check',
+    iconPosition: "right",
     onClick: onSubmit,
-    disabled: !changed || updating || destroying
+    disabled: !changed || updating || deleting
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "R1HYj0",
     defaultMessage: [{
@@ -680,7 +713,7 @@ var defaultColumns = [{
       "value": "Actions"
     }]
   }),
-  actions: ['edit']
+  actions: ['edit', 'delete']
   // component: ItemActions,
   // label: 'Edit',
   // url: '/edit/1',
@@ -769,7 +802,7 @@ var defaultFilters = [{
 ];
 
 var _excluded$5 = ["page", "count"],
-  _excluded2 = ["types"];
+  _excluded2 = ["types", "trashed"];
 var propTypes$5 = {
   items: PropTypes$1.medias,
   extraItems: PropTypes$1.medias,
@@ -788,8 +821,11 @@ var propTypes$5 = {
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
+  withTrash: PropTypes.bool,
+  withStickySelection: PropTypes.bool,
   className: PropTypes.string,
-  buttonsClassName: PropTypes.string
+  buttonsClassName: PropTypes.string,
+  formChildren: PropTypes.node
 };
 var defaultProps$5 = {
   items: null,
@@ -819,8 +855,11 @@ var defaultProps$5 = {
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
+  withTrash: false,
+  withStickySelection: false,
   className: null,
-  buttonsClassName: null
+  buttonsClassName: null,
+  formChildren: null
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
@@ -840,8 +879,11 @@ function MediasBrowser(_ref) {
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
+    withTrash = _ref.withTrash,
+    withStickySelection = _ref.withStickySelection,
     className = _ref.className,
-    buttonsClassName = _ref.buttonsClassName;
+    buttonsClassName = _ref.buttonsClassName,
+    formChildren = _ref.formChildren;
   var _useState = useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
@@ -880,14 +922,35 @@ function MediasBrowser(_ref) {
   // eslint-disable-next-line no-unused-vars
   var _ref3 = query || {};
     _ref3.types;
+    _ref3.trashed;
     var queryWithoutTypes = _objectWithoutProperties(_ref3, _excluded2);
+  var _useMediaTrash = useMediaTrash$1(),
+    mediaTrash = _useMediaTrash.mediaTrash,
+    trashing = _useMediaTrash.trashing;
+  var _useMediaDelete = useMediaDelete$1(),
+    mediaDelete = _useMediaDelete.mediaDelete,
+    deleting = _useMediaDelete.deleting;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showTrashed = _useState4[0],
+    setShowTrashed = _useState4[1];
+  var onClickTrash = useCallback(function () {
+    setShowTrashed(!showTrashed);
+  }, [showTrashed, setShowTrashed]);
   var _useMedias = useMedias$1(query, page, count, {
-      items: baseItems
+      items: baseItems,
+      trashed: showTrashed
     }),
-    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 () {
@@ -895,10 +958,10 @@ function MediasBrowser(_ref) {
       onItemsChange(items);
     }
   }, [items, onItemsChange]);
-  var _useState3 = useState(initialLayout || 'table'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    layout = _useState4[0],
-    setLayout = _useState4[1];
+  var _useState5 = useState(initialLayout || 'table'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    layout = _useState6[0],
+    setLayout = _useState6[1];
   var hasLayouts = useMemo(function () {
     return layouts !== null && layouts.length > 1;
   }, [layouts]);
@@ -919,10 +982,10 @@ function MediasBrowser(_ref) {
   var onCloseMedia = useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-  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,
@@ -938,8 +1001,17 @@ function MediasBrowser(_ref) {
     alwaysShowButtons: true
   });
   var finalFilters = useMemo(function () {
-    if (types !== null && filters !== null) {
-      return (filters || []).map(function (filter) {
+    var partialFilters = withTrash ? (filters || []).concat([{
+      name: 'trashed',
+      component: 'button',
+      theme: showTrashed ? 'danger' : 'secondary',
+      outline: !showTrashed,
+      activeTheme: 'danger',
+      icon: showTrashed ? 'trash-fill' : 'trash',
+      onClick: onClickTrash
+    }]) : filters;
+    if (types !== null && partialFilters !== null) {
+      return (partialFilters || []).map(function (filter) {
         var _ref4 = filter || {},
           _ref4$id = _ref4.id,
           id = _ref4$id === void 0 ? null : _ref4$id;
@@ -948,16 +1020,47 @@ function MediasBrowser(_ref) {
         }) : filter;
       });
     }
-    return filters;
-  }, [filters, types]);
+    return partialFilters;
+  }, [filters, types, withTrash, showTrashed, onClickTrash]);
+  var finalColumns = useMemo(function () {
+    return withTrash && showTrashed ? (columns || []).map(function (column) {
+      var _ref5 = column || {},
+        _ref5$id = _ref5.id,
+        columnId = _ref5$id === void 0 ? null : _ref5$id;
+      if (columnId === 'created_at') {
+        return _objectSpread(_objectSpread({}, column), {}, {
+          path: 'deleted_at',
+          label: /*#__PURE__*/React.createElement(FormattedMessage, {
+            id: "uds4wJ",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Deleted at"
+            }]
+          })
+        });
+      }
+      return column;
+    }) : columns;
+  }, [columns, withTrash, showTrashed]);
   var finalItems = useMemo(function () {
-    if (page === 1 && extraItems !== null) {
-      return uniqBy([].concat(_toConsumableArray(extraItems), _toConsumableArray(items || [])), function (it) {
+    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 _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref6$id = _ref6.id,
+            otherId = _ref6$id === void 0 ? null : _ref6$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, extraItems]);
+  }, [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", {
@@ -977,8 +1080,9 @@ function MediasBrowser(_ref) {
     fields: fields,
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
-    onClose: onCloseMedia
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
+    onClose: onCloseMedia,
+    withTrash: withTrash
+  }, formChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
@@ -990,10 +1094,10 @@ function MediasBrowser(_ref) {
     className: buttonsClassName
   }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
-  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+  }, /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
     className: buttonsClassName
-  }) : null) : null, /*#__PURE__*/React.createElement("div", {
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
       'justify-content-end': !hasLayouts
@@ -1031,7 +1135,7 @@ function MediasBrowser(_ref) {
     loading: loading
   })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
     theme: theme,
-    columns: columns,
+    columns: finalColumns,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
     }, "\u2014"),
@@ -1042,6 +1146,19 @@ function MediasBrowser(_ref) {
     items: finalItems,
     loading: loading,
     actionsProps: {
+      getDeletePropsFromItem: function getDeletePropsFromItem() {
+        var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref7$id = _ref7.id,
+          id = _ref7$id === void 0 ? null : _ref7$id;
+        return {
+          href: null,
+          onClick: function onClick() {
+            return showTrashed ? mediaDelete(id) : mediaTrash(id);
+          },
+          disabled: trashing || deleting,
+          icon: showTrashed ? 'trash-fill' : 'trash'
+        };
+      },
       getEditPropsFromItem: function getEditPropsFromItem(it) {
         return {
           href: null,
@@ -1096,18 +1213,20 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  // For selection only
+  var _useMediasForm = useMediasForm(),
+    currentMedia = _useMediasForm.media;
+
+  // For selection
   var _useState = useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    currentItems = _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 _useMediasForm = useMediasForm(),
-    currentMedia = _useMediasForm.media;
   var _useItemSelection = useItemSelection({
-      currentItems: currentItems,
+      items: pageItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
@@ -1118,7 +1237,6 @@ function MediasPicker(_ref) {
     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);
@@ -1134,13 +1252,14 @@ function MediasPicker(_ref) {
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    }, tableProps)
-    // items={initialItems} // TODO: fix useItems if using this
+    }, tableProps),
+    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", {
@@ -1386,4 +1505,4 @@ function MediasResourcePicker(_ref) {
 MediasResourcePicker.propTypes = propTypes;
 MediasResourcePicker.defaultProps = defaultProps;
 
-export { MediaForm, MediasApiProvider, MediasBrowser, MediasBrowserContainer, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, defaultFields as fields, defaultFilters as filters, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi, useMediasRecent$1 as useMediasRecentSearches };
+export { MediaForm, MediasApiProvider, MediasBrowser, MediasBrowserContainer, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, defaultFields as fields, defaultFilters as filters, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaDelete$1 as useMediaDelete, useMediaTrash$1 as useMediaTrash, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi };

package/lib/index.js

@@ -62,60 +62,42 @@ 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;
   var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var api = useMediasApi();
+  var trashed = React.useMemo(function () {
+    var _ref = opts || {},
+      trashedOpt = _ref.trashed;
+    return trashedOpt;
+  }, [opts]);
+  var finalQuery = React.useMemo(function () {
+    return _objectSpread(_objectSpread({}, query), {}, {
+      trashed: trashed
+    });
+  }, [query, trashed]);
   var getItems = React.useCallback(function () {
     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({
+    return trashed ? api.getTrashed(query, requestedPage, count) : api.get(query, requestedPage, count);
+  }, [api, query, count, trashed]);
+  var _useItemsStore = data.useItemsStore('medias', _objectSpread({
       getPage: page !== null ? getItems : null,
       getItems: page === null ? getItems : null,
-      page: page
+      page: page,
+      count: count,
+      query: finalQuery
     }, 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;
 
-var useMediasRecent = function useMediasRecent(opts) {
-  var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'media-gallery-recent-searches';
-  var addSearchValue = React.useCallback(function (value) {
-    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined' && value) {
-      var recent = window.localStorage.getItem(key) || null;
-      var current = recent !== null ? JSON.parse(recent || '[]') : [];
-      var encoded = JSON.stringify([value].concat(_toConsumableArray(current)));
-      window.localStorage.setItem(key, encoded);
-      return true;
-    }
-    return false;
-  }, [key]);
-  var getSearchValues = React.useCallback(function () {
-    var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
-    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {
-      var recent = window.localStorage.getItem(key) || null;
-      var current = recent !== null ? JSON.parse(recent || '[]') : [];
-      return current.slice(0, count);
-    }
-    return [];
-  }, [key]);
-  return {
-    addSearchValue: addSearchValue,
-    getSearchValues: getSearchValues
-  };
-};
-var useMediasRecent$1 = useMediasRecent;
-
 var _excluded$6 = ["data"];
 var useMedia = function useMedia(id, opts) {
   var api = useMediasApi();
@@ -134,19 +116,19 @@ var useMedia$1 = useMedia;
 var useMediaCreate = function useMediaCreate() {
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
+    creating = _useState2[0],
+    setCreating = _useState2[1];
   var api = useMediasApi();
   var create = React.useCallback(function (data) {
-    setLoading(true);
+    setCreating(true);
     return api.create(data).then(function (response) {
-      setLoading(false);
+      setCreating(false);
       return response;
     });
-  }, [api, setLoading]);
+  }, [api, setCreating]);
   return {
     create: create,
-    loading: loading
+    creating: creating
   };
 };
 var useMediaCreate$1 = useMediaCreate;
@@ -154,41 +136,62 @@ var useMediaCreate$1 = useMediaCreate;
 var useMediaUpdate = function useMediaUpdate() {
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
+    updating = _useState2[0],
+    setUpdating = _useState2[1];
   var api = useMediasApi();
   var update = React.useCallback(function (id, data) {
-    setLoading(true);
+    setUpdating(true);
     return api.update(id, data).then(function (response) {
-      setLoading(false);
+      setUpdating(false);
       return response;
     });
-  }, [api, setLoading]);
+  }, [api, setUpdating]);
   return {
     update: update,
-    loading: loading
+    updating: updating
   };
 };
 var useMediaUpdate$1 = useMediaUpdate;
 
-var useMediaDestroy = function useMediaDestroy() {
+var useMediaDelete = function useMediaDelete() {
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
+    deleting = _useState2[0],
+    setDeleting = _useState2[1];
   var api = useMediasApi();
-  var destroy = React.useCallback(function (id, data) {
-    setLoading(true);
+  var mediaDelete = React.useCallback(function (id, data) {
+    setDeleting(true);
     return api["delete"](id, data).then(function (response) {
-      setLoading(false);
+      setDeleting(false);
       return response;
     });
-  }, [api, setLoading]);
+  }, [api, setDeleting]);
   return {
-    destroy: destroy,
-    loading: loading
+    mediaDelete: mediaDelete,
+    deleting: deleting
   };
 };
+var useMediaDelete$1 = useMediaDelete;
+
+var useMediaTrash = function useMediaTrash() {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    trashing = _useState2[0],
+    setTrashing = _useState2[1];
+  var api = useMediasApi();
+  var mediaTrash = React.useCallback(function (id, data) {
+    setTrashing(true);
+    return api.trash(id, data).then(function (response) {
+      setTrashing(false);
+      return response;
+    });
+  }, [api, setTrashing]);
+  return {
+    mediaTrash: mediaTrash,
+    trashing: trashing
+  };
+};
+var useMediaTrash$1 = useMediaTrash;
 
 var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
 
@@ -383,6 +386,7 @@ var propTypes$7 = {
   onSave: PropTypes.func,
   onDelete: PropTypes.func,
   onClose: PropTypes.func,
+  withTrash: PropTypes.bool,
   className: PropTypes.string,
   children: PropTypes.node
 };
@@ -393,6 +397,7 @@ var defaultProps$7 = {
   onSave: null,
   onDelete: null,
   onClose: null,
+  withTrash: false,
   className: null,
   children: null
 };
@@ -403,25 +408,31 @@ function MediaForm(_ref) {
     onSave = _ref.onSave,
     onDelete = _ref.onDelete,
     onClose = _ref.onClose,
+    withTrash = _ref.withTrash,
     className = _ref.className,
     children = _ref.children;
   var FieldsComponent = contexts.useFieldComponent('fields');
   var _useMediaUpdate = useMediaUpdate$1(),
     update = _useMediaUpdate.update,
-    updating = _useMediaUpdate.loading;
-  var _useMediaDestroy = useMediaDestroy(),
-    destroy = _useMediaDestroy.destroy,
-    destroying = _useMediaDestroy.loading;
+    updating = _useMediaUpdate.updating;
+  var _useMediaTrash = useMediaTrash$1(),
+    mediaTrash = _useMediaTrash.mediaTrash,
+    trashing = _useMediaTrash.trashing;
+  var _useMediaDelete = useMediaDelete$1(),
+    mediaDelete = _useMediaDelete.mediaDelete,
+    deleting = _useMediaDelete.deleting;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     changed = _useState2[0],
     setChanged = _useState2[1];
-  var disabled = updating || destroying || initialValue === null;
+  var disabled = updating || deleting || trashing || initialValue === null;
   var _ref2 = initialValue || {},
     _ref2$name = _ref2.name,
     name = _ref2$name === void 0 ? null : _ref2$name,
     _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? null : _ref2$type;
+    type = _ref2$type === void 0 ? null : _ref2$type,
+    _ref2$deletedAt = _ref2.deletedAt,
+    deletedAt = _ref2$deletedAt === void 0 ? null : _ref2$deletedAt;
   var onChangeMedia = React.useCallback(function (newValue) {
     if (onChange !== null) {
       onChange(newValue);
@@ -435,20 +446,32 @@ function MediaForm(_ref) {
     setChanged(false);
   }, [onChange, setChanged]);
   var onDeleteMedia = React.useCallback(function () {
-    // Destroy
     var _ref3 = initialValue || {},
       _ref3$id = _ref3.id,
       id = _ref3$id === void 0 ? null : _ref3$id;
-    destroy(id, initialValue).then(function () {
-      if (onDelete !== null) {
-        onDelete();
-      }
-      setChanged(false);
-      if (onClose !== null) {
-        onClose();
-      }
-    });
-  }, [initialValue, destroy, destroying, setChanged]);
+    if (withTrash && deletedAt !== null) {
+      mediaTrash(id, initialValue).then(function () {
+        if (onDelete !== null) {
+          onDelete();
+        }
+        setChanged(false);
+        if (onClose !== null) {
+          onClose();
+        }
+      });
+    } else {
+      // Destroy
+      mediaDelete(id, initialValue).then(function () {
+        if (onDelete !== null) {
+          onDelete();
+        }
+        setChanged(false);
+        if (onClose !== null) {
+          onClose();
+        }
+      });
+    }
+  }, [initialValue, mediaDelete, mediaTrash, deletedAt, setChanged, withTrash]);
   var postForm = React.useCallback(function (action, data) {
     return initialValue !== null ? update(initialValue.id, data) : new Promise();
   }, [initialValue, update]);
@@ -479,9 +502,17 @@ function MediaForm(_ref) {
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
     className: "me-2 mb-1 mt-1",
     theme: "danger",
+    icon: withTrash && deletedAt !== null ? 'trash-fill' : 'trash',
+    iconPosition: "right",
     onClick: onDeleteMedia,
-    disabled: destroying
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    disabled: deleting || trashing
+  }, withTrash && deletedAt === null ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "PSlT7H",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Trash"
+    }]
+  }) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "Bhu3B2",
     defaultMessage: [{
       "type": 0,
@@ -490,8 +521,10 @@ function MediaForm(_ref) {
   })), onSave !== null ? /*#__PURE__*/React.createElement(Button, {
     className: "mb-1 mt-1",
     theme: "primary",
+    icon: changed ? 'check-all' : 'check',
+    iconPosition: "right",
     onClick: onSubmit,
-    disabled: !changed || updating || destroying
+    disabled: !changed || updating || deleting
   }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "R1HYj0",
     defaultMessage: [{
@@ -682,7 +715,7 @@ var defaultColumns = [{
       "value": "Actions"
     }]
   }),
-  actions: ['edit']
+  actions: ['edit', 'delete']
   // component: ItemActions,
   // label: 'Edit',
   // url: '/edit/1',
@@ -771,7 +804,7 @@ var defaultFilters = [{
 ];
 
 var _excluded$5 = ["page", "count"],
-  _excluded2 = ["types"];
+  _excluded2 = ["types", "trashed"];
 var propTypes$5 = {
   items: core.PropTypes.medias,
   extraItems: core.PropTypes.medias,
@@ -790,8 +823,11 @@ var propTypes$5 = {
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
+  withTrash: PropTypes.bool,
+  withStickySelection: PropTypes.bool,
   className: PropTypes.string,
-  buttonsClassName: PropTypes.string
+  buttonsClassName: PropTypes.string,
+  formChildren: PropTypes.node
 };
 var defaultProps$5 = {
   items: null,
@@ -821,8 +857,11 @@ var defaultProps$5 = {
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
+  withTrash: false,
+  withStickySelection: false,
   className: null,
-  buttonsClassName: null
+  buttonsClassName: null,
+  formChildren: null
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
@@ -842,8 +881,11 @@ function MediasBrowser(_ref) {
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
+    withTrash = _ref.withTrash,
+    withStickySelection = _ref.withStickySelection,
     className = _ref.className,
-    buttonsClassName = _ref.buttonsClassName;
+    buttonsClassName = _ref.buttonsClassName,
+    formChildren = _ref.formChildren;
   var _useState = React.useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
@@ -882,14 +924,35 @@ function MediasBrowser(_ref) {
   // eslint-disable-next-line no-unused-vars
   var _ref3 = query || {};
     _ref3.types;
+    _ref3.trashed;
     var queryWithoutTypes = _objectWithoutProperties(_ref3, _excluded2);
+  var _useMediaTrash = useMediaTrash$1(),
+    mediaTrash = _useMediaTrash.mediaTrash,
+    trashing = _useMediaTrash.trashing;
+  var _useMediaDelete = useMediaDelete$1(),
+    mediaDelete = _useMediaDelete.mediaDelete,
+    deleting = _useMediaDelete.deleting;
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showTrashed = _useState4[0],
+    setShowTrashed = _useState4[1];
+  var onClickTrash = React.useCallback(function () {
+    setShowTrashed(!showTrashed);
+  }, [showTrashed, setShowTrashed]);
   var _useMedias = useMedias$1(query, page, count, {
-      items: baseItems
+      items: baseItems,
+      trashed: showTrashed
     }),
-    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 () {
@@ -897,10 +960,10 @@ function MediasBrowser(_ref) {
       onItemsChange(items);
     }
   }, [items, onItemsChange]);
-  var _useState3 = React.useState(initialLayout || 'table'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    layout = _useState4[0],
-    setLayout = _useState4[1];
+  var _useState5 = React.useState(initialLayout || 'table'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    layout = _useState6[0],
+    setLayout = _useState6[1];
   var hasLayouts = React.useMemo(function () {
     return layouts !== null && layouts.length > 1;
   }, [layouts]);
@@ -921,10 +984,10 @@ function MediasBrowser(_ref) {
   var onCloseMedia = React.useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-  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,
@@ -940,8 +1003,17 @@ function MediasBrowser(_ref) {
     alwaysShowButtons: true
   });
   var finalFilters = React.useMemo(function () {
-    if (types !== null && filters !== null) {
-      return (filters || []).map(function (filter) {
+    var partialFilters = withTrash ? (filters || []).concat([{
+      name: 'trashed',
+      component: 'button',
+      theme: showTrashed ? 'danger' : 'secondary',
+      outline: !showTrashed,
+      activeTheme: 'danger',
+      icon: showTrashed ? 'trash-fill' : 'trash',
+      onClick: onClickTrash
+    }]) : filters;
+    if (types !== null && partialFilters !== null) {
+      return (partialFilters || []).map(function (filter) {
         var _ref4 = filter || {},
           _ref4$id = _ref4.id,
           id = _ref4$id === void 0 ? null : _ref4$id;
@@ -950,16 +1022,47 @@ function MediasBrowser(_ref) {
         }) : filter;
       });
     }
-    return filters;
-  }, [filters, types]);
+    return partialFilters;
+  }, [filters, types, withTrash, showTrashed, onClickTrash]);
+  var finalColumns = React.useMemo(function () {
+    return withTrash && showTrashed ? (columns || []).map(function (column) {
+      var _ref5 = column || {},
+        _ref5$id = _ref5.id,
+        columnId = _ref5$id === void 0 ? null : _ref5$id;
+      if (columnId === 'created_at') {
+        return _objectSpread(_objectSpread({}, column), {}, {
+          path: 'deleted_at',
+          label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+            id: "uds4wJ",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Deleted at"
+            }]
+          })
+        });
+      }
+      return column;
+    }) : columns;
+  }, [columns, withTrash, showTrashed]);
   var finalItems = React.useMemo(function () {
-    if (page === 1 && extraItems !== null) {
-      return uniqBy([].concat(_toConsumableArray(extraItems), _toConsumableArray(items || [])), function (it) {
+    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 _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref6$id = _ref6.id,
+            otherId = _ref6$id === void 0 ? null : _ref6$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, extraItems]);
+  }, [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", {
@@ -979,8 +1082,9 @@ function MediasBrowser(_ref) {
     fields: fields,
     onChange: setCurrentMedia,
     onSave: onSaveMedia,
-    onClose: onCloseMedia
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
+    onClose: onCloseMedia,
+    withTrash: withTrash
+  }, formChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
@@ -992,10 +1096,10 @@ function MediasBrowser(_ref) {
     className: buttonsClassName
   }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
-  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+  }, /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
     className: buttonsClassName
-  }) : null) : null, /*#__PURE__*/React.createElement("div", {
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
       'justify-content-end': !hasLayouts
@@ -1033,7 +1137,7 @@ function MediasBrowser(_ref) {
     loading: loading
   })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
     theme: theme,
-    columns: columns,
+    columns: finalColumns,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
     }, "\u2014"),
@@ -1044,6 +1148,19 @@ function MediasBrowser(_ref) {
     items: finalItems,
     loading: loading,
     actionsProps: {
+      getDeletePropsFromItem: function getDeletePropsFromItem() {
+        var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref7$id = _ref7.id,
+          id = _ref7$id === void 0 ? null : _ref7$id;
+        return {
+          href: null,
+          onClick: function onClick() {
+            return showTrashed ? mediaDelete(id) : mediaTrash(id);
+          },
+          disabled: trashing || deleting,
+          icon: showTrashed ? 'trash-fill' : 'trash'
+        };
+      },
       getEditPropsFromItem: function getEditPropsFromItem(it) {
         return {
           href: null,
@@ -1098,18 +1215,20 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
-  // For selection only
+  var _useMediasForm = useMediasForm(),
+    currentMedia = _useMediasForm.media;
+
+  // For selection
   var _useState = React.useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    currentItems = _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 _useMediasForm = useMediasForm(),
-    currentMedia = _useMediasForm.media;
   var _useItemSelection = hooks.useItemSelection({
-      currentItems: currentItems,
+      items: pageItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
@@ -1120,7 +1239,6 @@ function MediasPicker(_ref) {
     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);
@@ -1136,13 +1254,14 @@ function MediasPicker(_ref) {
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    }, tableProps)
-    // items={initialItems} // TODO: fix useItems if using this
+    }, tableProps),
+    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", {
@@ -1402,7 +1521,8 @@ exports.fields = defaultFields;
 exports.filters = defaultFilters;
 exports.useMedia = useMedia$1;
 exports.useMediaCreate = useMediaCreate$1;
+exports.useMediaDelete = useMediaDelete$1;
+exports.useMediaTrash = useMediaTrash$1;
 exports.useMediaUpdate = useMediaUpdate$1;
 exports.useMedias = useMedias$1;
 exports.useMediasApi = useMediasApi;
-exports.useMediasRecentSearches = useMediasRecent$1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.172",
+    "version": "3.0.174",
     "description": "",
     "keywords": [
         "javascript"
@@ -46,20 +46,20 @@
     },
     "dependencies": {
         "@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.172",
-        "@panneau/element-icon": "^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",
+        "@panneau/core": "^3.0.174",
+        "@panneau/data": "^3.0.174",
+        "@panneau/display-image": "^3.0.174",
+        "@panneau/element-button": "^3.0.174",
+        "@panneau/element-buttons": "^3.0.174",
+        "@panneau/element-form": "^3.0.174",
+        "@panneau/element-form-status": "^3.0.174",
+        "@panneau/element-grid": "^3.0.174",
+        "@panneau/element-icon": "^3.0.174",
+        "@panneau/element-media-card": "^3.0.174",
+        "@panneau/element-media-player": "^3.0.174",
+        "@panneau/element-pagination": "^3.0.174",
+        "@panneau/element-table": "^3.0.174",
+        "@panneau/filter-filters": "^3.0.174",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "74ada3ded1a27ab2d7008d67790d8431f57c5b0a"
+    "gitHead": "0b3a328b97ef9e9c02f8cfe731ac50a1611dc854"
 }