@micromag/media-gallery 0.3.107 → 0.3.111

package/es/index.js

@@ -2,6 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { createPortal } from 'react-dom';
 import { PropTypes } from '@micromag/core';
 import { Card, Button, Media, Spinner, UploadModal } from '@micromag/core/components';
 import { useFieldComponent, useStory } from '@micromag/core/contexts';
@@ -10,11 +11,18 @@ import classNames from 'classnames';
 import PropTypes$1 from 'prop-types';
 import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { useResizeObserver } from '@micromag/core/hooks';
-import { faInfoCircle, faTimesCircle, faPlayCircle, faHeadphonesAlt, faSearch, faTimes, faPlus, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { faHeadphonesAlt } from '@fortawesome/free-solid-svg-icons/faHeadphonesAlt';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
+import { faPlayCircle } from '@fortawesome/free-solid-svg-icons/faPlayCircle';
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import uniqBy from 'lodash/uniqBy';
 import prettyBytes from 'pretty-bytes';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 
 var styles$9 = {"container":"micromag-media-gallery-container","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"};
@@ -1581,12 +1589,12 @@ function MediaGallery(_ref) {
     media: metadataMedia,
     tags: tags,
     onClickClose: onMetadataClickClose
-  }))), /*#__PURE__*/React.createElement(UploadModal, {
+  }))), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(UploadModal, {
     type: type === 'video' ? ['video', 'image/gif'] : type,
     opened: uploadModalOpened,
     onUploaded: onUploadCompleted,
     onRequestClose: onUploadRequestClose
-  }));
+  }), document.body));
 }
 
 MediaGallery.propTypes = propTypes;

package/lib/index.js

@@ -4,6 +4,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var reactDom = require('react-dom');
 var core = require('@micromag/core');
 var components = require('@micromag/core/components');
 var contexts = require('@micromag/core/contexts');
@@ -12,11 +13,18 @@ var classNames = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var hooks = require('@micromag/core/hooks');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var faHeadphonesAlt = require('@fortawesome/free-solid-svg-icons/faHeadphonesAlt');
+var faInfoCircle = require('@fortawesome/free-solid-svg-icons/faInfoCircle');
+var faPlayCircle = require('@fortawesome/free-solid-svg-icons/faPlayCircle');
+var faTimesCircle = require('@fortawesome/free-solid-svg-icons/faTimesCircle');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var uniqBy = require('lodash/uniqBy');
 var prettyBytes = require('pretty-bytes');
 var reactIntl = require('react-intl');
+var faChevronLeft = require('@fortawesome/free-solid-svg-icons/faChevronLeft');
+var faPlus = require('@fortawesome/free-solid-svg-icons/faPlus');
+var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
+var faSearch = require('@fortawesome/free-solid-svg-icons/faSearch');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -106,20 +114,20 @@ var GalleryItem = function GalleryItem(_ref) {
       onClick: onClickInfo,
       withoutStyle: true
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faInfoCircle,
+      icon: faInfoCircle.faInfoCircle,
       className: styles$7.icon
     })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: classNames__default["default"](['text-danger', styles$7.closeIcon])
     }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faTimesCircle,
+      icon: faTimesCircle.faTimesCircle,
       className: styles$7.icon
     })) : null),
     footer: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       className: styles$7.icon,
-      icon: freeSolidSvgIcons.faPlayCircle
+      icon: faPlayCircle.faPlayCircle
     }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       className: styles$7.icon,
-      icon: freeSolidSvgIcons.faHeadphonesAlt
+      icon: faHeadphonesAlt.faHeadphonesAlt
     }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: classNames__default["default"](['text-truncate', styles$7.label])
     }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
@@ -845,7 +853,7 @@ var Search = function Search(_ref) {
     className: "btn",
     onClick: onClickSearchIcon
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faSearch
+    icon: faSearch.faSearch
   })), /*#__PURE__*/React__default["default"].createElement("input", {
     className: classNames__default["default"](['form-control', {
       'bg-light': !!value,
@@ -988,7 +996,7 @@ var SearchFilters = function SearchFilters(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
     className: classNames__default["default"]([styles$3.closeBtn, 'py-1', 'px-1', 'text-dark']),
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faTimes
+      icon: faTimes.faTimes
     }),
     onClick: onClose,
     title: intl.formatMessage({
@@ -1039,7 +1047,7 @@ var CloseButton = function CloseButton(_ref) {
     className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
     withoutStyle: true,
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faTimes,
+      icon: faTimes.faTimes,
       className: styles.icon
     }),
     iconPosition: "right"
@@ -1135,7 +1143,7 @@ function ActiveFilters(_ref) {
         label: /*#__PURE__*/React__default["default"].createElement("span", null, section.label, " : ", label),
         theme: "secondary",
         icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-          icon: freeSolidSvgIcons.faTimes
+          icon: faTimes.faTimes
         }),
         iconPosition: "right",
         onClick: function onClick() {
@@ -1325,7 +1333,7 @@ function Navbar(_ref) {
   })), selectedMedia === null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
     theme: "primary",
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faPlus
+      icon: faPlus.faPlus
     }),
     onClick: onClickAdd,
     title: intl.formatMessage({
@@ -1338,7 +1346,7 @@ function Navbar(_ref) {
   }) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
     theme: "primary",
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faTimes
+      icon: faTimes.faTimes
     }),
     onClick: function onClick() {
       return onClickItem(selectedMedia);
@@ -1365,7 +1373,7 @@ function Navbar(_ref) {
     outline: true,
     size: "sm",
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faChevronLeft
+      icon: faChevronLeft.faChevronLeft
     }),
     onClick: onClickBack
   })), /*#__PURE__*/React__default["default"].createElement("strong", {
@@ -1596,12 +1604,12 @@ function MediaGallery(_ref) {
     media: metadataMedia,
     tags: tags,
     onClickClose: onMetadataClickClose
-  }))), /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
+  }))), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
     type: type === 'video' ? ['video', 'image/gif'] : type,
     opened: uploadModalOpened,
     onUploaded: onUploadCompleted,
     onRequestClose: onUploadRequestClose
-  }));
+  }), document.body));
 }
 
 MediaGallery.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.3.107",
+    "version": "0.3.111",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,8 +59,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.3.107",
-        "@micromag/data": "^0.3.107",
+        "@micromag/core": "^0.3.111",
+        "@micromag/data": "^0.3.111",
         "bootstrap": "^5.1.0",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "952ef450fe62328a0ae3ab6dbb3c3079bb66d17a"
+    "gitHead": "0b8e0748efe102dae09d162dc4f06a0b0797ea35"
 }