@micromag/media-gallery 0.2.384 → 0.2.394

package/assets/css/styles.css

@@ -1,5 +1,5 @@
-.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:10px}.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{overflow-x:scroll;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-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-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-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%}

package/es/index.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { useMediasRecentSearches, useMediaTags, useApi, useMediaUpdate, useMedias, useMediaCreate } from '@micromag/data';
+import { useMediasRecentSearches, useMediaTags, useMediaUpdate, useMedias, useMediaCreate } from '@micromag/data';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Button, Card, Spinner, UploadModal } from '@micromag/core/components';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -13,9 +13,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faTimes, faChevronLeft, faPlus, faInfoCircle, faTimesCircle, faPlayCircle, faHeadphonesAlt } from '@fortawesome/free-solid-svg-icons';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useResizeObserver } from '@micromag/core/hooks';
-import prettyBytes from 'pretty-bytes';
+import { useStory, useFieldComponent } from '@micromag/core/contexts';
 import uniqBy from 'lodash/uniqBy';
-import { useFieldComponent } from '@micromag/core/contexts';
+import prettyBytes from 'pretty-bytes';
 
 var styles$8 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label"};
 
@@ -159,7 +159,7 @@ var TagSection = function TagSection(_ref) {
 TagSection.propTypes = propTypes$9;
 TagSection.defaultProps = defaultProps$9;
 
-var styles$7 = {"container":"micromag-media-gallery-forms-search-filters-container","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title"};
+var styles$7 = {"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 propTypes$8 = {
   filters: PropTypes.object,
@@ -230,6 +230,7 @@ var SearchFilters = function SearchFilters(_ref) {
     }, /*#__PURE__*/React.createElement("p", {
       className: classNames([styles$7.title, 'm-0'])
     }, label), /*#__PURE__*/React.createElement(TagSection, {
+      className: classNames([styles$7.tags]),
       tags: items,
       parent: value,
       onChange: onSectionChange
@@ -284,9 +285,12 @@ var Search = function Search(_ref) {
   }, [onClickIcon]);
   return /*#__PURE__*/React.createElement("form", {
     method: "post",
-    className: classNames([_defineProperty({}, className, className !== null)])
+    className: classNames(['w-100', _defineProperty({}, className, className !== null)]),
+    onSubmit: function onSubmit(e) {
+      return e.preventDefault();
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "input-group"
+    className: "input-group w-100"
   }, /*#__PURE__*/React.createElement("span", {
     type: "span",
     className: "input-group-prepend"
@@ -394,7 +398,7 @@ var ActiveFilters = function ActiveFilters(_ref) {
     return oneHasValue || filters[key] !== null;
   }, false);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, _defineProperty({}, className, className)])
+    className: classNames(['w-100', styles$5.container, _defineProperty({}, className, className)])
   }, hasValue ? /*#__PURE__*/React.createElement("div", {
     className: styles$5.heading
   }, /*#__PURE__*/React.createElement("div", {
@@ -469,6 +473,15 @@ var useSearchSections = function useSearchSections(_ref) {
       }]
     }),
     value: 'all'
+  }, {
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "eiaIIB",
+      defaultMessage: [{
+        "type": 0,
+        "value": "This Micromag"
+      }]
+    }),
+    value: 'micromag'
   }].concat(_toConsumableArray(team.length > 0 ? [{
     label: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "/62oe4",
@@ -634,9 +647,9 @@ var Navbar = function Navbar(_ref) {
       withoutSource = _ref.withoutSource,
       withoutType = _ref.withoutType,
       className = _ref.className,
-      onClickAdd = _ref.onClickAdd,
-      onClickCancel = _ref.onClickCancel,
-      onFocusSearch = _ref.onFocusSearch,
+      onClickAdd = _ref.onClickAdd;
+      _ref.onClickCancel;
+      var onFocusSearch = _ref.onFocusSearch,
       onFiltersChange = _ref.onFiltersChange,
       onClickBack = _ref.onClickBack;
   var throttle = useRef(null);
@@ -731,12 +744,8 @@ var Navbar = function Navbar(_ref) {
     setOpen(true);
   });
   var onClear = useCallback(function () {
-    if (onClickCancel !== null) {
-      onClickCancel();
-    }
-
     setOpen(false);
-  }, [onClickCancel]);
+  }, [setOpen]);
   var onToggleMenu = useCallback(function () {
     setOpen(!open);
   }, [open, setOpen]);
@@ -748,13 +757,19 @@ var Navbar = function Navbar(_ref) {
     }]
   }) : null;
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$4.container, 'navbar', 'small', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$4.container, 'navbar', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$4.inner
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex flex-nowrap justify-content-between"
+  }, !withoutSource && media === null ? /*#__PURE__*/React.createElement("div", {
+    className: "d-flex w-100 flex-nowrap justify-content-center"
+  }, /*#__PURE__*/React.createElement(DropdownSection, {
+    items: sources,
+    value: filters.source || null,
+    onChange: onSourceChange
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: "w-100 d-flex flex-nowrap justify-content-between"
   }, media !== null ? /*#__PURE__*/React.createElement("form", {
-    className: classNames(['form-inline'])
+    className: classNames(['form-inline', 'mr-2'])
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "secondary",
     outline: true,
@@ -764,40 +779,8 @@ var Navbar = function Navbar(_ref) {
     }),
     onClick: onClickBack
   })) : null, /*#__PURE__*/React.createElement("strong", {
-    className: "navbar-text ml-2 mr-auto"
-  }, media !== null ? media.name : title)), media === null ? /*#__PURE__*/React.createElement(React.Fragment, null, !withoutSource ? /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 flex-nowrap justify-content-center"
-  }, /*#__PURE__*/React.createElement(DropdownSection, {
-    items: sources,
-    value: filters.source || null,
-    onChange: onSourceChange
-  })) : null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex w-100 flex-nowrap justify-content-between"
-  }, /*#__PURE__*/React.createElement(Search, {
-    value: searchValue,
-    onChange: onSearchChange,
-    onFocus: onSearchFocus,
-    onClickIcon: onToggleMenu,
-    className: classNames(['form-inline', 'mr-2'])
-  }), /*#__PURE__*/React.createElement("form", {
-    className: classNames(['form-inline', 'ml-auto'])
-  }, open || searchValue || hasFilter ? /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    outline: true,
-    onClick: onClear
-  }, searchValue || hasFilter ? /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "+TT1y6",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Clear"
-    }]
-  }) : /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "G31Yd0",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  })) : /*#__PURE__*/React.createElement(Button, {
+    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
@@ -809,7 +792,24 @@ var Navbar = function Navbar(_ref) {
       "type": 0,
       "value": "Add"
     }]
-  })))), open ? /*#__PURE__*/React.createElement("div", {
+  })) : 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,
+    onChange: onSearchChange,
+    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", {
     className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React.createElement(SearchFilters, {
     filters: filters,
@@ -1051,27 +1051,40 @@ var MediaMetadata = function MediaMetadata(_ref) {
       _ref3$description = _ref3.description,
       mediaDescription = _ref3$description === void 0 ? null : _ref3$description,
       _ref3$tags = _ref3.tags,
-      mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
+      mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags; // const api = useApi();
 
-  var api = useApi();
+
+  var story = useStory();
+
+  var _ref4 = story || {},
+      _ref4$id = _ref4.id,
+      documentId = _ref4$id === void 0 ? null : _ref4$id;
 
   var _useMediaTags = useMediaTags(),
-      usedTags = _useMediaTags.tags;
+      usedTags = _useMediaTags.tags; // const { authors: usedAuthors } = useMediaAuthors();
+
 
   var _useMediaUpdate = useMediaUpdate(),
       update = _useMediaUpdate.update;
 
-  var loadTags = useCallback(function (input) {
-    return api.medias.getTags({
-      search: input
-    }, 5);
-  }, [api]);
-  var getOptionLabel = useCallback(function (_ref4) {
-    var name = _ref4.name;
+  console.log(story, documentId); // eslint-disable-line
+  // const loadTags = useCallback(
+  //     (input) =>
+  //         api.medias.getTags(
+  //             {
+  //                 search: input,
+  //             },
+  //             5,
+  //         ),
+  //     [api],
+  // );
+
+  var getOptionLabel = useCallback(function (_ref5) {
+    var name = _ref5.name;
     return name;
   }, []);
-  var getOptionValue = useCallback(function (_ref5) {
-    var name = _ref5.name;
+  var getOptionValue = useCallback(function (_ref6) {
+    var name = _ref6.name;
     return name;
   }, []);
   var getNewOptionData = useCallback(function (inputValue) {
@@ -1080,8 +1093,8 @@ var MediaMetadata = function MediaMetadata(_ref) {
     };
   }, []);
   var allTags = useMemo(function () {
-    return usedTags !== null ? uniqBy(mediaTags.concat(usedTags), function (_ref6) {
-      var id = _ref6.id;
+    return usedTags !== null ? uniqBy(mediaTags.concat(usedTags), function (_ref7) {
+      var id = _ref7.id;
       return id;
     }) : mediaTags;
   }, [mediaTags, usedTags]);
@@ -1209,8 +1222,8 @@ var MediaMetadata = function MediaMetadata(_ref) {
     }]
   })), /*#__PURE__*/React.createElement(TokensField, {
     value: tags,
-    options: allTags,
-    loadOptions: loadTags,
+    options: allTags // loadOptions={loadTags}
+    ,
     getOptionLabel: getOptionLabel,
     getOptionValue: getOptionValue,
     getNewOptionData: getNewOptionData,
@@ -1374,9 +1387,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,
@@ -1494,8 +1507,8 @@ var MediaGallery = function MediaGallery(_ref) {
     onClickAdd: onClickAdd,
     onClickBack: onClickBack,
     onClickCancel: onClickCancel,
-    withoutTitle: withoutTitle,
-    withoutSource: withoutSource,
+    withoutTitle: withoutTitle // withoutSource={withoutSource}
+    ,
     withoutType: withoutType,
     className: navbarClassName
   }), /*#__PURE__*/React.createElement("div", {

package/lib/index.js

@@ -15,9 +15,9 @@ var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var hooks = require('@micromag/core/hooks');
-var prettyBytes = require('pretty-bytes');
-var uniqBy = require('lodash/uniqBy');
 var contexts = require('@micromag/core/contexts');
+var uniqBy = require('lodash/uniqBy');
+var prettyBytes = require('pretty-bytes');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,8 +29,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
+var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
 
 var styles$8 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label"};
 
@@ -174,7 +174,7 @@ var TagSection = function TagSection(_ref) {
 TagSection.propTypes = propTypes$9;
 TagSection.defaultProps = defaultProps$9;
 
-var styles$7 = {"container":"micromag-media-gallery-forms-search-filters-container","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title"};
+var styles$7 = {"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 propTypes$8 = {
   filters: PropTypes__default["default"].object,
@@ -245,6 +245,7 @@ var SearchFilters = function SearchFilters(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: classNames__default["default"]([styles$7.title, 'm-0'])
     }, label), /*#__PURE__*/React__default["default"].createElement(TagSection, {
+      className: classNames__default["default"]([styles$7.tags]),
       tags: items,
       parent: value,
       onChange: onSectionChange
@@ -299,9 +300,12 @@ var Search = function Search(_ref) {
   }, [onClickIcon]);
   return /*#__PURE__*/React__default["default"].createElement("form", {
     method: "post",
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"](['w-100', _defineProperty__default["default"]({}, className, className !== null)]),
+    onSubmit: function onSubmit(e) {
+      return e.preventDefault();
+    }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "input-group"
+    className: "input-group w-100"
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     type: "span",
     className: "input-group-prepend"
@@ -409,7 +413,7 @@ var ActiveFilters = function ActiveFilters(_ref) {
     return oneHasValue || filters[key] !== null;
   }, false);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"](['w-100', styles$5.container, _defineProperty__default["default"]({}, className, className)])
   }, hasValue ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$5.heading
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -484,6 +488,15 @@ var useSearchSections = function useSearchSections(_ref) {
       }]
     }),
     value: 'all'
+  }, {
+    label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "eiaIIB",
+      defaultMessage: [{
+        "type": 0,
+        "value": "This Micromag"
+      }]
+    }),
+    value: 'micromag'
   }].concat(_toConsumableArray__default["default"](team.length > 0 ? [{
     label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       id: "/62oe4",
@@ -649,9 +662,9 @@ var Navbar = function Navbar(_ref) {
       withoutSource = _ref.withoutSource,
       withoutType = _ref.withoutType,
       className = _ref.className,
-      onClickAdd = _ref.onClickAdd,
-      onClickCancel = _ref.onClickCancel,
-      onFocusSearch = _ref.onFocusSearch,
+      onClickAdd = _ref.onClickAdd;
+      _ref.onClickCancel;
+      var onFocusSearch = _ref.onFocusSearch,
       onFiltersChange = _ref.onFiltersChange,
       onClickBack = _ref.onClickBack;
   var throttle = React.useRef(null);
@@ -746,12 +759,8 @@ var Navbar = function Navbar(_ref) {
     setOpen(true);
   });
   var onClear = React.useCallback(function () {
-    if (onClickCancel !== null) {
-      onClickCancel();
-    }
-
     setOpen(false);
-  }, [onClickCancel]);
+  }, [setOpen]);
   var onToggleMenu = React.useCallback(function () {
     setOpen(!open);
   }, [open, setOpen]);
@@ -763,13 +772,19 @@ var Navbar = function Navbar(_ref) {
     }]
   }) : null;
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$4.container, 'navbar', 'small', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$4.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$4.inner
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "d-flex flex-nowrap justify-content-between"
+  }, !withoutSource && media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "d-flex w-100 flex-nowrap justify-content-center"
+  }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
+    items: sources,
+    value: filters.source || null,
+    onChange: onSourceChange
+  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-100 d-flex flex-nowrap justify-content-between"
   }, media !== null ? /*#__PURE__*/React__default["default"].createElement("form", {
-    className: classNames__default["default"](['form-inline'])
+    className: classNames__default["default"](['form-inline', 'mr-2'])
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
     theme: "secondary",
     outline: true,
@@ -779,40 +794,8 @@ var Navbar = function Navbar(_ref) {
     }),
     onClick: onClickBack
   })) : null, /*#__PURE__*/React__default["default"].createElement("strong", {
-    className: "navbar-text ml-2 mr-auto"
-  }, media !== null ? media.name : title)), media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !withoutSource ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "d-flex w-100 flex-nowrap justify-content-center"
-  }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
-    items: sources,
-    value: filters.source || null,
-    onChange: onSourceChange
-  })) : 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,
-    onChange: onSearchChange,
-    onFocus: onSearchFocus,
-    onClickIcon: onToggleMenu,
-    className: classNames__default["default"](['form-inline', 'mr-2'])
-  }), /*#__PURE__*/React__default["default"].createElement("form", {
-    className: classNames__default["default"](['form-inline', 'ml-auto'])
-  }, open || searchValue || hasFilter ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    theme: "primary",
-    outline: true,
-    onClick: onClear
-  }, searchValue || hasFilter ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "+TT1y6",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Clear"
-    }]
-  }) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "G31Yd0",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  })) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    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
@@ -824,7 +807,24 @@ var Navbar = function Navbar(_ref) {
       "type": 0,
       "value": "Add"
     }]
-  })))), open ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : 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,
+    onChange: onSearchChange,
+    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", {
     className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React__default["default"].createElement(SearchFilters, {
     filters: filters,
@@ -1066,27 +1066,40 @@ var MediaMetadata = function MediaMetadata(_ref) {
       _ref3$description = _ref3.description,
       mediaDescription = _ref3$description === void 0 ? null : _ref3$description,
       _ref3$tags = _ref3.tags,
-      mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
+      mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags; // const api = useApi();
 
-  var api = data.useApi();
+
+  var story = contexts.useStory();
+
+  var _ref4 = story || {},
+      _ref4$id = _ref4.id,
+      documentId = _ref4$id === void 0 ? null : _ref4$id;
 
   var _useMediaTags = data.useMediaTags(),
-      usedTags = _useMediaTags.tags;
+      usedTags = _useMediaTags.tags; // const { authors: usedAuthors } = useMediaAuthors();
+
 
   var _useMediaUpdate = data.useMediaUpdate(),
       update = _useMediaUpdate.update;
 
-  var loadTags = React.useCallback(function (input) {
-    return api.medias.getTags({
-      search: input
-    }, 5);
-  }, [api]);
-  var getOptionLabel = React.useCallback(function (_ref4) {
-    var name = _ref4.name;
+  console.log(story, documentId); // eslint-disable-line
+  // const loadTags = useCallback(
+  //     (input) =>
+  //         api.medias.getTags(
+  //             {
+  //                 search: input,
+  //             },
+  //             5,
+  //         ),
+  //     [api],
+  // );
+
+  var getOptionLabel = React.useCallback(function (_ref5) {
+    var name = _ref5.name;
     return name;
   }, []);
-  var getOptionValue = React.useCallback(function (_ref5) {
-    var name = _ref5.name;
+  var getOptionValue = React.useCallback(function (_ref6) {
+    var name = _ref6.name;
     return name;
   }, []);
   var getNewOptionData = React.useCallback(function (inputValue) {
@@ -1095,8 +1108,8 @@ var MediaMetadata = function MediaMetadata(_ref) {
     };
   }, []);
   var allTags = React.useMemo(function () {
-    return usedTags !== null ? uniqBy__default["default"](mediaTags.concat(usedTags), function (_ref6) {
-      var id = _ref6.id;
+    return usedTags !== null ? uniqBy__default["default"](mediaTags.concat(usedTags), function (_ref7) {
+      var id = _ref7.id;
       return id;
     }) : mediaTags;
   }, [mediaTags, usedTags]);
@@ -1224,8 +1237,8 @@ var MediaMetadata = function MediaMetadata(_ref) {
     }]
   })), /*#__PURE__*/React__default["default"].createElement(TokensField, {
     value: tags,
-    options: allTags,
-    loadOptions: loadTags,
+    options: allTags // loadOptions={loadTags}
+    ,
     getOptionLabel: getOptionLabel,
     getOptionValue: getOptionValue,
     getNewOptionData: getNewOptionData,
@@ -1389,9 +1402,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,
@@ -1509,8 +1522,8 @@ var MediaGallery = function MediaGallery(_ref) {
     onClickAdd: onClickAdd,
     onClickBack: onClickBack,
     onClickCancel: onClickCancel,
-    withoutTitle: withoutTitle,
-    withoutSource: withoutSource,
+    withoutTitle: withoutTitle // withoutSource={withoutSource}
+    ,
     withoutType: withoutType,
     className: navbarClassName
   }), /*#__PURE__*/React__default["default"].createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.2.384",
+    "version": "0.2.394",
     "description": "",
     "keywords": [
         "javascript"
@@ -54,8 +54,8 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.2.384",
-        "@micromag/data": "^0.2.384",
+        "@micromag/core": "^0.2.391",
+        "@micromag/data": "^0.2.394",
         "bootstrap": "^4.5.3",
         "bootstrap.native": "^3.0.14",
         "change-case": "^4.1.2",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cfe309fba4ad374b6cd483e588d90ab3b76d2f5b"
+    "gitHead": "2271b376d8df6c2463b1b48489a047eab05a0e8f"
 }