@micromag/media-gallery 0.2.396 → 0.2.397

package/assets/css/styles.css

@@ -2,8 +2,8 @@
 .micromag-media-gallery-items-gallery-item-container{position:relative;overflow:hidden;cursor:pointer}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{display:block;width:100%;height:0;padding-bottom:75%;background-repeat:no-repeat;background-position:50%;background-size:cover}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{width:16px;height:16px;margin-right:5px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:0;background:rgba(0,0,0,0);color:inherit;text-align:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.8rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{position:absolute;top:0;padding:.5rem;color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C)}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon .micromag-media-gallery-items-gallery-item-icon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton .micromag-media-gallery-items-gallery-item-icon{width:1rem;height:1rem;margin-right:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon{right:0;pointer-events:none}
 
 .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;max-width:100%;min-height:200px;max-height:40vh;margin:0 auto}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{position:relative;height:40vh;min-height:200px;background-color:#1c1c1c}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{position:absolute;bottom:0;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-partials-navbar-container{position:relative;padding:.5rem}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%}
+.micromag-media-gallery-partials-navbar-container{position:relative;padding:.5rem}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{width:25%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{width:100%}
 .micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-forms-dropdown-section-container{position:relative;padding-top:5px}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;padding-right:5px;font-weight:400}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{font-weight:700}
-.micromag-media-gallery-forms-search-filters-container{position:absolute;z-index:1;right:0;left:0;width:100%;padding:0 15px;overflow:hidden}.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{position:absolute;z-index:1;right:0;left:0;width:100%;padding:0 15px;overflow:hidden}.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-buttons-close-container{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}
-.micromag-media-gallery-partials-active-filters-container{padding:10px 0}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-heading{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;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{margin-left:5px;outline:none;font-size:.7875rem}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-activeTag{margin-top:5px;margin-right:5px}
+.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-heading{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;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{margin-left:5px;outline:none;font-size:.7875rem}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-activeTag{margin-top:5px;margin-right:5px}

package/es/index.js

@@ -3,14 +3,14 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { PropTypes } from '@micromag/core';
-import { Card, Button, Spinner, UploadModal } from '@micromag/core/components';
+import { Card, Button, Media, Spinner, UploadModal } from '@micromag/core/components';
 import { useFieldComponent, useStory } from '@micromag/core/contexts';
 import { useMediaUpdate, useMediasRecentSearches, useMediaTags, useMediaAuthors, useMedias, useMediaCreate } from '@micromag/data';
 import classNames from 'classnames';
 import PropTypes$1 from 'prop-types';
 import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { useResizeObserver } from '@micromag/core/hooks';
-import { faInfoCircle, faTimesCircle, faPlayCircle, faHeadphonesAlt, faSearch, faTimes, faChevronLeft, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faInfoCircle, faTimesCircle, faPlayCircle, faHeadphonesAlt, faSearch, faTimes, faPlus, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import uniqBy from 'lodash/uniqBy';
 import prettyBytes from 'pretty-bytes';
@@ -680,7 +680,7 @@ PropTypes$1.shape({
   usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
 });
 
-var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner"};
+var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
 
 var styles$3 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label"};
 
@@ -906,19 +906,21 @@ var TagSection = function TagSection(_ref) {
 TagSection.propTypes = propTypes$5;
 TagSection.defaultProps = defaultProps$5;
 
-var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
+var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
 
 var propTypes$4 = {
   filters: PropTypes$1.object,
   // eslint-disable-line
   sections: PropTypes$1.arrayOf(PropTypes$1.object),
   onChange: PropTypes$1.func,
+  onClose: PropTypes$1.func,
   className: PropTypes$1.string
 };
 var defaultProps$4 = {
   filters: null,
   sections: [],
   onChange: null,
+  onClose: null,
   className: null
 };
 
@@ -926,7 +928,9 @@ var SearchFilters = function SearchFilters(_ref) {
   var filters = _ref.filters,
       sections = _ref.sections,
       onChange = _ref.onChange,
+      onClose = _ref.onClose,
       className = _ref.className;
+  var intl = useIntl();
   var getActive = useCallback(function (items, sectionFilters) {
     return items !== null ? items.map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
@@ -967,7 +971,20 @@ var SearchFilters = function SearchFilters(_ref) {
     className: classNames([styles$2.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'])
-  }, activeSections.map(function (_ref3) {
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames([styles$2.closeBtn, 'py-1', 'px-1', 'text-dark']),
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faTimes
+    }),
+    onClick: onClose,
+    title: intl.formatMessage({
+      "id": "yCXMzz",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Close"
+      }]
+    })
+  }), activeSections.map(function (_ref3) {
     var value = _ref3.value,
         label = _ref3.label,
         items = _ref3.items;
@@ -1121,14 +1138,15 @@ ActiveFilters.defaultProps = defaultProps$2;
 var propTypes$1 = {
   filters: filtersValue,
   media: PropTypes.media,
+  selectedMedia: PropTypes.media,
   storyId: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
   tags: PropTypes.tags,
   authors: PropTypes.authors,
-  withoutTitle: PropTypes$1.bool,
   withoutSource: PropTypes$1.bool,
   withoutType: PropTypes$1.bool,
   onClickAdd: PropTypes$1.func,
-  // onClickCancel: PropTypes.func,
+  onClickItem: PropTypes$1.func,
+  // onClickCancel: PropTypes.func, // TODO: still needed?
   onFocusSearch: PropTypes$1.func,
   onFiltersChange: PropTypes$1.func,
   onClickBack: PropTypes$1.func,
@@ -1137,13 +1155,14 @@ var propTypes$1 = {
 var defaultProps$1 = {
   filters: null,
   media: null,
+  selectedMedia: null,
   storyId: null,
   tags: [],
   authors: [],
-  withoutTitle: false,
   withoutSource: false,
   withoutType: true,
   onClickAdd: null,
+  onClickItem: null,
   // onClickCancel: null,
   onFocusSearch: null,
   onFiltersChange: null,
@@ -1154,17 +1173,19 @@ var defaultProps$1 = {
 var Navbar = function Navbar(_ref) {
   var filters = _ref.filters,
       media = _ref.media,
+      selectedMedia = _ref.selectedMedia,
       storyId = _ref.storyId,
       tags = _ref.tags,
       authors = _ref.authors,
-      withoutTitle = _ref.withoutTitle,
       withoutSource = _ref.withoutSource,
       withoutType = _ref.withoutType,
       className = _ref.className,
       onClickAdd = _ref.onClickAdd,
+      onClickItem = _ref.onClickItem,
       onFocusSearch = _ref.onFocusSearch,
       onFiltersChange = _ref.onFiltersChange,
       onClickBack = _ref.onClickBack;
+  var intl = useIntl();
   var throttle = useRef(null);
 
   var _useState = useState(false),
@@ -1250,25 +1271,61 @@ var Navbar = function Navbar(_ref) {
 
     setOpen(true);
   });
-  var onClear = useCallback(function () {
+  var onCloseFilters = useCallback(function () {
     setOpen(false);
   }, [setOpen]);
   var onToggleMenu = useCallback(function () {
     setOpen(!open);
   }, [open, setOpen]);
-  var title = !withoutTitle ? /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "JV5hRr",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Media gallery"
-    }]
-  }) : null;
   return /*#__PURE__*/React.createElement("nav", {
     className: classNames([styles$4.container, 'navbar', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$4.inner
-  }, !withoutSource ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 flex-nowrap justify-content-center"
+  }, /*#__PURE__*/React.createElement("strong", {
+    className: "list-group-item rounded py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, selectedMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Media, {
+    className: styles$4.mediaPreview,
+    thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ml-2"
+  }, selectedMedia.name || 'untitled')) : /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "t9KqNo",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Upload a new image"
+    }]
+  })), selectedMedia === null ? /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faPlus
+    }),
+    onClick: onClickAdd,
+    title: intl.formatMessage({
+      "id": "Tt4jN1",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Add"
+      }]
+    })
+  }) : /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faTimes
+    }),
+    onClick: function onClick() {
+      return onClickItem(selectedMedia);
+    },
+    title: intl.formatMessage({
+      "id": "UG3SXh",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Remove"
+      }]
+    })
+  })), !withoutSource ? /*#__PURE__*/React.createElement("div", {
+    className: "py-2 d-flex w-100 flex-nowrap"
   }, /*#__PURE__*/React.createElement(DropdownSection, {
     items: sources,
     value: filters.source || null,
@@ -1286,20 +1343,8 @@ var Navbar = function Navbar(_ref) {
     }),
     onClick: onClickBack
   })) : null, /*#__PURE__*/React.createElement("strong", {
-    className: "navbar-text mr-auto w-100 d-flex align-items-center justify-content-between"
-  }, media !== null ? media.name : title, media === null ? /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faPlus
-    }),
-    onClick: onClickAdd
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "Tt4jN1",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Add"
-    }]
-  })) : null)), media === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "navbar-text mr-auto w-100"
+  }, media !== null ? media.name : null)), media === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React.createElement(Search, {
     value: searchValue,
@@ -1307,23 +1352,15 @@ var Navbar = function Navbar(_ref) {
     onFocus: onSearchFocus,
     onClickIcon: onToggleMenu,
     className: classNames(['form-inline'])
-  }), /*#__PURE__*/React.createElement("form", {
-    className: classNames(['form-inline'])
-  }, open ? /*#__PURE__*/React.createElement(Button, {
-    className: "ml-2",
-    theme: "primary",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faTimes
-    }),
-    onClick: onClear
-  }) : null)), open ? /*#__PURE__*/React.createElement("div", {
+  })), open ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React.createElement(SearchFilters, {
     filters: filters,
     sections: sections,
-    onChange: onFilterChange
+    onChange: onFilterChange,
+    onClose: onCloseFilters
   })) : null) : null, hasFilter && !open && media === null ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
+    className: "list-group-item py-2 px-2 d-flex w-100 my-2 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React.createElement(ActiveFilters, {
     filters: filters,
     sections: sections,
@@ -1371,9 +1408,9 @@ var MediaGallery = function MediaGallery(_ref) {
       source = _ref.source,
       isPicker = _ref.isPicker,
       isSmall = _ref.isSmall,
-      withoutTitle = _ref.withoutTitle,
-      withoutSource = _ref.withoutSource,
-      withoutType = _ref.withoutType,
+      withoutTitle = _ref.withoutTitle;
+      _ref.withoutSource;
+      var withoutType = _ref.withoutType,
       initialMedias = _ref.medias,
       selectedMedia = _ref.selectedMedia,
       className = _ref.className,
@@ -1499,12 +1536,15 @@ var MediaGallery = function MediaGallery(_ref) {
   }, /*#__PURE__*/React.createElement(Navbar, {
     filters: filtersValue,
     media: metadataMedia !== null ? metadataMedia : null,
+    selectedMedia: selectedMedia,
     onFiltersChange: onFiltersChange,
     onClickAdd: onClickAdd,
+    onClickItem: onClickItem,
     onClickBack: onClickBack,
     onClickCancel: onClickCancel,
-    withoutTitle: withoutTitle,
-    withoutSource: withoutSource,
+    withoutTitle: withoutTitle // withoutSource={withoutSource}
+    ,
+    withoutSource: false,
     withoutType: withoutType,
     storyId: storyId,
     authors: authors,

package/lib/index.js

@@ -695,7 +695,7 @@ PropTypes__default["default"].shape({
   usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
 });
 
-var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner"};
+var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
 
 var styles$3 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label"};
 
@@ -921,19 +921,21 @@ var TagSection = function TagSection(_ref) {
 TagSection.propTypes = propTypes$5;
 TagSection.defaultProps = defaultProps$5;
 
-var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
+var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
 
 var propTypes$4 = {
   filters: PropTypes__default["default"].object,
   // eslint-disable-line
   sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
   onChange: PropTypes__default["default"].func,
+  onClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps$4 = {
   filters: null,
   sections: [],
   onChange: null,
+  onClose: null,
   className: null
 };
 
@@ -941,7 +943,9 @@ var SearchFilters = function SearchFilters(_ref) {
   var filters = _ref.filters,
       sections = _ref.sections,
       onChange = _ref.onChange,
+      onClose = _ref.onClose,
       className = _ref.className;
+  var intl = reactIntl.useIntl();
   var getActive = React.useCallback(function (items, sectionFilters) {
     return items !== null ? items.map(function (it) {
       return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
@@ -982,7 +986,20 @@ var SearchFilters = function SearchFilters(_ref) {
     className: classNames__default["default"]([styles$2.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'])
-  }, activeSections.map(function (_ref3) {
+  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: classNames__default["default"]([styles$2.closeBtn, 'py-1', 'px-1', 'text-dark']),
+    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: freeSolidSvgIcons.faTimes
+    }),
+    onClick: onClose,
+    title: intl.formatMessage({
+      "id": "yCXMzz",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Close"
+      }]
+    })
+  }), activeSections.map(function (_ref3) {
     var value = _ref3.value,
         label = _ref3.label,
         items = _ref3.items;
@@ -1136,14 +1153,15 @@ ActiveFilters.defaultProps = defaultProps$2;
 var propTypes$1 = {
   filters: filtersValue,
   media: core.PropTypes.media,
+  selectedMedia: core.PropTypes.media,
   storyId: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   tags: core.PropTypes.tags,
   authors: core.PropTypes.authors,
-  withoutTitle: PropTypes__default["default"].bool,
   withoutSource: PropTypes__default["default"].bool,
   withoutType: PropTypes__default["default"].bool,
   onClickAdd: PropTypes__default["default"].func,
-  // onClickCancel: PropTypes.func,
+  onClickItem: PropTypes__default["default"].func,
+  // onClickCancel: PropTypes.func, // TODO: still needed?
   onFocusSearch: PropTypes__default["default"].func,
   onFiltersChange: PropTypes__default["default"].func,
   onClickBack: PropTypes__default["default"].func,
@@ -1152,13 +1170,14 @@ var propTypes$1 = {
 var defaultProps$1 = {
   filters: null,
   media: null,
+  selectedMedia: null,
   storyId: null,
   tags: [],
   authors: [],
-  withoutTitle: false,
   withoutSource: false,
   withoutType: true,
   onClickAdd: null,
+  onClickItem: null,
   // onClickCancel: null,
   onFocusSearch: null,
   onFiltersChange: null,
@@ -1169,17 +1188,19 @@ var defaultProps$1 = {
 var Navbar = function Navbar(_ref) {
   var filters = _ref.filters,
       media = _ref.media,
+      selectedMedia = _ref.selectedMedia,
       storyId = _ref.storyId,
       tags = _ref.tags,
       authors = _ref.authors,
-      withoutTitle = _ref.withoutTitle,
       withoutSource = _ref.withoutSource,
       withoutType = _ref.withoutType,
       className = _ref.className,
       onClickAdd = _ref.onClickAdd,
+      onClickItem = _ref.onClickItem,
       onFocusSearch = _ref.onFocusSearch,
       onFiltersChange = _ref.onFiltersChange,
       onClickBack = _ref.onClickBack;
+  var intl = reactIntl.useIntl();
   var throttle = React.useRef(null);
 
   var _useState = React.useState(false),
@@ -1265,25 +1286,61 @@ var Navbar = function Navbar(_ref) {
 
     setOpen(true);
   });
-  var onClear = React.useCallback(function () {
+  var onCloseFilters = React.useCallback(function () {
     setOpen(false);
   }, [setOpen]);
   var onToggleMenu = React.useCallback(function () {
     setOpen(!open);
   }, [open, setOpen]);
-  var title = !withoutTitle ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "JV5hRr",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Media gallery"
-    }]
-  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: classNames__default["default"]([styles$4.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$4.inner
-  }, !withoutSource ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "d-flex w-100 flex-nowrap justify-content-center"
+  }, /*#__PURE__*/React__default["default"].createElement("strong", {
+    className: "list-group-item rounded py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "d-flex align-items-center"
+  }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(components.Media, {
+    className: styles$4.mediaPreview,
+    thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "ml-2"
+  }, selectedMedia.name || 'untitled')) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "t9KqNo",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Upload a new image"
+    }]
+  })), selectedMedia === null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    theme: "primary",
+    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: freeSolidSvgIcons.faPlus
+    }),
+    onClick: onClickAdd,
+    title: intl.formatMessage({
+      "id": "Tt4jN1",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Add"
+      }]
+    })
+  }) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    theme: "primary",
+    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: freeSolidSvgIcons.faTimes
+    }),
+    onClick: function onClick() {
+      return onClickItem(selectedMedia);
+    },
+    title: intl.formatMessage({
+      "id": "UG3SXh",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Remove"
+      }]
+    })
+  })), !withoutSource ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "py-2 d-flex w-100 flex-nowrap"
   }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
     items: sources,
     value: filters.source || null,
@@ -1301,20 +1358,8 @@ var Navbar = function Navbar(_ref) {
     }),
     onClick: onClickBack
   })) : null, /*#__PURE__*/React__default["default"].createElement("strong", {
-    className: "navbar-text mr-auto w-100 d-flex align-items-center justify-content-between"
-  }, media !== null ? media.name : title, media === null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    theme: "primary",
-    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faPlus
-    }),
-    onClick: onClickAdd
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "Tt4jN1",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Add"
-    }]
-  })) : null)), media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "navbar-text mr-auto w-100"
+  }, media !== null ? media.name : null)), media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "d-flex w-100 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React__default["default"].createElement(Search, {
     value: searchValue,
@@ -1322,23 +1367,15 @@ var Navbar = function Navbar(_ref) {
     onFocus: onSearchFocus,
     onClickIcon: onToggleMenu,
     className: classNames__default["default"](['form-inline'])
-  }), /*#__PURE__*/React__default["default"].createElement("form", {
-    className: classNames__default["default"](['form-inline'])
-  }, open ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: "ml-2",
-    theme: "primary",
-    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faTimes
-    }),
-    onClick: onClear
-  }) : null)), open ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })), open ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React__default["default"].createElement(SearchFilters, {
     filters: filters,
     sections: sections,
-    onChange: onFilterChange
+    onChange: onFilterChange,
+    onClose: onCloseFilters
   })) : null) : null, hasFilter && !open && media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
+    className: "list-group-item py-2 px-2 d-flex w-100 my-2 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React__default["default"].createElement(ActiveFilters, {
     filters: filters,
     sections: sections,
@@ -1386,9 +1423,9 @@ var MediaGallery = function MediaGallery(_ref) {
       source = _ref.source,
       isPicker = _ref.isPicker,
       isSmall = _ref.isSmall,
-      withoutTitle = _ref.withoutTitle,
-      withoutSource = _ref.withoutSource,
-      withoutType = _ref.withoutType,
+      withoutTitle = _ref.withoutTitle;
+      _ref.withoutSource;
+      var withoutType = _ref.withoutType,
       initialMedias = _ref.medias,
       selectedMedia = _ref.selectedMedia,
       className = _ref.className,
@@ -1514,12 +1551,15 @@ var MediaGallery = function MediaGallery(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
     filters: filtersValue,
     media: metadataMedia !== null ? metadataMedia : null,
+    selectedMedia: selectedMedia,
     onFiltersChange: onFiltersChange,
     onClickAdd: onClickAdd,
+    onClickItem: onClickItem,
     onClickBack: onClickBack,
     onClickCancel: onClickCancel,
-    withoutTitle: withoutTitle,
-    withoutSource: withoutSource,
+    withoutTitle: withoutTitle // withoutSource={withoutSource}
+    ,
+    withoutSource: false,
     withoutType: withoutType,
     storyId: storyId,
     authors: authors,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.2.396",
+    "version": "0.2.397",
     "description": "",
     "keywords": [
         "javascript"
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "480deb93475c6eefcd4c5997b4ce7c9f32e6ff7d"
+    "gitHead": "23893b7baf6d53990e52f2a6cb9431c7f53113b5"
 }