@micromag/media-gallery 0.3.332 → 0.3.334

package/assets/css/styles.css

@@ -1,6 +1,6 @@
-.micromag-media-gallery-items-gallery-item-container{border:1px solid #343434;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;border-top:1px solid #343434;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-closeButton,.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;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeButton .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-closeButton:hover,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton:hover{opacity:.8}.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-closeButton{right:0}
+.micromag-media-gallery-items-gallery-item-container{border:1px solid #343434;cursor:pointer;overflow:hidden;position:relative;-webkit-transition:border .15s ease-out;-o-transition:border .15s ease-out;transition:border .15s ease-out}.micromag-media-gallery-items-gallery-item-container:hover{border:1px solid #6c6c6c}.micromag-media-gallery-items-gallery-item-container:hover.micromag-media-gallery-items-gallery-item-selected{border:1px solid #a13dff}.micromag-media-gallery-items-gallery-item-container.micromag-media-gallery-items-gallery-item-selected{border:1px solid #a13dff}.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;border-top:1px solid #343434;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-closeButton,.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;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeButton .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-closeButton:hover,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton:hover{opacity:.8}.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-closeButton{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{background-color:#1c1c1c;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-media-metadata-container .micromag-media-gallery-partials-media-metadata-placeholder{background-color:#1c1c1c;height:60px}
+.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:260px;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{background-color:#1c1c1c;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-media-metadata-container .micromag-media-gallery-partials-media-metadata-placeholder{background-color:#1c1c1c;height:60px}
 .micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-media-gallery-forms-dropdown-section-container{padding-top:5px;position:relative}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;font-weight:400;padding-right:5px}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{font-weight:700}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdown{left:auto;right:0}
 .micromag-media-gallery-forms-search-container{position:relative}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input{background-color:#2b2b2b}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input.micromag-media-gallery-forms-search-active,.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input:focus{background-color:#2b2b2b!important;-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff!important;outline:none!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-webkit-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-moz-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input :-ms-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-ms-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::placeholder{background-color:#2b2b2b!important}
 .micromag-media-gallery-forms-tag-dropdown-container .micromag-media-gallery-forms-tag-dropdown-select{font-size:.8rem;padding:.25rem .5rem}

package/es/index.js

@@ -10,7 +10,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { PropTypes } from '@micromag/core';
 import { Card, Button, Media, Spinner, UploadModal } from '@micromag/core/components';
 import { useFieldComponent, useStory } from '@micromag/core/contexts';
-import { useMediaUpdate, useMediaDelete, useMediasRecentSearches, useMediaTags, useMediaAuthors, useMedias, useMediaCreate } from '@micromag/data';
+import { useMediaUpdate, useMediaRequestDelete, useMediaDelete, useMediasRecentSearches, useMediaTags, useMediaAuthors, useMedias, useMediaCreate } from '@micromag/data';
 import { useDimensionObserver } from '@micromag/core/hooks';
 import { faHeadphonesAlt } from '@fortawesome/free-solid-svg-icons/faHeadphonesAlt';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
@@ -39,7 +39,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
+var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","selected":"micromag-media-gallery-items-gallery-item-selected","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","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
 
 var propTypes$b = {
   item: PropTypes.media,
@@ -62,6 +62,7 @@ var defaultProps$b = {
   onClickRemove: null
 };
 var GalleryItem = function GalleryItem(_ref) {
+  var _ref2;
   var item = _ref.item,
     width = _ref.width,
     selected = _ref.selected,
@@ -118,8 +119,8 @@ var GalleryItem = function GalleryItem(_ref) {
     }, /*#__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$b.container, _defineProperty({}, className, className !== null)]),
+    theme: selected ? null : null,
+    className: classNames([styles$b.container, (_ref2 = {}, _defineProperty(_ref2, styles$b.selected, selected), _defineProperty(_ref2, className, className !== null), _ref2)]),
     footerClassName: classNames(['p-1', styles$b.footer]),
     onClickFooter: onClick
   });
@@ -174,7 +175,7 @@ function Gallery(_ref) {
     return items;
   }, [selectedFirst, selectedItem, items]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, 'p-2', _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$a.container, 'p-2', 'pt-0', _defineProperty({}, className, className !== null)]),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['row', 'mx-n1', 'row-cols-2', {
@@ -259,6 +260,8 @@ function MediaMetadata(_ref) {
     mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
   var _useMediaUpdate = useMediaUpdate(),
     update = _useMediaUpdate.update;
+  var _useMediaRequestDelet = useMediaRequestDelete(),
+    requestDeleteMedia = _useMediaRequestDelet.requestDeleteMedia;
   var _useMediaDelete = useMediaDelete(),
     deleteMedia = _useMediaDelete.deleteMedia;
   var getOptionLabel = useCallback(function (_ref4) {
@@ -339,26 +342,34 @@ function MediaMetadata(_ref) {
     setDeletedState(null);
     setConfirmation(null);
   }, [mediaId, setDeletedState, setConfirmation]);
-  var onDelete = useCallback(function () {
-    return deleteMedia(mediaId, confirmation !== null).then(function (response) {
+  var onConfirm = useCallback(function () {
+    requestDeleteMedia(mediaId).then(function (response) {
       var _ref7 = response || {},
         state = _ref7.state,
         _ref7$items = _ref7.items,
         items = _ref7$items === void 0 ? [] : _ref7$items;
       if (state === 'needs_confirmation') {
-        setConfirmation(items);
+        setConfirmation(items || []);
       } else {
-        setChanged(false);
-        setDeletedState(true);
         setConfirmation(null);
-        if (onClickDelete !== null) {
-          onClickDelete(mediaId);
-        }
+      }
+    })["catch"](function () {
+      setConfirmation(null);
+    });
+  }, [mediaId, requestDeleteMedia, setConfirmation]);
+  var onDelete = useCallback(function () {
+    deleteMedia(mediaId).then(function () {
+      setChanged(false);
+      setDeletedState(true);
+      setConfirmation(null);
+      if (onClickDelete !== null) {
+        onClickDelete(mediaId);
       }
     })["catch"](function () {
       setDeletedState(false);
+      setConfirmation(null);
     });
-  }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
+  }, [mediaId, deleteMedia, onClickDelete, setChanged, setDeletedState, setConfirmation]);
   var onCancelDelete = useCallback(function () {
     setConfirmation(null);
     setDeletedState(null);
@@ -578,7 +589,7 @@ function MediaMetadata(_ref) {
     className: "col"
   }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null), /*#__PURE__*/React.createElement("div", {
     className: "py-3"
-  }, confirmation !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+  }, confirmation !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, confirmation.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
     className: "pt-1 text-danger"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "2FD6tj",
@@ -586,11 +597,12 @@ function MediaMetadata(_ref) {
       "type": 0,
       "value": "This media is used by the following documents:"
     }]
-  })), /*#__PURE__*/React.createElement("ul", null, confirmation.map(function (it) {
+  })), /*#__PURE__*/React.createElement("ul", null, confirmation.map(function (it, i) {
     return /*#__PURE__*/React.createElement("li", {
+      key: "".concat(it, "-").concat(i + 1),
       className: "text-danger"
     }, it);
-  })), /*#__PURE__*/React.createElement("p", {
+  }))) : null, /*#__PURE__*/React.createElement("p", {
     className: "pt-1 text-danger"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "wy2g+x",
@@ -604,14 +616,8 @@ function MediaMetadata(_ref) {
     className: "me-2",
     theme: "danger",
     outline: true,
-    onClick: onDelete
-  }, confirmation !== null ? /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "rkn2jO",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Confirm and delete media"
-    }]
-  }) : /*#__PURE__*/React.createElement(FormattedMessage, {
+    onClick: confirmation === null ? onConfirm : onDelete
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "/KQ87r",
     defaultMessage: [{
       "type": 0,
@@ -1508,7 +1514,7 @@ function Navbar(_ref) {
     className: classNames([styles$1.inner])
   }, media === null ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['list-group-item rounded w-100 mw-100 navbar-text mb-2', {
-      'border border-dark bg-dark py-2 px-2': selectedMedia !== null
+      'border border-primary bg-dark py-2 px-2': selectedMedia !== null
     }])
   }, selectedMedia !== null ? /*#__PURE__*/React.createElement("div", {
     className: ""

package/lib/index.js

@@ -55,7 +55,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
   return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
 };
 
-var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
+var styles$b = {"container":"micromag-media-gallery-items-gallery-item-container","selected":"micromag-media-gallery-items-gallery-item-selected","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","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
 
 var propTypes$b = {
   item: core.PropTypes.media,
@@ -78,6 +78,7 @@ var defaultProps$b = {
   onClickRemove: null
 };
 var GalleryItem = function GalleryItem(_ref) {
+  var _ref2;
   var item = _ref.item,
     width = _ref.width,
     selected = _ref.selected,
@@ -134,8 +135,8 @@ var GalleryItem = function GalleryItem(_ref) {
     }, /*#__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$b.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    theme: selected ? null : null,
+    className: classNames__default["default"]([styles$b.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$b.selected, selected), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
     footerClassName: classNames__default["default"](['p-1', styles$b.footer]),
     onClickFooter: onClick
   });
@@ -190,7 +191,7 @@ function Gallery(_ref) {
     return items;
   }, [selectedFirst, selectedItem, items]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$a.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$a.container, 'p-2', 'pt-0', _defineProperty__default["default"]({}, className, className !== null)]),
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['row', 'mx-n1', 'row-cols-2', {
@@ -275,6 +276,8 @@ function MediaMetadata(_ref) {
     mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
   var _useMediaUpdate = data.useMediaUpdate(),
     update = _useMediaUpdate.update;
+  var _useMediaRequestDelet = data.useMediaRequestDelete(),
+    requestDeleteMedia = _useMediaRequestDelet.requestDeleteMedia;
   var _useMediaDelete = data.useMediaDelete(),
     deleteMedia = _useMediaDelete.deleteMedia;
   var getOptionLabel = React.useCallback(function (_ref4) {
@@ -355,26 +358,34 @@ function MediaMetadata(_ref) {
     setDeletedState(null);
     setConfirmation(null);
   }, [mediaId, setDeletedState, setConfirmation]);
-  var onDelete = React.useCallback(function () {
-    return deleteMedia(mediaId, confirmation !== null).then(function (response) {
+  var onConfirm = React.useCallback(function () {
+    requestDeleteMedia(mediaId).then(function (response) {
       var _ref7 = response || {},
         state = _ref7.state,
         _ref7$items = _ref7.items,
         items = _ref7$items === void 0 ? [] : _ref7$items;
       if (state === 'needs_confirmation') {
-        setConfirmation(items);
+        setConfirmation(items || []);
       } else {
-        setChanged(false);
-        setDeletedState(true);
         setConfirmation(null);
-        if (onClickDelete !== null) {
-          onClickDelete(mediaId);
-        }
+      }
+    })["catch"](function () {
+      setConfirmation(null);
+    });
+  }, [mediaId, requestDeleteMedia, setConfirmation]);
+  var onDelete = React.useCallback(function () {
+    deleteMedia(mediaId).then(function () {
+      setChanged(false);
+      setDeletedState(true);
+      setConfirmation(null);
+      if (onClickDelete !== null) {
+        onClickDelete(mediaId);
       }
     })["catch"](function () {
       setDeletedState(false);
+      setConfirmation(null);
     });
-  }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
+  }, [mediaId, deleteMedia, onClickDelete, setChanged, setDeletedState, setConfirmation]);
   var onCancelDelete = React.useCallback(function () {
     setConfirmation(null);
     setDeletedState(null);
@@ -594,7 +605,7 @@ function MediaMetadata(_ref) {
     className: "col"
   }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "py-3"
-  }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
+  }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, confirmation.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
     className: "pt-1 text-danger"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "2FD6tj",
@@ -602,11 +613,12 @@ function MediaMetadata(_ref) {
       "type": 0,
       "value": "This media is used by the following documents:"
     }]
-  })), /*#__PURE__*/React__default["default"].createElement("ul", null, confirmation.map(function (it) {
+  })), /*#__PURE__*/React__default["default"].createElement("ul", null, confirmation.map(function (it, i) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
+      key: "".concat(it, "-").concat(i + 1),
       className: "text-danger"
     }, it);
-  })), /*#__PURE__*/React__default["default"].createElement("p", {
+  }))) : null, /*#__PURE__*/React__default["default"].createElement("p", {
     className: "pt-1 text-danger"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "wy2g+x",
@@ -620,14 +632,8 @@ function MediaMetadata(_ref) {
     className: "me-2",
     theme: "danger",
     outline: true,
-    onClick: onDelete
-  }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "rkn2jO",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Confirm and delete media"
-    }]
-  }) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    onClick: confirmation === null ? onConfirm : onDelete
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "/KQ87r",
     defaultMessage: [{
       "type": 0,
@@ -1524,7 +1530,7 @@ function Navbar(_ref) {
     className: classNames__default["default"]([styles$1.inner])
   }, media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['list-group-item rounded w-100 mw-100 navbar-text mb-2', {
-      'border border-dark bg-dark py-2 px-2': selectedMedia !== null
+      'border border-primary bg-dark py-2 px-2': selectedMedia !== null
     }])
   }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: ""

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.332",
+    "version": "0.3.334",
     "description": "",
     "keywords": [
         "javascript"
@@ -60,7 +60,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
         "@micromag/core": "^0.3.332",
-        "@micromag/data": "^0.3.332",
+        "@micromag/data": "^0.3.334",
         "bootstrap": "5.2.0-beta1",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "61fe137d589629d05127be69b667fc62f8ca1d18"
+    "gitHead": "aecd5e405aff415fe8d1a627f03d1e74ccd9ef95"
 }