@micromag/media-gallery 0.3.318 → 0.3.320

package/assets/css/styles.css

@@ -1,10 +1,10 @@
-.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-items-gallery-item-container{border:0;cursor:pointer;overflow:hidden;position:relative}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{background-color:#1c1c1c;background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:0;padding-bottom:100%;width:100%}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{height:16px;margin-right:5px;width:16px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;text-align:inherit}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.75rem}.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{color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C);padding:.5rem;position:absolute;top:0}.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{height:1rem;margin-right:0;width:1rem}.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{pointer-events:none;right:0}
 
 .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-partials-navbar-container{max-width:100%;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;padding-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-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-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-tag-section-container .micromag-media-gallery-forms-tag-section-tag{font-size:.75rem;line-height:1.1}
 .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-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-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-navbar-container{max-width:100%;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}

package/es/index.js

@@ -3,6 +3,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
+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';
@@ -25,8 +26,6 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 
-var styles$9 = {"container":"micromag-media-gallery-container","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","mediaMetadata":"micromag-media-gallery-mediaMetadata","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
-
 var middleEllipsis = function middleEllipsis(string, maxLength) {
   if (!string) return string;
   if (maxLength < 1) return string;
@@ -39,7 +38,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-var styles$8 = {"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$9 = {"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 = {
   item: PropTypes.media,
@@ -81,50 +80,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-light', 'text-black', styles$8.imageButton]),
+      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$9.imageButton]),
       onClick: onClick
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['card-img-top', styles$8.image]),
+      className: classNames(['card-img-top', styles$9.image]),
       style: {
         backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
       }
     })),
     beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
-      className: styles$8.infoButton,
+      className: styles$9.infoButton,
       onClick: onClickInfo,
       withoutStyle: true
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faInfoCircle,
-      className: styles$8.icon
+      className: styles$9.icon
     })) : null, selected ? /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-danger', styles$8.closeIcon])
+      className: classNames(['text-danger', styles$9.closeIcon])
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimesCircle,
-      className: styles$8.icon
+      className: styles$9.icon
     })) : null),
     footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$8.icon,
+      className: styles$9.icon,
       icon: faPlayCircle
     }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles$8.icon,
+      className: styles$9.icon,
       icon: faHeadphonesAlt
     }) : null, /*#__PURE__*/React.createElement("div", {
-      className: classNames(['text-truncate', styles$8.label])
+      className: classNames(['text-truncate', styles$9.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$8.container, _defineProperty({
+    className: classNames([styles$9.container, _defineProperty({
       'border-primary': selected
     }, className, className !== null)]),
-    footerClassName: classNames(['p-1', styles$8.footer]),
+    footerClassName: classNames(['p-1', styles$9.footer]),
     onClickFooter: onClick
   });
 };
 GalleryItem.propTypes = propTypes$a;
 GalleryItem.defaultProps = defaultProps$a;
 
-var styles$7 = {};
+var styles$8 = {};
 
 var propTypes$9 = {
   items: PropTypes.medias,
@@ -168,7 +167,7 @@ function Gallery(_ref) {
     return items;
   }, [selectedFirst, selectedItem, items]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$7.container, 'p-2', _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$8.container, 'p-2', _defineProperty({}, className, className !== null)]),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['row', 'mx-n1', 'row-cols-2', {
@@ -195,7 +194,7 @@ function Gallery(_ref) {
 Gallery.propTypes = propTypes$9;
 Gallery.defaultProps = defaultProps$9;
 
-var styles$6 = {"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$7 = {"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 = {
   media: PropTypes.media,
@@ -312,25 +311,25 @@ function MediaMetadata(_ref) {
   var TextField = useFieldComponent('text');
   var TokensField = useFieldComponent('tokens');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, _defineProperty({}, className, className)])
+    className: classNames([styles$7.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['position-relative', _defineProperty({
       'bg-light': type === 'audio',
       'bg-black': type === 'image'
-    }, styles$6.video, type === 'video')])
+    }, styles$7.video, type === 'video')])
   }, type === 'video' ? /*#__PURE__*/React.createElement("video", {
-    className: styles$6.player,
+    className: styles$7.player,
     controls: true,
     src: url
   }) : null, type === 'audio' ? /*#__PURE__*/React.createElement("div", {
-    className: styles$6.audio
+    className: styles$7.audio
   }, /*#__PURE__*/React.createElement("audio", {
-    className: styles$6.player,
+    className: styles$7.player,
     controls: true,
     src: url
   })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
     src: thumbnail,
-    className: styles$6.image,
+    className: styles$7.image,
     alt: filename
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: "p-2"
@@ -666,9 +665,7 @@ PropTypes$1.shape({
   usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
 });
 
-var styles$5 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
-
-var styles$4 = {"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$6 = {"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 = {
   value: PropTypes$1.string,
@@ -713,9 +710,9 @@ function DropdownSection(_ref) {
     onChange(val);
   }, [setOpen]);
   return items !== null && items.length > 1 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, 'dropdown', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$6.container, 'dropdown', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$4.label
+    className: styles$6.label
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "9ZdD+Q",
     defaultMessage: [{
@@ -723,7 +720,7 @@ function DropdownSection(_ref) {
       "value": "Library for"
     }]
   })), /*#__PURE__*/React.createElement("button", {
-    className: classNames([styles$4.dropdownToggle, 'dropdown-toggle', {
+    className: classNames([styles$6.dropdownToggle, 'dropdown-toggle', {
       open: open === true
     }]),
     type: "button",
@@ -736,7 +733,7 @@ function DropdownSection(_ref) {
       "value": "All"
     }]
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.dropdown, 'dropdown-menu', {
+    className: classNames([styles$6.dropdown, 'dropdown-menu', {
       show: open === true
     }])
   }, items.map(function (_ref3) {
@@ -801,7 +798,7 @@ var Search = function Search(_ref) {
   }, [onClickIcon]);
   return /*#__PURE__*/React.createElement("form", {
     method: "post",
-    className: classNames(['w-100', _defineProperty({}, className, className !== null)]),
+    className: classNames(['w-100', 'border', 'border-dark', 'rounded', _defineProperty({}, className, className !== null)]),
     onSubmit: function onSubmit(e) {
       return e.preventDefault();
     }
@@ -821,10 +818,10 @@ var Search = function Search(_ref) {
     type: "text",
     value: value || '',
     placeholder: intl.formatMessage({
-      id: "gprXiG",
+      id: "FFBsfJ",
       defaultMessage: [{
         "type": 0,
-        "value": "Search..."
+        "value": "Search medias..."
       }]
     }),
     onChange: onSearchChange,
@@ -835,9 +832,9 @@ var Search = function Search(_ref) {
 Search.propTypes = propTypes$6;
 Search.defaultProps = defaultProps$6;
 
-var styles$3 = {"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 styles$5 = {"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 styles$2 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
+var styles$4 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
 
 var propTypes$5 = {
   tags: PropTypes$1.arrayOf(PropTypes$1.shape({
@@ -865,12 +862,12 @@ var TagSection = function TagSection(_ref) {
     onChange(val, parent);
   }, [onChange, parent]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$4.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
   }, tags !== null ? tags.map(function (_ref3) {
     var label = _ref3.label,
       value = _ref3.value,
       active = _ref3.active;
-    var itemClassNames = classNames([styles$2.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
+    var itemClassNames = classNames([styles$4.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
       'btn-primary': active === true
       // 'btn-outline-light': active === false,
     }]);
@@ -945,11 +942,11 @@ var SearchFilters = function SearchFilters(_ref) {
     }
   }, [filters, onChange]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$5.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'])
   }, /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles$3.closeBtn, 'py-1', 'px-1', 'text-dark']),
+    className: classNames([styles$5.closeBtn, 'py-1', 'px-1', 'text-dark']),
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes
     }),
@@ -967,11 +964,11 @@ var SearchFilters = function SearchFilters(_ref) {
       items = _ref3.items;
     return items.length > 0 ? /*#__PURE__*/React.createElement("div", {
       key: "filter-".concat(value),
-      className: classNames([styles$3.section, 'py-2'])
+      className: classNames([styles$5.section, 'py-2'])
     }, /*#__PURE__*/React.createElement("p", {
-      className: classNames([styles$3.title, 'm-0'])
+      className: classNames([styles$5.title, 'm-0'])
     }, label), /*#__PURE__*/React.createElement(TagSection, {
-      className: classNames([styles$3.tags]),
+      className: classNames([styles$5.tags]),
       tags: items,
       parent: value,
       onChange: onSectionChange
@@ -981,9 +978,9 @@ var SearchFilters = function SearchFilters(_ref) {
 SearchFilters.propTypes = propTypes$4;
 SearchFilters.defaultProps = defaultProps$4;
 
-var styles$1 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
+var styles$3 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
 
-var styles = {"container":"micromag-media-gallery-buttons-close-container"};
+var styles$2 = {"container":"micromag-media-gallery-buttons-close-container"};
 
 var _excluded = ["className"];
 var propTypes$3 = {
@@ -996,11 +993,11 @@ var CloseButton = function CloseButton(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
     withoutStyle: true,
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes,
-      className: styles.icon
+      className: styles$2.icon
     }),
     iconPosition: "right"
   }, props));
@@ -1051,11 +1048,11 @@ function ActiveFilters(_ref) {
     return oneHasValue || filters[key] !== null;
   }, false);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$1.container, _defineProperty({}, className, className)])
+    className: classNames(['w-100', styles$3.container, _defineProperty({}, className, className)])
   }, hasValue ? /*#__PURE__*/React.createElement("div", {
-    className: styles$1.heading
+    className: styles$3.heading
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.title
+    className: styles$3.title
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "t2cFdl",
     defaultMessage: [{
@@ -1063,7 +1060,7 @@ function ActiveFilters(_ref) {
       "value": "Active filters"
     }]
   })), /*#__PURE__*/React.createElement(CloseButton, {
-    className: styles$1.resetButton,
+    className: styles$3.resetButton,
     onClick: handleReset
   }, /*#__PURE__*/React.createElement("u", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "/T/UDH",
@@ -1083,7 +1080,7 @@ function ActiveFilters(_ref) {
         _ref3$label = _ref3.label,
         label = _ref3$label === void 0 ? '' : _ref3$label;
       return /*#__PURE__*/React.createElement(Button, {
-        className: styles$1.activeTag,
+        className: styles$3.activeTag,
         key: "filter-button-".concat(activeValue),
         type: "submit",
         size: "sm",
@@ -1103,7 +1100,10 @@ function ActiveFilters(_ref) {
 ActiveFilters.propTypes = propTypes$2;
 ActiveFilters.defaultProps = defaultProps$2;
 
+var styles$1 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
+
 var propTypes$1 = {
+  types: PropTypes$1.arrayOf(PropTypes$1.string),
   filters: filtersValue,
   media: PropTypes.media,
   selectedMedia: PropTypes.media,
@@ -1123,6 +1123,7 @@ var propTypes$1 = {
   className: PropTypes$1.string
 };
 var defaultProps$1 = {
+  types: null,
   filters: null,
   media: null,
   selectedMedia: null,
@@ -1141,7 +1142,8 @@ var defaultProps$1 = {
   className: null
 };
 function Navbar(_ref) {
-  var filters = _ref.filters,
+  var types = _ref.types,
+    filters = _ref.filters,
     media = _ref.media,
     selectedMedia = _ref.selectedMedia,
     storyId = _ref.storyId,
@@ -1246,37 +1248,87 @@ function Navbar(_ref) {
       onClickItem(null);
     }
   }, [onClickClear, onClickItem]);
+  var uploadMessage = useMemo(function () {
+    var message = /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "3Ap0C1",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Upload a media"
+      }]
+    });
+    if (types !== null) {
+      if (types.indexOf('video') !== -1 && types.indexOf('image') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "KK5teQ",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a visual file"
+          }]
+        });
+      } else if (types.indexOf('video') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "WeD4nB",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a video file"
+          }]
+        });
+      } else if (types.indexOf('image') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "KdAKt7",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload an image file"
+          }]
+        });
+      } else if (types.indexOf('audio') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "6W4St0",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload an audio file"
+          }]
+        });
+      } else if (types.indexOf('subtitle') !== -1) {
+        message = /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "BAfC6s",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a closed captions file"
+          }]
+        });
+      }
+    }
+    return message;
+  }, [types]);
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$5.container, 'navbar', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$1.container, 'navbar', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.inner])
+    className: classNames([styles$1.inner])
   }, media === null ? /*#__PURE__*/React.createElement("div", {
-    className: "list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
+    className: classNames(['list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between', {
+      'border border-dark': selectedMedia !== null
+    }])
   }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles$5.mediaLabel, 'd-flex px-0 py-0 align-items-center']),
+    className: classNames([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
     onClick: function onClick() {
       return onClickItemInfo(selectedMedia);
-    }
+    },
+    theme: "primary",
+    outline: true
   }, /*#__PURE__*/React.createElement(Media, {
-    className: styles$5.mediaPreview,
+    className: styles$1.mediaPreview,
     thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
   }), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$5.mediaLabel, 'd-inline-block', 'text-truncate'])
+    className: classNames([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
   }, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "fVqgfl",
     defaultMessage: [{
       "type": 0,
       "value": "[no title]"
     }]
-  }))) : /*#__PURE__*/React.createElement("span", {
-    className: "ps-2"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "VspZp9",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Upload an image"
-    }]
-  })), selectedMedia === null ? /*#__PURE__*/React.createElement(Button, {
+  }))) : /*#__PURE__*/React.createElement(Button, {
+    className: "w-100",
     theme: "primary",
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faPlus
@@ -1289,7 +1341,9 @@ function Navbar(_ref) {
         "value": "Add"
       }]
     })
-  }) : /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ps-2"
+  }, uploadMessage)), selectedMedia === null ? null : /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faTimes
@@ -1349,6 +1403,8 @@ function Navbar(_ref) {
 Navbar.propTypes = propTypes$1;
 Navbar.defaultProps = defaultProps$1;
 
+var styles = {"container":"micromag-media-gallery-container","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","mediaMetadata":"micromag-media-gallery-mediaMetadata","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
+
 var videoTypes = ['video', 'image/gif'];
 var propTypes = {
   type: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.array]),
@@ -1473,11 +1529,10 @@ function MediaGallery(_ref) {
   }, [setMetadataMedia]);
 
   // Reset all filters except source
-  useCallback(function () {
-    return setFiltersValue(_objectSpread(_objectSpread({}, defaultFilters), {}, {
-      source: filtersValue.source || null
-    }));
-  }, [defaultFilters, filtersValue, setFiltersValue]);
+  // const onClickCancel = useCallback(
+  //     () => setFiltersValue({ ...defaultFilters, source: filtersValue.source || null }),
+  //     [defaultFilters, filtersValue, setFiltersValue],
+  // );
 
   // Upload modal
   var _useState9 = useState(false),
@@ -1504,8 +1559,9 @@ function MediaGallery(_ref) {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, styles$9.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
+    className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
   }, /*#__PURE__*/React.createElement(Navbar, {
+    types: isArray(type) ? type : [type],
     filters: filtersValue,
     media: metadataMedia !== null ? metadataMedia : null,
     selectedMedia: selectedMedia,
@@ -1523,9 +1579,9 @@ function MediaGallery(_ref) {
     tags: tags,
     className: navbarClassName
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$9.content
+    className: styles.content
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.gallery
+    className: styles.gallery
   }, medias !== null && !uploading ? /*#__PURE__*/React.createElement(Gallery, {
     items: medias,
     selectedItem: selectedMedia,
@@ -1535,9 +1591,9 @@ function MediaGallery(_ref) {
     onClickItem: onClickItem,
     onClickItemInfo: onClickItemInfo
   }) : null, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
-    className: styles$9.loading
+    className: styles.loading
   }) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles$9.mediaMetadata
+    className: styles.mediaMetadata
   }, /*#__PURE__*/React.createElement(MediaMetadata, {
     media: metadataMedia,
     tags: tags,

package/lib/index.js

@@ -5,6 +5,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classNames = require('classnames');
+var isArray = require('lodash/isArray');
 var PropTypes = require('prop-types');
 var React = require('react');
 var reactDom = require('react-dom');
@@ -34,14 +35,13 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumab
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
-var styles$9 = {"container":"micromag-media-gallery-container","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","mediaMetadata":"micromag-media-gallery-mediaMetadata","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
-
 var middleEllipsis = function middleEllipsis(string, maxLength) {
   if (!string) return string;
   if (maxLength < 1) return string;
@@ -54,7 +54,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-var styles$8 = {"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$9 = {"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 = {
   item: core.PropTypes.media,
@@ -96,50 +96,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-light', 'text-black', styles$8.imageButton]),
+      className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$9.imageButton]),
       onClick: onClick
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"](['card-img-top', styles$8.image]),
+      className: classNames__default["default"](['card-img-top', styles$9.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$8.infoButton,
+      className: styles$9.infoButton,
       onClick: onClickInfo,
       withoutStyle: true
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faInfoCircle.faInfoCircle,
-      className: styles$8.icon
+      className: styles$9.icon
     })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"](['text-danger', styles$8.closeIcon])
+      className: classNames__default["default"](['text-danger', styles$9.closeIcon])
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faTimesCircle.faTimesCircle,
-      className: styles$8.icon
+      className: styles$9.icon
     })) : null),
     footer: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$8.icon,
+      className: styles$9.icon,
       icon: faPlayCircle.faPlayCircle
     }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      className: styles$8.icon,
+      className: styles$9.icon,
       icon: faHeadphonesAlt.faHeadphonesAlt
     }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"](['text-truncate', styles$8.label])
+      className: classNames__default["default"](['text-truncate', styles$9.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$8.container, _defineProperty__default["default"]({
+    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({
       'border-primary': selected
     }, className, className !== null)]),
-    footerClassName: classNames__default["default"](['p-1', styles$8.footer]),
+    footerClassName: classNames__default["default"](['p-1', styles$9.footer]),
     onClickFooter: onClick
   });
 };
 GalleryItem.propTypes = propTypes$a;
 GalleryItem.defaultProps = defaultProps$a;
 
-var styles$7 = {};
+var styles$8 = {};
 
 var propTypes$9 = {
   items: core.PropTypes.medias,
@@ -183,7 +183,7 @@ function Gallery(_ref) {
     return items;
   }, [selectedFirst, selectedItem, items]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$7.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$8.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', {
@@ -210,7 +210,7 @@ function Gallery(_ref) {
 Gallery.propTypes = propTypes$9;
 Gallery.defaultProps = defaultProps$9;
 
-var styles$6 = {"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$7 = {"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 = {
   media: core.PropTypes.media,
@@ -327,25 +327,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$6.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$7.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$6.video, type === 'video')])
+    }, styles$7.video, type === 'video')])
   }, type === 'video' ? /*#__PURE__*/React__default["default"].createElement("video", {
-    className: styles$6.player,
+    className: styles$7.player,
     controls: true,
     src: url
   }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$6.audio
+    className: styles$7.audio
   }, /*#__PURE__*/React__default["default"].createElement("audio", {
-    className: styles$6.player,
+    className: styles$7.player,
     controls: true,
     src: url
   })) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: thumbnail,
-    className: styles$6.image,
+    className: styles$7.image,
     alt: filename
   }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "p-2"
@@ -681,9 +681,7 @@ PropTypes__default["default"].shape({
   usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
 });
 
-var styles$5 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
-
-var styles$4 = {"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$6 = {"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 = {
   value: PropTypes__default["default"].string,
@@ -728,9 +726,9 @@ function DropdownSection(_ref) {
     onChange(val);
   }, [setOpen]);
   return items !== null && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$4.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$6.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$4.label
+    className: styles$6.label
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "9ZdD+Q",
     defaultMessage: [{
@@ -738,7 +736,7 @@ function DropdownSection(_ref) {
       "value": "Library for"
     }]
   })), /*#__PURE__*/React__default["default"].createElement("button", {
-    className: classNames__default["default"]([styles$4.dropdownToggle, 'dropdown-toggle', {
+    className: classNames__default["default"]([styles$6.dropdownToggle, 'dropdown-toggle', {
       open: open === true
     }]),
     type: "button",
@@ -751,7 +749,7 @@ function DropdownSection(_ref) {
       "value": "All"
     }]
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$4.dropdown, 'dropdown-menu', {
+    className: classNames__default["default"]([styles$6.dropdown, 'dropdown-menu', {
       show: open === true
     }])
   }, items.map(function (_ref3) {
@@ -816,7 +814,7 @@ var Search = function Search(_ref) {
   }, [onClickIcon]);
   return /*#__PURE__*/React__default["default"].createElement("form", {
     method: "post",
-    className: classNames__default["default"](['w-100', _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"](['w-100', 'border', 'border-dark', 'rounded', _defineProperty__default["default"]({}, className, className !== null)]),
     onSubmit: function onSubmit(e) {
       return e.preventDefault();
     }
@@ -836,10 +834,10 @@ var Search = function Search(_ref) {
     type: "text",
     value: value || '',
     placeholder: intl.formatMessage({
-      id: "gprXiG",
+      id: "FFBsfJ",
       defaultMessage: [{
         "type": 0,
-        "value": "Search..."
+        "value": "Search medias..."
       }]
     }),
     onChange: onSearchChange,
@@ -850,9 +848,9 @@ var Search = function Search(_ref) {
 Search.propTypes = propTypes$6;
 Search.defaultProps = defaultProps$6;
 
-var styles$3 = {"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 styles$5 = {"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 styles$2 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
+var styles$4 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
 
 var propTypes$5 = {
   tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
@@ -880,12 +878,12 @@ var TagSection = function TagSection(_ref) {
     onChange(val, parent);
   }, [onChange, parent]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$2.container, 'd-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$4.container, 'd-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
   }, tags !== null ? tags.map(function (_ref3) {
     var label = _ref3.label,
       value = _ref3.value,
       active = _ref3.active;
-    var itemClassNames = classNames__default["default"]([styles$2.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
+    var itemClassNames = classNames__default["default"]([styles$4.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
       'btn-primary': active === true
       // 'btn-outline-light': active === false,
     }]);
@@ -960,11 +958,11 @@ var SearchFilters = function SearchFilters(_ref) {
     }
   }, [filters, onChange]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$3.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$5.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'])
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: classNames__default["default"]([styles$3.closeBtn, 'py-1', 'px-1', 'text-dark']),
+    className: classNames__default["default"]([styles$5.closeBtn, 'py-1', 'px-1', 'text-dark']),
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faTimes.faTimes
     }),
@@ -982,11 +980,11 @@ var SearchFilters = function SearchFilters(_ref) {
       items = _ref3.items;
     return items.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
       key: "filter-".concat(value),
-      className: classNames__default["default"]([styles$3.section, 'py-2'])
+      className: classNames__default["default"]([styles$5.section, 'py-2'])
     }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: classNames__default["default"]([styles$3.title, 'm-0'])
+      className: classNames__default["default"]([styles$5.title, 'm-0'])
     }, label), /*#__PURE__*/React__default["default"].createElement(TagSection, {
-      className: classNames__default["default"]([styles$3.tags]),
+      className: classNames__default["default"]([styles$5.tags]),
       tags: items,
       parent: value,
       onChange: onSectionChange
@@ -996,9 +994,9 @@ var SearchFilters = function SearchFilters(_ref) {
 SearchFilters.propTypes = propTypes$4;
 SearchFilters.defaultProps = defaultProps$4;
 
-var styles$1 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
+var styles$3 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
 
-var styles = {"container":"micromag-media-gallery-buttons-close-container"};
+var styles$2 = {"container":"micromag-media-gallery-buttons-close-container"};
 
 var _excluded = ["className"];
 var propTypes$3 = {
@@ -1011,11 +1009,11 @@ var CloseButton = function CloseButton(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties__default["default"](_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
-    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
     withoutStyle: true,
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faTimes.faTimes,
-      className: styles.icon
+      className: styles$2.icon
     }),
     iconPosition: "right"
   }, props));
@@ -1066,11 +1064,11 @@ function ActiveFilters(_ref) {
     return oneHasValue || filters[key] !== null;
   }, false);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$1.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"](['w-100', styles$3.container, _defineProperty__default["default"]({}, className, className)])
   }, hasValue ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1.heading
+    className: styles$3.heading
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1.title
+    className: styles$3.title
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "t2cFdl",
     defaultMessage: [{
@@ -1078,7 +1076,7 @@ function ActiveFilters(_ref) {
       "value": "Active filters"
     }]
   })), /*#__PURE__*/React__default["default"].createElement(CloseButton, {
-    className: styles$1.resetButton,
+    className: styles$3.resetButton,
     onClick: handleReset
   }, /*#__PURE__*/React__default["default"].createElement("u", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "/T/UDH",
@@ -1098,7 +1096,7 @@ function ActiveFilters(_ref) {
         _ref3$label = _ref3.label,
         label = _ref3$label === void 0 ? '' : _ref3$label;
       return /*#__PURE__*/React__default["default"].createElement(components.Button, {
-        className: styles$1.activeTag,
+        className: styles$3.activeTag,
         key: "filter-button-".concat(activeValue),
         type: "submit",
         size: "sm",
@@ -1118,7 +1116,10 @@ function ActiveFilters(_ref) {
 ActiveFilters.propTypes = propTypes$2;
 ActiveFilters.defaultProps = defaultProps$2;
 
+var styles$1 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
+
 var propTypes$1 = {
+  types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
   filters: filtersValue,
   media: core.PropTypes.media,
   selectedMedia: core.PropTypes.media,
@@ -1138,6 +1139,7 @@ var propTypes$1 = {
   className: PropTypes__default["default"].string
 };
 var defaultProps$1 = {
+  types: null,
   filters: null,
   media: null,
   selectedMedia: null,
@@ -1156,7 +1158,8 @@ var defaultProps$1 = {
   className: null
 };
 function Navbar(_ref) {
-  var filters = _ref.filters,
+  var types = _ref.types,
+    filters = _ref.filters,
     media = _ref.media,
     selectedMedia = _ref.selectedMedia,
     storyId = _ref.storyId,
@@ -1261,37 +1264,87 @@ function Navbar(_ref) {
       onClickItem(null);
     }
   }, [onClickClear, onClickItem]);
+  var uploadMessage = React.useMemo(function () {
+    var message = /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "3Ap0C1",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Upload a media"
+      }]
+    });
+    if (types !== null) {
+      if (types.indexOf('video') !== -1 && types.indexOf('image') !== -1) {
+        message = /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "KK5teQ",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a visual file"
+          }]
+        });
+      } else if (types.indexOf('video') !== -1) {
+        message = /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "WeD4nB",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a video file"
+          }]
+        });
+      } else if (types.indexOf('image') !== -1) {
+        message = /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "KdAKt7",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload an image file"
+          }]
+        });
+      } else if (types.indexOf('audio') !== -1) {
+        message = /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "6W4St0",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload an audio file"
+          }]
+        });
+      } else if (types.indexOf('subtitle') !== -1) {
+        message = /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "BAfC6s",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Upload a closed captions file"
+          }]
+        });
+      }
+    }
+    return message;
+  }, [types]);
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$5.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$1.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$5.inner])
+    className: classNames__default["default"]([styles$1.inner])
   }, media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
+    className: classNames__default["default"](['list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between', {
+      'border border-dark': selectedMedia !== null
+    }])
   }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: classNames__default["default"]([styles$5.mediaLabel, 'd-flex px-0 py-0 align-items-center']),
+    className: classNames__default["default"]([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
     onClick: function onClick() {
       return onClickItemInfo(selectedMedia);
-    }
+    },
+    theme: "primary",
+    outline: true
   }, /*#__PURE__*/React__default["default"].createElement(components.Media, {
-    className: styles$5.mediaPreview,
+    className: styles$1.mediaPreview,
     thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$5.mediaLabel, 'd-inline-block', 'text-truncate'])
+    className: classNames__default["default"]([styles$1.mediaLabel, 'd-inline-block', 'text-truncate', 'mx-1', 'me-2'])
   }, selectedMedia.name || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "fVqgfl",
     defaultMessage: [{
       "type": 0,
       "value": "[no title]"
     }]
-  }))) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "ps-2"
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "VspZp9",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Upload an image"
-    }]
-  })), selectedMedia === null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  }))) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: "w-100",
     theme: "primary",
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faPlus.faPlus
@@ -1304,7 +1357,9 @@ function Navbar(_ref) {
         "value": "Add"
       }]
     })
-  }) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "ps-2"
+  }, uploadMessage)), selectedMedia === null ? null : /*#__PURE__*/React__default["default"].createElement(components.Button, {
     theme: "primary",
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faTimes.faTimes
@@ -1364,6 +1419,8 @@ function Navbar(_ref) {
 Navbar.propTypes = propTypes$1;
 Navbar.defaultProps = defaultProps$1;
 
+var styles = {"container":"micromag-media-gallery-container","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","mediaMetadata":"micromag-media-gallery-mediaMetadata","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
+
 var videoTypes = ['video', 'image/gif'];
 var propTypes = {
   type: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array]),
@@ -1488,11 +1545,10 @@ function MediaGallery(_ref) {
   }, [setMetadataMedia]);
 
   // Reset all filters except source
-  React.useCallback(function () {
-    return setFiltersValue(_objectSpread__default["default"](_objectSpread__default["default"]({}, defaultFilters), {}, {
-      source: filtersValue.source || null
-    }));
-  }, [defaultFilters, filtersValue, setFiltersValue]);
+  // const onClickCancel = useCallback(
+  //     () => setFiltersValue({ ...defaultFilters, source: filtersValue.source || null }),
+  //     [defaultFilters, filtersValue, setFiltersValue],
+  // );
 
   // Upload modal
   var _useState9 = React.useState(false),
@@ -1519,8 +1575,9 @@ function MediaGallery(_ref) {
     return setUploadModalOpened(false);
   }, [setUploadModalOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$9.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$9.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref3, className, className), _ref3)])
+    className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref3, className, className), _ref3)])
   }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
+    types: isArray__default["default"](type) ? type : [type],
     filters: filtersValue,
     media: metadataMedia !== null ? metadataMedia : null,
     selectedMedia: selectedMedia,
@@ -1538,9 +1595,9 @@ function MediaGallery(_ref) {
     tags: tags,
     className: navbarClassName
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$9.content
+    className: styles.content
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$9.gallery
+    className: styles.gallery
   }, medias !== null && !uploading ? /*#__PURE__*/React__default["default"].createElement(Gallery, {
     items: medias,
     selectedItem: selectedMedia,
@@ -1550,9 +1607,9 @@ function MediaGallery(_ref) {
     onClickItem: onClickItem,
     onClickItemInfo: onClickItemInfo
   }) : null, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
-    className: styles$9.loading
+    className: styles.loading
   }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$9.mediaMetadata
+    className: styles.mediaMetadata
   }, /*#__PURE__*/React__default["default"].createElement(MediaMetadata, {
     media: metadataMedia,
     tags: tags,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.318",
+    "version": "0.3.320",
     "description": "",
     "keywords": [
         "javascript"
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
+    "gitHead": "067fa7bf5e729c6e7c9df5a5832d60376fd8a812"
 }