@micromag/media-gallery 0.3.24 → 0.3.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +3 -2
  2. package/es/index.js +49 -49
  3. package/lib/index.js +49 -49
  4. package/package.json +4 -4
package/assets/css/styles.css CHANGED
@@ -1,9 +1,10 @@
1
1
  .micromag-media-gallery-container .micromag-media-gallery-mediaMetadata,.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{position:absolute;top:0;left:0;width:100%}.micromag-media-gallery-container{position:relative}.micromag-media-gallery-container .micromag-media-gallery-content{position:relative;width:100%;overflow:hidden}.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;width:auto;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}
2
2
 
3
- .micromag-media-gallery-items-gallery-item-container{position:relative;overflow:hidden;cursor:pointer}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{display:block;width:100%;height:0;padding-bottom:75%;background-repeat:no-repeat;background-position:50%;background-size:cover}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{width:16px;height:16px;margin-right:5px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:0;background:rgba(0,0,0,0);color:inherit;text-align:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.8rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{position:absolute;top:0;padding:.5rem;color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1C1C1C);filter:drop-shadow(0 0 .75rem #1C1C1C)}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon .micromag-media-gallery-items-gallery-item-icon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton .micromag-media-gallery-items-gallery-item-icon{width:1rem;height:1rem;margin-right:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon{right:0;pointer-events:none}
3
+ .micromag-media-gallery-items-gallery-item-container{position:relative;overflow:hidden;border:0;cursor:pointer}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{display:block;width:100%;height:0;padding-bottom:100%;background-color:#1c1c1c;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{width:16px;height:16px;margin-right:5px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:0;background:rgba(0,0,0,0);color:inherit;text-align:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.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{position:absolute;top:0;padding:.5rem;color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1C1C1C);filter:drop-shadow(0 0 .75rem #1C1C1C)}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon .micromag-media-gallery-items-gallery-item-icon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton .micromag-media-gallery-items-gallery-item-icon{width:1rem;height:1rem;margin-right:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon{right:0;pointer-events:none}
4
4
  .micromag-media-gallery-partials-media-metadata-container{position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-image{display:block;max-width:100%;min-height:200px;max-height:40vh;margin:0 auto}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{position:relative;height:40vh;min-height:200px;background-color:#1c1c1c}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{position:absolute;bottom:0;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio .micromag-media-gallery-partials-media-metadata-player{display:block;margin:0 auto}
5
5
  .micromag-media-gallery-partials-navbar-container{position:relative;padding:.5rem}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{width:25%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{width:100%}
6
6
  .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-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdown{left:auto;right:0}
7
- .micromag-media-gallery-forms-search-filters-container{position:absolute;z-index:1;right:0;left:0;width:100%;padding:0 15px;overflow:hidden}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn{position:absolute;right:24px}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section{border-bottom:1px solid #adadad}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section:last-child{border-bottom:0}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-tags{overflow-x:auto}
7
+ .micromag-media-gallery-forms-search-filters-container{position:absolute;z-index:1;right:0;left:0;width:100%;padding:0 10px;overflow:hidden}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn{position:absolute;right:24px}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section{border-bottom:1px solid #adadad}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section:last-child{border-bottom:0}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-tags{overflow-x:auto}
8
+ .micromag-media-gallery-forms-tag-section-container .micromag-media-gallery-forms-tag-section-tag{font-size:.75rem;line-height:1.1}
8
9
  .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}
9
10
  .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}
package/es/index.js CHANGED
@@ -17,9 +17,9 @@ import prettyBytes from 'pretty-bytes';
17
17
  import { FormattedMessage, useIntl } from 'react-intl';
18
18
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
19
19
 
20
- var styles$8 = {"container":"micromag-media-gallery-container","mediaMetadata":"micromag-media-gallery-mediaMetadata","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
20
+ var styles$9 = {"container":"micromag-media-gallery-container","mediaMetadata":"micromag-media-gallery-mediaMetadata","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
21
21
 
22
- var styles$7 = {};
22
+ var styles$8 = {};
23
23
 
24
24
  var middleEllipsis = function middleEllipsis(string, maxLength) {
25
25
  if (!string) return string;
@@ -33,7 +33,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
33
33
  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
34
34
  };
35
35
 
36
- var styles$6 = {"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","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon","infoButton":"micromag-media-gallery-items-gallery-item-infoButton"};
36
+ var styles$7 = {"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","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon","infoButton":"micromag-media-gallery-items-gallery-item-infoButton"};
37
37
 
38
38
  var propTypes$a = {
39
39
  item: PropTypes.media,
@@ -78,43 +78,43 @@ var GalleryItem = function GalleryItem(_ref) {
78
78
  return /*#__PURE__*/React.createElement(Card, {
79
79
  image: /*#__PURE__*/React.createElement("button", {
80
80
  type: "button",
81
- className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$6.imageButton]),
81
+ className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$7.imageButton]),
82
82
  onClick: onClick
83
83
  }, /*#__PURE__*/React.createElement("div", {
84
- className: classNames(['card-img-top', styles$6.image]),
84
+ className: classNames(['card-img-top', styles$7.image]),
85
85
  style: {
86
86
  backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
87
87
  }
88
88
  })),
89
89
  beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
90
- className: styles$6.infoButton,
90
+ className: styles$7.infoButton,
91
91
  onClick: onClickInfo,
92
92
  withoutStyle: true
93
93
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
94
94
  icon: faInfoCircle,
95
- className: styles$6.icon
95
+ className: styles$7.icon
96
96
  })) : null, selected ? /*#__PURE__*/React.createElement("div", {
97
- className: classNames(['text-danger', styles$6.closeIcon])
97
+ className: classNames(['text-danger', styles$7.closeIcon])
98
98
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
99
99
  icon: faTimesCircle,
100
- className: styles$6.icon
100
+ className: styles$7.icon
101
101
  })) : null),
102
102
  footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
103
- className: styles$6.icon,
103
+ className: styles$7.icon,
104
104
  icon: faPlayCircle
105
105
  }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
106
- className: styles$6.icon,
106
+ className: styles$7.icon,
107
107
  icon: faHeadphonesAlt
108
108
  }) : null, /*#__PURE__*/React.createElement("div", {
109
- className: classNames(['text-truncate', styles$6.label])
109
+ className: classNames(['text-truncate', styles$7.label])
110
110
  }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
111
111
  className: "text-muted ms-1"
112
112
  }, size) : null)),
113
113
  theme: selected ? 'primary' : null,
114
- className: classNames([styles$6.container, _defineProperty({
114
+ className: classNames([styles$7.container, _defineProperty({
115
115
  'border-primary': selected
116
116
  }, className, className !== null)]),
117
- footerClassName: classNames(['p-2', styles$6.footer]),
117
+ footerClassName: classNames(['p-1', styles$7.footer]),
118
118
  onClickFooter: onClick
119
119
  });
120
120
  };
@@ -171,7 +171,7 @@ function Gallery(_ref) {
171
171
  return items;
172
172
  }, [selectedFirst, selectedItem, items]);
173
173
  return /*#__PURE__*/React.createElement("div", {
174
- className: classNames([styles$7.container, 'p-2', _defineProperty({}, className, className !== null)]),
174
+ className: classNames([styles$8.container, 'p-2', _defineProperty({}, className, className !== null)]),
175
175
  ref: ref
176
176
  }, /*#__PURE__*/React.createElement("div", {
177
177
  className: classNames(['row', 'mx-n1', 'row-cols-2', {
@@ -199,7 +199,7 @@ function Gallery(_ref) {
199
199
  Gallery.propTypes = propTypes$9;
200
200
  Gallery.defaultProps = defaultProps$9;
201
201
 
202
- var styles$5 = {"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"};
202
+ 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"};
203
203
 
204
204
  var propTypes$8 = {
205
205
  media: PropTypes.media,
@@ -327,25 +327,25 @@ function MediaMetadata(_ref) {
327
327
  var TextField = useFieldComponent('text');
328
328
  var TokensField = useFieldComponent('tokens');
329
329
  return /*#__PURE__*/React.createElement("div", {
330
- className: classNames([styles$5.container, _defineProperty({}, className, className)])
330
+ className: classNames([styles$6.container, _defineProperty({}, className, className)])
331
331
  }, /*#__PURE__*/React.createElement("div", {
332
332
  className: classNames(['position-relative', _defineProperty({
333
333
  'bg-light': type === 'audio',
334
334
  'bg-black': type === 'image'
335
- }, styles$5.video, type === 'video')])
335
+ }, styles$6.video, type === 'video')])
336
336
  }, type === 'video' ? /*#__PURE__*/React.createElement("video", {
337
- className: styles$5.player,
337
+ className: styles$6.player,
338
338
  controls: true,
339
339
  src: url
340
340
  }) : null, type === 'audio' ? /*#__PURE__*/React.createElement("div", {
341
- className: styles$5.audio
341
+ className: styles$6.audio
342
342
  }, /*#__PURE__*/React.createElement("audio", {
343
- className: styles$5.player,
343
+ className: styles$6.player,
344
344
  controls: true,
345
345
  src: url
346
346
  })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
347
347
  src: thumbnail,
348
- className: styles$5.image,
348
+ className: styles$6.image,
349
349
  alt: filename
350
350
  }) : null), /*#__PURE__*/React.createElement("div", {
351
351
  className: "p-2"
@@ -541,7 +541,7 @@ var useSearchFilters = function useSearchFilters(_ref) {
541
541
  "value": "This Micromag"
542
542
  }]
543
543
  }),
544
- value: "document:".concat(storyId)
544
+ value: "document-".concat(storyId)
545
545
  }] : []), [{
546
546
  label: /*#__PURE__*/React.createElement(FormattedMessage, {
547
547
  id: "xAzv6g",
@@ -680,9 +680,9 @@ PropTypes$1.shape({
680
680
  usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
681
681
  });
682
682
 
683
- var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
683
+ var styles$5 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
684
684
 
685
- var styles$3 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
685
+ 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"};
686
686
 
687
687
  var propTypes$7 = {
688
688
  value: PropTypes$1.string,
@@ -730,9 +730,9 @@ function DropdownSection(_ref) {
730
730
  onChange(val);
731
731
  }, [setOpen]);
732
732
  return items !== null && items.length > 1 ? /*#__PURE__*/React.createElement("div", {
733
- className: classNames([styles$3.container, 'dropdown', _defineProperty({}, className, className !== null)])
733
+ className: classNames([styles$4.container, 'dropdown', _defineProperty({}, className, className !== null)])
734
734
  }, /*#__PURE__*/React.createElement("span", {
735
- className: styles$3.label
735
+ className: styles$4.label
736
736
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
737
737
  id: "9ZdD+Q",
738
738
  defaultMessage: [{
@@ -740,7 +740,7 @@ function DropdownSection(_ref) {
740
740
  "value": "Library for"
741
741
  }]
742
742
  })), /*#__PURE__*/React.createElement("button", {
743
- className: classNames([styles$3.dropdownToggle, 'dropdown-toggle', {
743
+ className: classNames([styles$4.dropdownToggle, 'dropdown-toggle', {
744
744
  open: open === true
745
745
  }]),
746
746
  type: "button",
@@ -753,7 +753,7 @@ function DropdownSection(_ref) {
753
753
  "value": "All"
754
754
  }]
755
755
  })), /*#__PURE__*/React.createElement("div", {
756
- className: classNames([styles$3.dropdown, 'dropdown-menu', {
756
+ className: classNames([styles$4.dropdown, 'dropdown-menu', {
757
757
  show: open === true
758
758
  }])
759
759
  }, items.map(function (_ref3) {
@@ -854,6 +854,10 @@ var Search = function Search(_ref) {
854
854
  Search.propTypes = propTypes$6;
855
855
  Search.defaultProps = defaultProps$6;
856
856
 
857
+ 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"};
858
+
859
+ var styles$2 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
860
+
857
861
  var propTypes$5 = {
858
862
  tags: PropTypes$1.arrayOf(PropTypes$1.shape({
859
863
  label: PropTypes$1.string,
@@ -881,12 +885,12 @@ var TagSection = function TagSection(_ref) {
881
885
  onChange(val, parent);
882
886
  }, [onChange, parent]);
883
887
  return /*#__PURE__*/React.createElement("div", {
884
- className: classNames(['d-flex', 'mt-1', _defineProperty({}, className, className !== null)])
888
+ className: classNames([styles$2.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
885
889
  }, tags !== null ? tags.map(function (_ref3) {
886
890
  var label = _ref3.label,
887
891
  value = _ref3.value,
888
892
  active = _ref3.active;
889
- var itemClassNames = classNames(['btn', 'btn-sm', 'mb-1', 'me-1', 'btn-dark', {
893
+ var itemClassNames = classNames([styles$2.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
890
894
  'btn-primary': active === true // 'btn-outline-light': active === false,
891
895
 
892
896
  }]);
@@ -903,8 +907,6 @@ var TagSection = function TagSection(_ref) {
903
907
  TagSection.propTypes = propTypes$5;
904
908
  TagSection.defaultProps = defaultProps$5;
905
909
 
906
- var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
907
-
908
910
  var propTypes$4 = {
909
911
  filters: PropTypes$1.object,
910
912
  // eslint-disable-line
@@ -965,11 +967,11 @@ var SearchFilters = function SearchFilters(_ref) {
965
967
  }
966
968
  }, [filters, onChange]);
967
969
  return /*#__PURE__*/React.createElement("div", {
968
- className: classNames([styles$2.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
970
+ className: classNames([styles$3.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
969
971
  }, activeSections.length > 0 ? /*#__PURE__*/React.createElement("div", {
970
972
  className: classNames(['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
971
973
  }, /*#__PURE__*/React.createElement(Button, {
972
- className: classNames([styles$2.closeBtn, 'py-1', 'px-1', 'text-dark']),
974
+ className: classNames([styles$3.closeBtn, 'py-1', 'px-1', 'text-dark']),
973
975
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
974
976
  icon: faTimes
975
977
  }),
@@ -987,11 +989,11 @@ var SearchFilters = function SearchFilters(_ref) {
987
989
  items = _ref3.items;
988
990
  return items.length > 0 ? /*#__PURE__*/React.createElement("div", {
989
991
  key: "filter-".concat(value),
990
- className: classNames([styles$2.section, 'py-2'])
992
+ className: classNames([styles$3.section, 'py-2'])
991
993
  }, /*#__PURE__*/React.createElement("p", {
992
- className: classNames([styles$2.title, 'm-0'])
994
+ className: classNames([styles$3.title, 'm-0'])
993
995
  }, label), /*#__PURE__*/React.createElement(TagSection, {
994
- className: classNames([styles$2.tags]),
996
+ className: classNames([styles$3.tags]),
995
997
  tags: items,
996
998
  parent: value,
997
999
  onChange: onSectionChange
@@ -1268,9 +1270,7 @@ function Navbar(_ref) {
1268
1270
  if (onFocusSearch !== null) {
1269
1271
  onFocusSearch();
1270
1272
  }
1271
-
1272
- setOpen(true);
1273
- });
1273
+ }, [onFocusSearch]);
1274
1274
  var onCloseFilters = useCallback(function () {
1275
1275
  setOpen(false);
1276
1276
  }, [setOpen]);
@@ -1278,9 +1278,9 @@ function Navbar(_ref) {
1278
1278
  setOpen(!open);
1279
1279
  }, [open, setOpen]);
1280
1280
  return /*#__PURE__*/React.createElement("nav", {
1281
- className: classNames([styles$4.container, 'navbar', _defineProperty({}, className, className !== null)])
1281
+ className: classNames([styles$5.container, 'navbar', _defineProperty({}, className, className !== null)])
1282
1282
  }, /*#__PURE__*/React.createElement("div", {
1283
- className: classNames([styles$4.inner])
1283
+ className: classNames([styles$5.inner])
1284
1284
  }, media === null ? /*#__PURE__*/React.createElement("strong", {
1285
1285
  className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
1286
1286
  }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
@@ -1289,7 +1289,7 @@ function Navbar(_ref) {
1289
1289
  return onClickItemInfo(selectedMedia);
1290
1290
  }
1291
1291
  }, /*#__PURE__*/React.createElement(Media, {
1292
- className: styles$4.mediaPreview,
1292
+ className: styles$5.mediaPreview,
1293
1293
  thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
1294
1294
  }), /*#__PURE__*/React.createElement("span", {
1295
1295
  className: "ms-2"
@@ -1543,7 +1543,7 @@ function MediaGallery(_ref) {
1543
1543
  return setUploadModalOpened(false);
1544
1544
  }, [setUploadModalOpened]);
1545
1545
  return /*#__PURE__*/React.createElement("div", {
1546
- className: classNames([styles$8.container, (_ref3 = {}, _defineProperty(_ref3, styles$8.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
1546
+ className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, styles$9.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
1547
1547
  }, /*#__PURE__*/React.createElement(Navbar, {
1548
1548
  filters: filtersValue,
1549
1549
  media: metadataMedia !== null ? metadataMedia : null,
@@ -1562,9 +1562,9 @@ function MediaGallery(_ref) {
1562
1562
  tags: tags,
1563
1563
  className: navbarClassName
1564
1564
  }), /*#__PURE__*/React.createElement("div", {
1565
- className: styles$8.content
1565
+ className: styles$9.content
1566
1566
  }, /*#__PURE__*/React.createElement("div", {
1567
- className: styles$8.gallery
1567
+ className: styles$9.gallery
1568
1568
  }, medias !== null && !uploading ? /*#__PURE__*/React.createElement(Gallery, {
1569
1569
  items: medias,
1570
1570
  selectedItem: selectedMedia,
@@ -1574,9 +1574,9 @@ function MediaGallery(_ref) {
1574
1574
  onClickItem: onClickItem,
1575
1575
  onClickItemInfo: onClickItemInfo
1576
1576
  }) : null, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
1577
- className: styles$8.loading
1577
+ className: styles$9.loading
1578
1578
  }) : null), /*#__PURE__*/React.createElement("div", {
1579
- className: styles$8.mediaMetadata
1579
+ className: styles$9.mediaMetadata
1580
1580
  }, /*#__PURE__*/React.createElement(MediaMetadata, {
1581
1581
  media: metadataMedia,
1582
1582
  tags: tags,
package/lib/index.js CHANGED
@@ -32,9 +32,9 @@ var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
32
32
  var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
33
33
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
34
34
 
35
- var styles$8 = {"container":"micromag-media-gallery-container","mediaMetadata":"micromag-media-gallery-mediaMetadata","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
35
+ var styles$9 = {"container":"micromag-media-gallery-container","mediaMetadata":"micromag-media-gallery-mediaMetadata","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
36
36
 
37
- var styles$7 = {};
37
+ var styles$8 = {};
38
38
 
39
39
  var middleEllipsis = function middleEllipsis(string, maxLength) {
40
40
  if (!string) return string;
@@ -48,7 +48,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
48
48
  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
49
49
  };
50
50
 
51
- var styles$6 = {"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","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon","infoButton":"micromag-media-gallery-items-gallery-item-infoButton"};
51
+ var styles$7 = {"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","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon","infoButton":"micromag-media-gallery-items-gallery-item-infoButton"};
52
52
 
53
53
  var propTypes$a = {
54
54
  item: core.PropTypes.media,
@@ -93,43 +93,43 @@ var GalleryItem = function GalleryItem(_ref) {
93
93
  return /*#__PURE__*/React__default["default"].createElement(components.Card, {
94
94
  image: /*#__PURE__*/React__default["default"].createElement("button", {
95
95
  type: "button",
96
- className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$6.imageButton]),
96
+ className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$7.imageButton]),
97
97
  onClick: onClick
98
98
  }, /*#__PURE__*/React__default["default"].createElement("div", {
99
- className: classNames__default["default"](['card-img-top', styles$6.image]),
99
+ className: classNames__default["default"](['card-img-top', styles$7.image]),
100
100
  style: {
101
101
  backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
102
102
  }
103
103
  })),
104
104
  beforeBody: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withInfoButton ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
105
- className: styles$6.infoButton,
105
+ className: styles$7.infoButton,
106
106
  onClick: onClickInfo,
107
107
  withoutStyle: true
108
108
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
109
109
  icon: freeSolidSvgIcons.faInfoCircle,
110
- className: styles$6.icon
110
+ className: styles$7.icon
111
111
  })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
112
- className: classNames__default["default"](['text-danger', styles$6.closeIcon])
112
+ className: classNames__default["default"](['text-danger', styles$7.closeIcon])
113
113
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
114
114
  icon: freeSolidSvgIcons.faTimesCircle,
115
- className: styles$6.icon
115
+ className: styles$7.icon
116
116
  })) : null),
117
117
  footer: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
118
- className: styles$6.icon,
118
+ className: styles$7.icon,
119
119
  icon: freeSolidSvgIcons.faPlayCircle
120
120
  }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
121
- className: styles$6.icon,
121
+ className: styles$7.icon,
122
122
  icon: freeSolidSvgIcons.faHeadphonesAlt
123
123
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
124
- className: classNames__default["default"](['text-truncate', styles$6.label])
124
+ className: classNames__default["default"](['text-truncate', styles$7.label])
125
125
  }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
126
126
  className: "text-muted ms-1"
127
127
  }, size) : null)),
128
128
  theme: selected ? 'primary' : null,
129
- className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({
129
+ className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({
130
130
  'border-primary': selected
131
131
  }, className, className !== null)]),
132
- footerClassName: classNames__default["default"](['p-2', styles$6.footer]),
132
+ footerClassName: classNames__default["default"](['p-1', styles$7.footer]),
133
133
  onClickFooter: onClick
134
134
  });
135
135
  };
@@ -186,7 +186,7 @@ function Gallery(_ref) {
186
186
  return items;
187
187
  }, [selectedFirst, selectedItem, items]);
188
188
  return /*#__PURE__*/React__default["default"].createElement("div", {
189
- className: classNames__default["default"]([styles$7.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
189
+ className: classNames__default["default"]([styles$8.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
190
190
  ref: ref
191
191
  }, /*#__PURE__*/React__default["default"].createElement("div", {
192
192
  className: classNames__default["default"](['row', 'mx-n1', 'row-cols-2', {
@@ -214,7 +214,7 @@ function Gallery(_ref) {
214
214
  Gallery.propTypes = propTypes$9;
215
215
  Gallery.defaultProps = defaultProps$9;
216
216
 
217
- var styles$5 = {"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"};
217
+ 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"};
218
218
 
219
219
  var propTypes$8 = {
220
220
  media: core.PropTypes.media,
@@ -342,25 +342,25 @@ function MediaMetadata(_ref) {
342
342
  var TextField = contexts.useFieldComponent('text');
343
343
  var TokensField = contexts.useFieldComponent('tokens');
344
344
  return /*#__PURE__*/React__default["default"].createElement("div", {
345
- className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className)])
345
+ className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({}, className, className)])
346
346
  }, /*#__PURE__*/React__default["default"].createElement("div", {
347
347
  className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({
348
348
  'bg-light': type === 'audio',
349
349
  'bg-black': type === 'image'
350
- }, styles$5.video, type === 'video')])
350
+ }, styles$6.video, type === 'video')])
351
351
  }, type === 'video' ? /*#__PURE__*/React__default["default"].createElement("video", {
352
- className: styles$5.player,
352
+ className: styles$6.player,
353
353
  controls: true,
354
354
  src: url
355
355
  }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement("div", {
356
- className: styles$5.audio
356
+ className: styles$6.audio
357
357
  }, /*#__PURE__*/React__default["default"].createElement("audio", {
358
- className: styles$5.player,
358
+ className: styles$6.player,
359
359
  controls: true,
360
360
  src: url
361
361
  })) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
362
362
  src: thumbnail,
363
- className: styles$5.image,
363
+ className: styles$6.image,
364
364
  alt: filename
365
365
  }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
366
366
  className: "p-2"
@@ -556,7 +556,7 @@ var useSearchFilters = function useSearchFilters(_ref) {
556
556
  "value": "This Micromag"
557
557
  }]
558
558
  }),
559
- value: "document:".concat(storyId)
559
+ value: "document-".concat(storyId)
560
560
  }] : []), [{
561
561
  label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
562
562
  id: "xAzv6g",
@@ -695,9 +695,9 @@ PropTypes__default["default"].shape({
695
695
  usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
696
696
  });
697
697
 
698
- var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
698
+ var styles$5 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
699
699
 
700
- var styles$3 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
700
+ 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"};
701
701
 
702
702
  var propTypes$7 = {
703
703
  value: PropTypes__default["default"].string,
@@ -745,9 +745,9 @@ function DropdownSection(_ref) {
745
745
  onChange(val);
746
746
  }, [setOpen]);
747
747
  return items !== null && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
748
- className: classNames__default["default"]([styles$3.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
748
+ className: classNames__default["default"]([styles$4.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
749
749
  }, /*#__PURE__*/React__default["default"].createElement("span", {
750
- className: styles$3.label
750
+ className: styles$4.label
751
751
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
752
752
  id: "9ZdD+Q",
753
753
  defaultMessage: [{
@@ -755,7 +755,7 @@ function DropdownSection(_ref) {
755
755
  "value": "Library for"
756
756
  }]
757
757
  })), /*#__PURE__*/React__default["default"].createElement("button", {
758
- className: classNames__default["default"]([styles$3.dropdownToggle, 'dropdown-toggle', {
758
+ className: classNames__default["default"]([styles$4.dropdownToggle, 'dropdown-toggle', {
759
759
  open: open === true
760
760
  }]),
761
761
  type: "button",
@@ -768,7 +768,7 @@ function DropdownSection(_ref) {
768
768
  "value": "All"
769
769
  }]
770
770
  })), /*#__PURE__*/React__default["default"].createElement("div", {
771
- className: classNames__default["default"]([styles$3.dropdown, 'dropdown-menu', {
771
+ className: classNames__default["default"]([styles$4.dropdown, 'dropdown-menu', {
772
772
  show: open === true
773
773
  }])
774
774
  }, items.map(function (_ref3) {
@@ -869,6 +869,10 @@ var Search = function Search(_ref) {
869
869
  Search.propTypes = propTypes$6;
870
870
  Search.defaultProps = defaultProps$6;
871
871
 
872
+ 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"};
873
+
874
+ var styles$2 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
875
+
872
876
  var propTypes$5 = {
873
877
  tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
874
878
  label: PropTypes__default["default"].string,
@@ -896,12 +900,12 @@ var TagSection = function TagSection(_ref) {
896
900
  onChange(val, parent);
897
901
  }, [onChange, parent]);
898
902
  return /*#__PURE__*/React__default["default"].createElement("div", {
899
- className: classNames__default["default"](['d-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
903
+ className: classNames__default["default"]([styles$2.container, 'd-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
900
904
  }, tags !== null ? tags.map(function (_ref3) {
901
905
  var label = _ref3.label,
902
906
  value = _ref3.value,
903
907
  active = _ref3.active;
904
- var itemClassNames = classNames__default["default"](['btn', 'btn-sm', 'mb-1', 'me-1', 'btn-dark', {
908
+ var itemClassNames = classNames__default["default"]([styles$2.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
905
909
  'btn-primary': active === true // 'btn-outline-light': active === false,
906
910
 
907
911
  }]);
@@ -918,8 +922,6 @@ var TagSection = function TagSection(_ref) {
918
922
  TagSection.propTypes = propTypes$5;
919
923
  TagSection.defaultProps = defaultProps$5;
920
924
 
921
- var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
922
-
923
925
  var propTypes$4 = {
924
926
  filters: PropTypes__default["default"].object,
925
927
  // eslint-disable-line
@@ -980,11 +982,11 @@ var SearchFilters = function SearchFilters(_ref) {
980
982
  }
981
983
  }, [filters, onChange]);
982
984
  return /*#__PURE__*/React__default["default"].createElement("div", {
983
- className: classNames__default["default"]([styles$2.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
985
+ className: classNames__default["default"]([styles$3.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
984
986
  }, activeSections.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
985
987
  className: classNames__default["default"](['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
986
988
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
987
- className: classNames__default["default"]([styles$2.closeBtn, 'py-1', 'px-1', 'text-dark']),
989
+ className: classNames__default["default"]([styles$3.closeBtn, 'py-1', 'px-1', 'text-dark']),
988
990
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
989
991
  icon: freeSolidSvgIcons.faTimes
990
992
  }),
@@ -1002,11 +1004,11 @@ var SearchFilters = function SearchFilters(_ref) {
1002
1004
  items = _ref3.items;
1003
1005
  return items.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
1004
1006
  key: "filter-".concat(value),
1005
- className: classNames__default["default"]([styles$2.section, 'py-2'])
1007
+ className: classNames__default["default"]([styles$3.section, 'py-2'])
1006
1008
  }, /*#__PURE__*/React__default["default"].createElement("p", {
1007
- className: classNames__default["default"]([styles$2.title, 'm-0'])
1009
+ className: classNames__default["default"]([styles$3.title, 'm-0'])
1008
1010
  }, label), /*#__PURE__*/React__default["default"].createElement(TagSection, {
1009
- className: classNames__default["default"]([styles$2.tags]),
1011
+ className: classNames__default["default"]([styles$3.tags]),
1010
1012
  tags: items,
1011
1013
  parent: value,
1012
1014
  onChange: onSectionChange
@@ -1283,9 +1285,7 @@ function Navbar(_ref) {
1283
1285
  if (onFocusSearch !== null) {
1284
1286
  onFocusSearch();
1285
1287
  }
1286
-
1287
- setOpen(true);
1288
- });
1288
+ }, [onFocusSearch]);
1289
1289
  var onCloseFilters = React.useCallback(function () {
1290
1290
  setOpen(false);
1291
1291
  }, [setOpen]);
@@ -1293,9 +1293,9 @@ function Navbar(_ref) {
1293
1293
  setOpen(!open);
1294
1294
  }, [open, setOpen]);
1295
1295
  return /*#__PURE__*/React__default["default"].createElement("nav", {
1296
- className: classNames__default["default"]([styles$4.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
1296
+ className: classNames__default["default"]([styles$5.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
1297
1297
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1298
- className: classNames__default["default"]([styles$4.inner])
1298
+ className: classNames__default["default"]([styles$5.inner])
1299
1299
  }, media === null ? /*#__PURE__*/React__default["default"].createElement("strong", {
1300
1300
  className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
1301
1301
  }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
@@ -1304,7 +1304,7 @@ function Navbar(_ref) {
1304
1304
  return onClickItemInfo(selectedMedia);
1305
1305
  }
1306
1306
  }, /*#__PURE__*/React__default["default"].createElement(components.Media, {
1307
- className: styles$4.mediaPreview,
1307
+ className: styles$5.mediaPreview,
1308
1308
  thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
1309
1309
  }), /*#__PURE__*/React__default["default"].createElement("span", {
1310
1310
  className: "ms-2"
@@ -1558,7 +1558,7 @@ function MediaGallery(_ref) {
1558
1558
  return setUploadModalOpened(false);
1559
1559
  }, [setUploadModalOpened]);
1560
1560
  return /*#__PURE__*/React__default["default"].createElement("div", {
1561
- className: classNames__default["default"]([styles$8.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$8.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref3, className, className), _ref3)])
1561
+ className: classNames__default["default"]([styles$9.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$9.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref3, className, className), _ref3)])
1562
1562
  }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
1563
1563
  filters: filtersValue,
1564
1564
  media: metadataMedia !== null ? metadataMedia : null,
@@ -1577,9 +1577,9 @@ function MediaGallery(_ref) {
1577
1577
  tags: tags,
1578
1578
  className: navbarClassName
1579
1579
  }), /*#__PURE__*/React__default["default"].createElement("div", {
1580
- className: styles$8.content
1580
+ className: styles$9.content
1581
1581
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1582
- className: styles$8.gallery
1582
+ className: styles$9.gallery
1583
1583
  }, medias !== null && !uploading ? /*#__PURE__*/React__default["default"].createElement(Gallery, {
1584
1584
  items: medias,
1585
1585
  selectedItem: selectedMedia,
@@ -1589,9 +1589,9 @@ function MediaGallery(_ref) {
1589
1589
  onClickItem: onClickItem,
1590
1590
  onClickItemInfo: onClickItemInfo
1591
1591
  }) : null, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
1592
- className: styles$8.loading
1592
+ className: styles$9.loading
1593
1593
  }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
1594
- className: styles$8.mediaMetadata
1594
+ className: styles$9.mediaMetadata
1595
1595
  }, /*#__PURE__*/React__default["default"].createElement(MediaMetadata, {
1596
1596
  media: metadataMedia,
1597
1597
  tags: tags,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/media-gallery",
3
- "version": "0.3.24",
3
+ "version": "0.3.25",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -59,8 +59,8 @@
59
59
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
60
60
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
61
61
  "@fortawesome/react-fontawesome": "^0.1.13",
62
- "@micromag/core": "^0.3.24",
63
- "@micromag/data": "^0.3.24",
62
+ "@micromag/core": "^0.3.25",
63
+ "@micromag/data": "^0.3.25",
64
64
  "bootstrap": "^5.1.0",
65
65
  "change-case": "^4.1.2",
66
66
  "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "f2d5d71a3e5c5e6d6e9d8af3bdd8a71bf38fbbb7"
76
+ "gitHead": "5f08fe9d1373e802a08df9edd6842ac848bdc009"
77
77
  }