@micromag/media-gallery 0.3.323 → 0.3.328

package/assets/css/styles.css

@@ -3,9 +3,10 @@
 .micromag-media-gallery-partials-media-metadata-container{position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-image{display:block;margin:0 auto;max-height:40vh;max-width:100%;min-height:200px}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{background-color:#1c1c1c;height:40vh;min-height:200px;position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{bottom:0;position:absolute;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio .micromag-media-gallery-partials-media-metadata-player{display:block;margin:0 auto}
 .micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-media-gallery-forms-dropdown-section-container{padding-top:5px;position:relative}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;font-weight:400;padding-right:5px}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{font-weight:700}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdown{left:auto;right:0}
 .micromag-media-gallery-forms-search-container{position:relative}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input{background-color:#2b2b2b}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input.micromag-media-gallery-forms-search-active,.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input:focus{background-color:#2b2b2b!important;-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff!important;outline:none!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-webkit-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-moz-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input :-ms-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-ms-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::placeholder{background-color:#2b2b2b!important}
+.micromag-media-gallery-forms-tag-dropdown-container .micromag-media-gallery-forms-tag-dropdown-select{font-size:.8rem;padding:.25rem .5rem}
 .micromag-media-gallery-forms-tag-section-container .micromag-media-gallery-forms-tag-section-tag{font-size:.75rem;line-height:1.1}
-.micromag-media-gallery-forms-search-filters-container{left:0;overflow:hidden;padding:0 10px;position:absolute;right:0;width:100%;z-index:1}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn{position:absolute;right:24px}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section{border-bottom:1px solid #adadad}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section:last-child{border-bottom:0}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-tags{overflow-x:auto}
+.micromag-media-gallery-forms-search-filters-container{left:0;overflow:hidden;padding:0 10px;position:absolute;right:0;width:100%;z-index:1}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;border:0!important;display:-ms-flexbox;display:flex;height:24px;justify-content:center;position:absolute;right:10px;top:0;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out;width:24px}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn:hover{opacity:.8}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section{border-bottom:1px solid #adadad}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section:last-child{border-bottom:0}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-tags{overflow-x:auto}
 .micromag-media-gallery-buttons-close-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}
 .micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-heading{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-resetButton{font-size:.7875rem;margin-left:5px;outline:none}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-activeTag{margin-right:5px;margin-top:5px}
 .micromag-media-gallery-partials-navbar-container{max-width:100%;max-width:320px;padding:.5rem;position:relative}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{-ms-flex-align:start;-ms-flex-pack:center;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{display:block;margin-right:5px;width:100px}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{display:block;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaLabel{display:block;min-width:0}
-.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata,.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-container{position:relative}.micromag-media-gallery-container .micromag-media-gallery-content{overflow:hidden;position:relative;width:100%}.micromag-media-gallery-container .micromag-media-gallery-gallery,.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-media-gallery-container .micromag-media-gallery-loading{margin:.5rem 1rem}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-mediaMetadata{position:static;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);width:auto}
+.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata,.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-container{position:relative}.micromag-media-gallery-container .micromag-media-gallery-content{overflow:hidden;position:relative;width:100%}.micromag-media-gallery-container .micromag-media-gallery-gallery,.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-media-gallery-container .micromag-media-gallery-loading{display:block;margin:.5rem auto}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-mediaMetadata{position:static;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);width:auto}

package/es/index.js

@@ -7,6 +7,7 @@ import isArray from 'lodash/isArray';
 import PropTypes$1 from 'prop-types';
 import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { PropTypes } from '@micromag/core';
 import { Card, Button, Media, Spinner, UploadModal } from '@micromag/core/components';
 import { useFieldComponent, useStory } from '@micromag/core/contexts';
@@ -19,7 +20,7 @@ import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import uniqBy from 'lodash/uniqBy';
 import prettyBytes from 'pretty-bytes';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { useMediaDelete } from '@micromag/data/src/hooks';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -39,9 +40,9 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-var styles$a = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
+var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
 
-var propTypes$a = {
+var propTypes$b = {
   item: PropTypes.media,
   width: PropTypes$1.number,
   selected: PropTypes$1.bool,
@@ -50,7 +51,7 @@ var propTypes$a = {
   onClick: PropTypes$1.func,
   onClickInfo: PropTypes$1.func
 };
-var defaultProps$a = {
+var defaultProps$b = {
   item: null,
   width: 0,
   selected: false,
@@ -81,50 +82,50 @@ var GalleryItem = function GalleryItem(_ref) {
   return /*#__PURE__*/React.createElement(Card, {
     image: /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$a.imageButton]),
+      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
       onClick: onClick
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['card-img-top', styles$a.image]),
+      className: classNames(['card-img-top', styles$b.image]),
       style: {
         backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
       }
     })),
     beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
-      className: styles$a.infoButton,
+      className: styles$b.infoButton,
       onClick: onClickInfo,
       withoutStyle: true
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faInfoCircle,
-      className: styles$a.icon
+      className: styles$b.icon
     })) : null, selected ? /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-danger', styles$a.closeIcon])
+      className: classNames(['text-danger', styles$b.closeIcon])
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimesCircle,
-      className: styles$a.icon
+      className: styles$b.icon
     })) : null),
     footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$a.icon,
+      className: styles$b.icon,
       icon: faPlayCircle
     }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$a.icon,
+      className: styles$b.icon,
       icon: faHeadphonesAlt
     }) : null, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-truncate', styles$a.label])
+      className: classNames(['text-truncate', styles$b.label])
     }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
       className: "text-muted ms-1"
     }, size) : null)),
     theme: selected ? 'primary' : null,
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
-    footerClassName: classNames(['p-1', styles$a.footer]),
+    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)]),
+    footerClassName: classNames(['p-1', styles$b.footer]),
     onClickFooter: onClick
   });
 };
-GalleryItem.propTypes = propTypes$a;
-GalleryItem.defaultProps = defaultProps$a;
+GalleryItem.propTypes = propTypes$b;
+GalleryItem.defaultProps = defaultProps$b;
 
-var styles$9 = {};
+var styles$a = {};
 
-var propTypes$9 = {
+var propTypes$a = {
   items: PropTypes.medias,
   selectedItem: PropTypes.media,
   withInfoButton: PropTypes$1.bool,
@@ -134,7 +135,7 @@ var propTypes$9 = {
   onClickItem: PropTypes$1.func,
   onClickItemInfo: PropTypes$1.func
 };
-var defaultProps$9 = {
+var defaultProps$a = {
   items: null,
   selectedItem: null,
   withInfoButton: false,
@@ -166,7 +167,7 @@ function Gallery(_ref) {
     return items;
   }, [selectedFirst, selectedItem, items]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, 'p-2', _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$a.container, 'p-2', _defineProperty({}, className, className !== null)]),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['row', 'mx-n1', 'row-cols-2', {
@@ -190,24 +191,27 @@ function Gallery(_ref) {
     }));
   })));
 }
-Gallery.propTypes = propTypes$9;
-Gallery.defaultProps = defaultProps$9;
+Gallery.propTypes = propTypes$a;
+Gallery.defaultProps = defaultProps$a;
 
-var styles$8 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
+var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
 
-var propTypes$8 = {
+var propTypes$9 = {
   media: PropTypes.media,
   tags: PropTypes.tags,
+  onClickClose: PropTypes$1.func,
   className: PropTypes$1.string
 };
-var defaultProps$8 = {
+var defaultProps$9 = {
   media: null,
   tags: [],
+  onClickClose: null,
   className: null
 };
 function MediaMetadata(_ref) {
   var media = _ref.media,
     allTags = _ref.tags,
+    onClickClose = _ref.onClickClose,
     className = _ref.className;
   var _ref2 = media || {},
     mediaId = _ref2.id,
@@ -239,6 +243,8 @@ function MediaMetadata(_ref) {
     mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
   var _useMediaUpdate = useMediaUpdate(),
     update = _useMediaUpdate.update;
+  var _useMediaDelete = useMediaDelete(),
+    deleteMedia = _useMediaDelete.deleteMedia;
   var getOptionLabel = useCallback(function (_ref4) {
     var name = _ref4.name;
     return name;
@@ -293,8 +299,29 @@ function MediaMetadata(_ref) {
       description: description
     }).then(function () {
       setChanged(false);
+      if (onClickClose !== null) {
+        onClickClose();
+      }
     });
-  }, [mediaId, name, tags, description, metadata, update]);
+  }, [mediaId, name, tags, description, metadata, update, onClickClose]);
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    deletedState = _useState10[0],
+    setDeletedState = _useState10[1];
+  useEffect(function () {
+    setDeletedState(null);
+  }, [mediaId]);
+  var onDelete = useCallback(function () {
+    return deleteMedia(mediaId).then(function () {
+      setChanged(false);
+      setDeletedState(true);
+      if (onClickClose !== null) {
+        onClickClose();
+      }
+    })["catch"](function () {
+      setDeletedState(false);
+    });
+  }, [mediaId, deleteMedia, onClickClose]);
   useEffect(function () {
     if (media !== null) {
       setTags(mediaTags);
@@ -310,25 +337,25 @@ function MediaMetadata(_ref) {
   var TextField = useFieldComponent('text');
   var TokensField = useFieldComponent('tokens');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, _defineProperty({}, className, className)])
+    className: classNames([styles$9.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['position-relative', _defineProperty({
       'bg-light': type === 'audio',
       'bg-black': type === 'image'
-    }, styles$8.video, type === 'video')])
+    }, styles$9.video, type === 'video')])
   }, type === 'video' ? /*#__PURE__*/React.createElement("video", {
-    className: styles$8.player,
+    className: styles$9.player,
     controls: true,
     src: url
   }) : null, type === 'audio' ? /*#__PURE__*/React.createElement("div", {
-    className: styles$8.audio
+    className: styles$9.audio
   }, /*#__PURE__*/React.createElement("audio", {
-    className: styles$8.player,
+    className: styles$9.player,
     controls: true,
     src: url
   })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
     src: thumbnail,
-    className: styles$8.image,
+    className: styles$9.image,
     alt: filename
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: "p-2"
@@ -498,10 +525,30 @@ function MediaMetadata(_ref) {
     }]
   })), /*#__PURE__*/React.createElement("div", {
     className: "col"
-  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null)));
+  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null), /*#__PURE__*/React.createElement("div", {
+    className: "py-3"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "danger",
+    outline: true,
+    onClick: onDelete
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "/KQ87r",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Delete media"
+    }]
+  })), deletedState === false ? /*#__PURE__*/React.createElement("p", {
+    className: "pt-1 text-danger"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "k+edUi",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Sorry, this media is in use and could not be deleted."
+    }]
+  })) : null)));
 }
-MediaMetadata.propTypes = propTypes$8;
-MediaMetadata.defaultProps = defaultProps$8;
+MediaMetadata.propTypes = propTypes$9;
+MediaMetadata.defaultProps = defaultProps$9;
 
 var useSearchFilters = function useSearchFilters(_ref) {
   var _ref$recent = _ref.recent,
@@ -664,9 +711,9 @@ PropTypes$1.shape({
   usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
 });
 
-var styles$7 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
+var styles$8 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
 
-var propTypes$7 = {
+var propTypes$8 = {
   value: PropTypes$1.string,
   items: PropTypes$1.arrayOf(PropTypes$1.shape({
     label: PropTypes.label,
@@ -676,7 +723,7 @@ var propTypes$7 = {
   onChange: PropTypes$1.func,
   className: PropTypes$1.string
 };
-var defaultProps$7 = {
+var defaultProps$8 = {
   value: null,
   items: null,
   onChange: null,
@@ -709,9 +756,9 @@ function DropdownSection(_ref) {
     onChange(val);
   }, [setOpen]);
   return items !== null && items.length > 1 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container, 'dropdown', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$8.container, 'dropdown', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$7.label
+    className: styles$8.label
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "9ZdD+Q",
     defaultMessage: [{
@@ -719,7 +766,7 @@ function DropdownSection(_ref) {
       "value": "Library for"
     }]
   })), /*#__PURE__*/React.createElement("button", {
-    className: classNames([styles$7.dropdownToggle, 'dropdown-toggle', {
+    className: classNames([styles$8.dropdownToggle, 'dropdown-toggle', {
       open: open === true
     }]),
     type: "button",
@@ -732,7 +779,7 @@ function DropdownSection(_ref) {
       "value": "All"
     }]
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.dropdown, 'dropdown-menu', {
+    className: classNames([styles$8.dropdown, 'dropdown-menu', {
       show: open === true
     }])
   }, items.map(function (_ref3) {
@@ -750,12 +797,12 @@ function DropdownSection(_ref) {
     }, label);
   }))) : null;
 }
-DropdownSection.propTypes = propTypes$7;
-DropdownSection.defaultProps = defaultProps$7;
+DropdownSection.propTypes = propTypes$8;
+DropdownSection.defaultProps = defaultProps$8;
 
-var styles$6 = {"container":"micromag-media-gallery-forms-search-container","input":"micromag-media-gallery-forms-search-input","active":"micromag-media-gallery-forms-search-active"};
+var styles$7 = {"container":"micromag-media-gallery-forms-search-container","input":"micromag-media-gallery-forms-search-input","active":"micromag-media-gallery-forms-search-active"};
 
-var propTypes$6 = {
+var propTypes$7 = {
   value: PropTypes$1.string,
   loading: PropTypes$1.bool,
   onChange: PropTypes$1.func,
@@ -764,7 +811,7 @@ var propTypes$6 = {
   onClickIcon: PropTypes$1.func,
   className: PropTypes$1.string
 };
-var defaultProps$6 = {
+var defaultProps$7 = {
   value: null,
   loading: false,
   onChange: null,
@@ -800,7 +847,7 @@ var Search = function Search(_ref) {
   }, [onClickIcon]);
   return /*#__PURE__*/React.createElement("form", {
     method: "post",
-    className: classNames([styles$6.container, 'w-100', 'border', 'border-dark', 'rounded', _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$7.container, 'w-100', 'border', 'border-dark', 'rounded', _defineProperty({}, className, className !== null)]),
     onSubmit: function onSubmit(e) {
       return e.preventDefault();
     }
@@ -813,7 +860,7 @@ var Search = function Search(_ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: loading ? faSpinner : faSearch
   })), /*#__PURE__*/React.createElement("input", {
-    className: classNames([styles$6.input, 'form-control', {
+    className: classNames([styles$7.input, 'form-control', {
       'bg-light': !!value,
       'text-dark': value
     }]),
@@ -831,8 +878,59 @@ var Search = function Search(_ref) {
     onBlur: onBlur
   }), null));
 };
-Search.propTypes = propTypes$6;
-Search.defaultProps = defaultProps$6;
+Search.propTypes = propTypes$7;
+Search.defaultProps = defaultProps$7;
+
+var styles$6 = {"container":"micromag-media-gallery-forms-tag-dropdown-container","select":"micromag-media-gallery-forms-tag-dropdown-select"};
+
+var propTypes$6 = {
+  tags: PropTypes$1.arrayOf(PropTypes$1.shape({
+    label: PropTypes$1.string,
+    value: PropTypes$1.oneOf([PropTypes$1.string, PropTypes$1.node]),
+    active: PropTypes$1.bool
+  })),
+  parent: PropTypes$1.string,
+  onChange: PropTypes$1.func,
+  className: PropTypes$1.string
+};
+var defaultProps$6 = {
+  tags: null,
+  parent: null,
+  onChange: null,
+  className: null
+};
+var TagDropdown = function TagDropdown(_ref) {
+  var tags = _ref.tags,
+    parent = _ref.parent,
+    onChange = _ref.onChange,
+    className = _ref.className;
+  var onItemChange = useCallback(function (e) {
+    var val = e.target.dataset.value || null;
+    onChange(val, parent);
+  }, [onChange, parent]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$6.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("select", {
+    className: classNames(['form-select', styles$6.select])
+  }, tags !== null ? tags.map(function (_ref3) {
+    var label = _ref3.label,
+      value = _ref3.value,
+      active = _ref3.active;
+    var itemClassNames = classNames([styles$6.tag, 'fs-6', {
+      'btn-primary': active === true
+    }]);
+    return /*#__PURE__*/React.createElement("option", {
+      className: itemClassNames,
+      type: "button",
+      key: "option-".concat(value),
+      onClick: onItemChange,
+      "data-value": value,
+      value: value
+    }, label);
+  }) : null));
+};
+TagDropdown.propTypes = propTypes$6;
+TagDropdown.defaultProps = defaultProps$6;
 
 var styles$5 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
 
@@ -867,7 +965,7 @@ var TagSection = function TagSection(_ref) {
     var label = _ref3.label,
       value = _ref3.value,
       active = _ref3.active;
-    var itemClassNames = classNames([styles$5.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
+    var itemClassNames = classNames([styles$5.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-secondary', 'text-truncate', {
       'btn-primary': active === true
       // 'btn-outline-light': active === false,
     }]);
@@ -946,9 +1044,9 @@ var SearchFilters = function SearchFilters(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$4.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
   }, activeSections.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
+    className: classNames(['bg-dark', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
   }, /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles$4.closeBtn, 'py-1', 'px-1', 'text-dark']),
+    className: classNames([styles$4.closeBtn, 'py-1', 'px-1', 'text-light']),
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes
     }),
@@ -969,7 +1067,12 @@ var SearchFilters = function SearchFilters(_ref) {
       className: classNames([styles$4.section, 'py-2'])
     }, /*#__PURE__*/React.createElement("p", {
       className: classNames([styles$4.title, 'm-0'])
-    }, label), /*#__PURE__*/React.createElement(TagSection, {
+    }, label), value === 'tags' || value === 'recent' || value === 'users' ? /*#__PURE__*/React.createElement(TagDropdown, {
+      className: classNames([styles$4.tags]),
+      tags: items,
+      parent: value,
+      onChange: onSectionChange
+    }) : /*#__PURE__*/React.createElement(TagSection, {
       className: classNames([styles$4.tags]),
       tags: items,
       parent: value,
@@ -1311,7 +1414,7 @@ function Navbar(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.inner])
   }, media === null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between', {
+    className: classNames(['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between mb-2', {
       'border border-dark py-1 px-1': selectedMedia !== null
     }])
   }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
@@ -1361,8 +1464,8 @@ function Navbar(_ref) {
         "value": "Remove"
       }]
     })
-  })) : null, !withoutSource && media === null ? /*#__PURE__*/React.createElement("div", {
-    className: "mt-1 py-2 d-flex w-100 align-items-center flex-nowrap"
+  })) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
   }, /*#__PURE__*/React.createElement(DropdownSection, {
     items: sources,
     value: filters.source || null,
@@ -1457,6 +1560,7 @@ function MediaGallery(_ref) {
     navbarClassName = _ref.navbarClassName,
     onClickMedia = _ref.onClickMedia,
     onClearMedia = _ref.onClearMedia;
+  var intl = useIntl();
   // Base state for filters
   var defaultFilters = {
     type: type,
@@ -1493,12 +1597,16 @@ function MediaGallery(_ref) {
   }, [setFiltersValue, setQueryValue, throttle]);
 
   // Items
-  var _useMedias = useMedias(queryValue, 1, 100, _objectSpread({}, initialMedias !== null ? {
+  var _useMedias = useMedias(queryValue, 1, 30, _objectSpread({}, initialMedias !== null ? {
       items: initialMedias
     } : null)),
     loadedMedias = _useMedias.allMedias,
     _useMedias$loading = _useMedias.loading,
-    loading = _useMedias$loading === void 0 ? false : _useMedias$loading;
+    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
+    _useMedias$loadNextPa = _useMedias.loadNextPage,
+    loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
+    _useMedias$allLoaded = _useMedias.allLoaded,
+    allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
 
   // Temporary type filter
   var _useState5 = useState([]),
@@ -1522,13 +1630,19 @@ function MediaGallery(_ref) {
       onClickMedia(media);
     }
   }, [isPicker, setMetadataMedia, onClickMedia]);
+  var refresh = useCallback(function () {
+    // TODO: refactor useItems to enable this
+    // setPageNumber(1);
+    // setQueryValue({ ...defaultFilters, ...queryValue });
+  }, [defaultFilters, queryValue, setQueryValue]);
   var onClickItemInfo = useCallback(function (media) {
     return setMetadataMedia(media);
   }, [setMetadataMedia]);
   var onMetadataClickClose = useCallback(function () {
-    return setMetadataMedia(null);
-  }, [setMetadataMedia]);
-
+    setMetadataMedia(null);
+    refresh();
+  }, [refresh, setMetadataMedia]);
+  // console.log(loadedMedias);
   // Navigation
   var onClickBack = useCallback(function () {
     return setMetadataMedia(null);
@@ -1597,9 +1711,22 @@ function MediaGallery(_ref) {
     isSmall: isSmall,
     onClickItem: onClickItem,
     onClickItemInfo: onClickItemInfo
-  }) : null, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
+  }) : null, !allLoaded ? /*#__PURE__*/React.createElement("div", {
+    className: "w-100 mb-2"
+  }, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
     className: styles.loading
-  }) : null), /*#__PURE__*/React.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement(Button, {
+    className: "d-block mx-auto",
+    theme: "secondary",
+    outline: true,
+    onClick: loadNextPage
+  }, intl.formatMessage({
+    id: "ur6G0U",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Load more"
+    }]
+  }))) : null), /*#__PURE__*/React.createElement("div", {
     className: styles.mediaMetadata
   }, /*#__PURE__*/React.createElement(MediaMetadata, {
     media: metadataMedia,

package/lib/index.js

@@ -9,6 +9,7 @@ var isArray = require('lodash/isArray');
 var PropTypes = require('prop-types');
 var React = require('react');
 var reactDom = require('react-dom');
+var reactIntl = require('react-intl');
 var core = require('@micromag/core');
 var components = require('@micromag/core/components');
 var contexts = require('@micromag/core/contexts');
@@ -21,7 +22,7 @@ var faTimesCircle = require('@fortawesome/free-solid-svg-icons/faTimesCircle');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var uniqBy = require('lodash/uniqBy');
 var prettyBytes = require('pretty-bytes');
-var reactIntl = require('react-intl');
+var hooks$1 = require('@micromag/data/src/hooks');
 var faChevronLeft = require('@fortawesome/free-solid-svg-icons/faChevronLeft');
 var faPlus = require('@fortawesome/free-solid-svg-icons/faPlus');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
@@ -55,9 +56,9 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-var styles$a = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
+var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
 
-var propTypes$a = {
+var propTypes$b = {
   item: core.PropTypes.media,
   width: PropTypes__default["default"].number,
   selected: PropTypes__default["default"].bool,
@@ -66,7 +67,7 @@ var propTypes$a = {
   onClick: PropTypes__default["default"].func,
   onClickInfo: PropTypes__default["default"].func
 };
-var defaultProps$a = {
+var defaultProps$b = {
   item: null,
   width: 0,
   selected: false,
@@ -97,50 +98,50 @@ var GalleryItem = function GalleryItem(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(components.Card, {
     image: /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$a.imageButton]),
+      className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
       onClick: onClick
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"](['card-img-top', styles$a.image]),
+      className: classNames__default["default"](['card-img-top', styles$b.image]),
       style: {
         backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
       }
     })),
     beforeBody: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withInfoButton ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
-      className: styles$a.infoButton,
+      className: styles$b.infoButton,
       onClick: onClickInfo,
       withoutStyle: true
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faInfoCircle.faInfoCircle,
-      className: styles$a.icon
+      className: styles$b.icon
     })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"](['text-danger', styles$a.closeIcon])
+      className: classNames__default["default"](['text-danger', styles$b.closeIcon])
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faTimesCircle.faTimesCircle,
-      className: styles$a.icon
+      className: styles$b.icon
     })) : null),
     footer: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$a.icon,
+      className: styles$b.icon,
       icon: faPlayCircle.faPlayCircle
     }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$a.icon,
+      className: styles$b.icon,
       icon: faHeadphonesAlt.faHeadphonesAlt
     }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"](['text-truncate', styles$a.label])
+      className: classNames__default["default"](['text-truncate', styles$b.label])
     }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
       className: "text-muted ms-1"
     }, size) : null)),
     theme: selected ? 'primary' : null,
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
-    footerClassName: classNames__default["default"](['p-1', styles$a.footer]),
+    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    footerClassName: classNames__default["default"](['p-1', styles$b.footer]),
     onClickFooter: onClick
   });
 };
-GalleryItem.propTypes = propTypes$a;
-GalleryItem.defaultProps = defaultProps$a;
+GalleryItem.propTypes = propTypes$b;
+GalleryItem.defaultProps = defaultProps$b;
 
-var styles$9 = {};
+var styles$a = {};
 
-var propTypes$9 = {
+var propTypes$a = {
   items: core.PropTypes.medias,
   selectedItem: core.PropTypes.media,
   withInfoButton: PropTypes__default["default"].bool,
@@ -150,7 +151,7 @@ var propTypes$9 = {
   onClickItem: PropTypes__default["default"].func,
   onClickItemInfo: PropTypes__default["default"].func
 };
-var defaultProps$9 = {
+var defaultProps$a = {
   items: null,
   selectedItem: null,
   withInfoButton: false,
@@ -182,7 +183,7 @@ function Gallery(_ref) {
     return items;
   }, [selectedFirst, selectedItem, items]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$9.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$a.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['row', 'mx-n1', 'row-cols-2', {
@@ -206,24 +207,27 @@ function Gallery(_ref) {
     }));
   })));
 }
-Gallery.propTypes = propTypes$9;
-Gallery.defaultProps = defaultProps$9;
+Gallery.propTypes = propTypes$a;
+Gallery.defaultProps = defaultProps$a;
 
-var styles$8 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
+var styles$9 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
 
-var propTypes$8 = {
+var propTypes$9 = {
   media: core.PropTypes.media,
   tags: core.PropTypes.tags,
+  onClickClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$8 = {
+var defaultProps$9 = {
   media: null,
   tags: [],
+  onClickClose: null,
   className: null
 };
 function MediaMetadata(_ref) {
   var media = _ref.media,
     allTags = _ref.tags,
+    onClickClose = _ref.onClickClose,
     className = _ref.className;
   var _ref2 = media || {},
     mediaId = _ref2.id,
@@ -255,6 +259,8 @@ function MediaMetadata(_ref) {
     mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
   var _useMediaUpdate = data.useMediaUpdate(),
     update = _useMediaUpdate.update;
+  var _useMediaDelete = hooks$1.useMediaDelete(),
+    deleteMedia = _useMediaDelete.deleteMedia;
   var getOptionLabel = React.useCallback(function (_ref4) {
     var name = _ref4.name;
     return name;
@@ -309,8 +315,29 @@ function MediaMetadata(_ref) {
       description: description
     }).then(function () {
       setChanged(false);
+      if (onClickClose !== null) {
+        onClickClose();
+      }
     });
-  }, [mediaId, name, tags, description, metadata, update]);
+  }, [mediaId, name, tags, description, metadata, update, onClickClose]);
+  var _useState9 = React.useState(null),
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    deletedState = _useState10[0],
+    setDeletedState = _useState10[1];
+  React.useEffect(function () {
+    setDeletedState(null);
+  }, [mediaId]);
+  var onDelete = React.useCallback(function () {
+    return deleteMedia(mediaId).then(function () {
+      setChanged(false);
+      setDeletedState(true);
+      if (onClickClose !== null) {
+        onClickClose();
+      }
+    })["catch"](function () {
+      setDeletedState(false);
+    });
+  }, [mediaId, deleteMedia, onClickClose]);
   React.useEffect(function () {
     if (media !== null) {
       setTags(mediaTags);
@@ -326,25 +353,25 @@ function MediaMetadata(_ref) {
   var TextField = contexts.useFieldComponent('text');
   var TokensField = contexts.useFieldComponent('tokens');
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({
       'bg-light': type === 'audio',
       'bg-black': type === 'image'
-    }, styles$8.video, type === 'video')])
+    }, styles$9.video, type === 'video')])
   }, type === 'video' ? /*#__PURE__*/React__default["default"].createElement("video", {
-    className: styles$8.player,
+    className: styles$9.player,
     controls: true,
     src: url
   }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.audio
+    className: styles$9.audio
   }, /*#__PURE__*/React__default["default"].createElement("audio", {
-    className: styles$8.player,
+    className: styles$9.player,
     controls: true,
     src: url
   })) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: thumbnail,
-    className: styles$8.image,
+    className: styles$9.image,
     alt: filename
   }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "p-2"
@@ -514,10 +541,30 @@ function MediaMetadata(_ref) {
     }]
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col"
-  }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null)));
+  }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "py-3"
+  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    theme: "danger",
+    outline: true,
+    onClick: onDelete
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "/KQ87r",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Delete media"
+    }]
+  })), deletedState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "pt-1 text-danger"
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "k+edUi",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Sorry, this media is in use and could not be deleted."
+    }]
+  })) : null)));
 }
-MediaMetadata.propTypes = propTypes$8;
-MediaMetadata.defaultProps = defaultProps$8;
+MediaMetadata.propTypes = propTypes$9;
+MediaMetadata.defaultProps = defaultProps$9;
 
 var useSearchFilters = function useSearchFilters(_ref) {
   var _ref$recent = _ref.recent,
@@ -680,9 +727,9 @@ PropTypes__default["default"].shape({
   usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
 });
 
-var styles$7 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
+var styles$8 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
 
-var propTypes$7 = {
+var propTypes$8 = {
   value: PropTypes__default["default"].string,
   items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
     label: core.PropTypes.label,
@@ -692,7 +739,7 @@ var propTypes$7 = {
   onChange: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$7 = {
+var defaultProps$8 = {
   value: null,
   items: null,
   onChange: null,
@@ -725,9 +772,9 @@ function DropdownSection(_ref) {
     onChange(val);
   }, [setOpen]);
   return items !== null && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$7.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$8.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$7.label
+    className: styles$8.label
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "9ZdD+Q",
     defaultMessage: [{
@@ -735,7 +782,7 @@ function DropdownSection(_ref) {
       "value": "Library for"
     }]
   })), /*#__PURE__*/React__default["default"].createElement("button", {
-    className: classNames__default["default"]([styles$7.dropdownToggle, 'dropdown-toggle', {
+    className: classNames__default["default"]([styles$8.dropdownToggle, 'dropdown-toggle', {
       open: open === true
     }]),
     type: "button",
@@ -748,7 +795,7 @@ function DropdownSection(_ref) {
       "value": "All"
     }]
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$7.dropdown, 'dropdown-menu', {
+    className: classNames__default["default"]([styles$8.dropdown, 'dropdown-menu', {
       show: open === true
     }])
   }, items.map(function (_ref3) {
@@ -766,12 +813,12 @@ function DropdownSection(_ref) {
     }, label);
   }))) : null;
 }
-DropdownSection.propTypes = propTypes$7;
-DropdownSection.defaultProps = defaultProps$7;
+DropdownSection.propTypes = propTypes$8;
+DropdownSection.defaultProps = defaultProps$8;
 
-var styles$6 = {"container":"micromag-media-gallery-forms-search-container","input":"micromag-media-gallery-forms-search-input","active":"micromag-media-gallery-forms-search-active"};
+var styles$7 = {"container":"micromag-media-gallery-forms-search-container","input":"micromag-media-gallery-forms-search-input","active":"micromag-media-gallery-forms-search-active"};
 
-var propTypes$6 = {
+var propTypes$7 = {
   value: PropTypes__default["default"].string,
   loading: PropTypes__default["default"].bool,
   onChange: PropTypes__default["default"].func,
@@ -780,7 +827,7 @@ var propTypes$6 = {
   onClickIcon: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$6 = {
+var defaultProps$7 = {
   value: null,
   loading: false,
   onChange: null,
@@ -816,7 +863,7 @@ var Search = function Search(_ref) {
   }, [onClickIcon]);
   return /*#__PURE__*/React__default["default"].createElement("form", {
     method: "post",
-    className: classNames__default["default"]([styles$6.container, 'w-100', 'border', 'border-dark', 'rounded', _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$7.container, 'w-100', 'border', 'border-dark', 'rounded', _defineProperty__default["default"]({}, className, className !== null)]),
     onSubmit: function onSubmit(e) {
       return e.preventDefault();
     }
@@ -829,7 +876,7 @@ var Search = function Search(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: loading ? faSpinner.faSpinner : faSearch.faSearch
   })), /*#__PURE__*/React__default["default"].createElement("input", {
-    className: classNames__default["default"]([styles$6.input, 'form-control', {
+    className: classNames__default["default"]([styles$7.input, 'form-control', {
       'bg-light': !!value,
       'text-dark': value
     }]),
@@ -847,8 +894,59 @@ var Search = function Search(_ref) {
     onBlur: onBlur
   }), null));
 };
-Search.propTypes = propTypes$6;
-Search.defaultProps = defaultProps$6;
+Search.propTypes = propTypes$7;
+Search.defaultProps = defaultProps$7;
+
+var styles$6 = {"container":"micromag-media-gallery-forms-tag-dropdown-container","select":"micromag-media-gallery-forms-tag-dropdown-select"};
+
+var propTypes$6 = {
+  tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    label: PropTypes__default["default"].string,
+    value: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].node]),
+    active: PropTypes__default["default"].bool
+  })),
+  parent: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string
+};
+var defaultProps$6 = {
+  tags: null,
+  parent: null,
+  onChange: null,
+  className: null
+};
+var TagDropdown = function TagDropdown(_ref) {
+  var tags = _ref.tags,
+    parent = _ref.parent,
+    onChange = _ref.onChange,
+    className = _ref.className;
+  var onItemChange = React.useCallback(function (e) {
+    var val = e.target.dataset.value || null;
+    onChange(val, parent);
+  }, [onChange, parent]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$6.container, 'd-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement("select", {
+    className: classNames__default["default"](['form-select', styles$6.select])
+  }, tags !== null ? tags.map(function (_ref3) {
+    var label = _ref3.label,
+      value = _ref3.value,
+      active = _ref3.active;
+    var itemClassNames = classNames__default["default"]([styles$6.tag, 'fs-6', {
+      'btn-primary': active === true
+    }]);
+    return /*#__PURE__*/React__default["default"].createElement("option", {
+      className: itemClassNames,
+      type: "button",
+      key: "option-".concat(value),
+      onClick: onItemChange,
+      "data-value": value,
+      value: value
+    }, label);
+  }) : null));
+};
+TagDropdown.propTypes = propTypes$6;
+TagDropdown.defaultProps = defaultProps$6;
 
 var styles$5 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
 
@@ -883,7 +981,7 @@ var TagSection = function TagSection(_ref) {
     var label = _ref3.label,
       value = _ref3.value,
       active = _ref3.active;
-    var itemClassNames = classNames__default["default"]([styles$5.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
+    var itemClassNames = classNames__default["default"]([styles$5.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-secondary', 'text-truncate', {
       'btn-primary': active === true
       // 'btn-outline-light': active === false,
     }]);
@@ -962,9 +1060,9 @@ var SearchFilters = function SearchFilters(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$4.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
   }, activeSections.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
+    className: classNames__default["default"](['bg-dark', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: classNames__default["default"]([styles$4.closeBtn, 'py-1', 'px-1', 'text-dark']),
+    className: classNames__default["default"]([styles$4.closeBtn, 'py-1', 'px-1', 'text-light']),
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faTimes.faTimes
     }),
@@ -985,7 +1083,12 @@ var SearchFilters = function SearchFilters(_ref) {
       className: classNames__default["default"]([styles$4.section, 'py-2'])
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: classNames__default["default"]([styles$4.title, 'm-0'])
-    }, label), /*#__PURE__*/React__default["default"].createElement(TagSection, {
+    }, label), value === 'tags' || value === 'recent' || value === 'users' ? /*#__PURE__*/React__default["default"].createElement(TagDropdown, {
+      className: classNames__default["default"]([styles$4.tags]),
+      tags: items,
+      parent: value,
+      onChange: onSectionChange
+    }) : /*#__PURE__*/React__default["default"].createElement(TagSection, {
       className: classNames__default["default"]([styles$4.tags]),
       tags: items,
       parent: value,
@@ -1327,7 +1430,7 @@ function Navbar(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$1.inner])
   }, media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between', {
+    className: classNames__default["default"](['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between mb-2', {
       'border border-dark py-1 px-1': selectedMedia !== null
     }])
   }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
@@ -1377,8 +1480,8 @@ function Navbar(_ref) {
         "value": "Remove"
       }]
     })
-  })) : null, !withoutSource && media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mt-1 py-2 d-flex w-100 align-items-center flex-nowrap"
+  })) : null, !withoutSource && media === null && sources !== null && sources.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-2 d-flex w-100 align-items-center flex-nowrap"
   }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
     items: sources,
     value: filters.source || null,
@@ -1473,6 +1576,7 @@ function MediaGallery(_ref) {
     navbarClassName = _ref.navbarClassName,
     onClickMedia = _ref.onClickMedia,
     onClearMedia = _ref.onClearMedia;
+  var intl = reactIntl.useIntl();
   // Base state for filters
   var defaultFilters = {
     type: type,
@@ -1509,12 +1613,16 @@ function MediaGallery(_ref) {
   }, [setFiltersValue, setQueryValue, throttle]);
 
   // Items
-  var _useMedias = data.useMedias(queryValue, 1, 100, _objectSpread__default["default"]({}, initialMedias !== null ? {
+  var _useMedias = data.useMedias(queryValue, 1, 30, _objectSpread__default["default"]({}, initialMedias !== null ? {
       items: initialMedias
     } : null)),
     loadedMedias = _useMedias.allMedias,
     _useMedias$loading = _useMedias.loading,
-    loading = _useMedias$loading === void 0 ? false : _useMedias$loading;
+    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
+    _useMedias$loadNextPa = _useMedias.loadNextPage,
+    loadNextPage = _useMedias$loadNextPa === void 0 ? null : _useMedias$loadNextPa,
+    _useMedias$allLoaded = _useMedias.allLoaded,
+    allLoaded = _useMedias$allLoaded === void 0 ? false : _useMedias$allLoaded;
 
   // Temporary type filter
   var _useState5 = React.useState([]),
@@ -1538,13 +1646,19 @@ function MediaGallery(_ref) {
       onClickMedia(media);
     }
   }, [isPicker, setMetadataMedia, onClickMedia]);
+  var refresh = React.useCallback(function () {
+    // TODO: refactor useItems to enable this
+    // setPageNumber(1);
+    // setQueryValue({ ...defaultFilters, ...queryValue });
+  }, [defaultFilters, queryValue, setQueryValue]);
   var onClickItemInfo = React.useCallback(function (media) {
     return setMetadataMedia(media);
   }, [setMetadataMedia]);
   var onMetadataClickClose = React.useCallback(function () {
-    return setMetadataMedia(null);
-  }, [setMetadataMedia]);
-
+    setMetadataMedia(null);
+    refresh();
+  }, [refresh, setMetadataMedia]);
+  // console.log(loadedMedias);
   // Navigation
   var onClickBack = React.useCallback(function () {
     return setMetadataMedia(null);
@@ -1613,9 +1727,22 @@ function MediaGallery(_ref) {
     isSmall: isSmall,
     onClickItem: onClickItem,
     onClickItemInfo: onClickItemInfo
-  }) : null, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
+  }) : null, !allLoaded ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-100 mb-2"
+  }, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
     className: styles.loading
-  }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: "d-block mx-auto",
+    theme: "secondary",
+    outline: true,
+    onClick: loadNextPage
+  }, intl.formatMessage({
+    id: "ur6G0U",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Load more"
+    }]
+  }))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.mediaMetadata
   }, /*#__PURE__*/React__default["default"].createElement(MediaMetadata, {
     media: metadataMedia,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.323",
+    "version": "0.3.328",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,8 +59,8 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.323",
-        "@micromag/data": "^0.3.323",
+        "@micromag/core": "^0.3.325",
+        "@micromag/data": "^0.3.328",
         "bootstrap": "5.2.0-beta1",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "98f75cb2e96dad19a5e6e385be28d223847fcabf"
+    "gitHead": "b7eb67478bab9d9f94212b13db3e2e653566fb35"
 }