@micromag/editor 0.3.9 → 0.3.10

package/assets/css/styles.css

@@ -7,13 +7,13 @@
 .micromag-editor-menus-devices-container{display:inline-block;position:relative}.micromag-editor-menus-devices-container .micromag-editor-menus-devices-button{display:block;width:40px;height:30px;padding:5px}
 .micromag-editor-buttons-device-container .micromag-editor-buttons-device-icon{display:block;width:100%;height:auto;max-height:100%}
 .micromag-editor-partials-screen-states-button{width:50px;min-height:75px}.micromag-editor-partials-screen-states-button.btn-outline-secondary{border-color:#6c6c6c;color:#6c6c6c}.micromag-editor-partials-screen-states-button.btn-outline-secondary:hover{border-color:#e9e9e9;background:rgba(0,0,0,0);color:#e9e9e9}.micromag-editor-partials-screen-states-addButton{border-style:dashed}.micromag-editor-partials-screen-states-title{font-size:.75em}
-.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-placeholder,.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-preview,.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-screen{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-buttons-screen-with-preview-button{display:block;position:relative}.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-frame{position:relative;overflow:hidden}.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-placeholder,.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-preview{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-preview{background:rgba(0,0,0,.9)}.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-placeholder{position:relative}
+.micromag-editor-buttons-screen-with-preview-button{display:block;position:relative}
 .micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button{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-editor-buttons-screen-container .micromag-editor-buttons-screen-border,.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button,.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-inner{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-buttons-screen-container{position:relative;overflow:hidden}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button{display:inline-block}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-border{display:block}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen{display:block;position:relative;width:100%;height:0;padding-bottom:150%;pointer-events:none}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-icon{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-label{padding:5px 0;font-size:.75rem;font-weight:700}.micromag-editor-buttons-screen-container.micromag-editor-buttons-screen-active .micromag-editor-buttons-screen-border{z-index:2;border:3px solid #a13dff}
 .micromag-editor-screens-container .micromag-editor-screens-navbar{z-index:999;background-color:#1c1c1c}.micromag-editor-screens-container .micromag-editor-screens-navbar>div{padding:0}
 .micromag-editor-menus-screens-container .micromag-editor-menus-screens-placeholder,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-screen{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-menus-screens-item,.micromag-editor-menus-screens-items{margin:0;padding:0;list-style:none}.micromag-editor-menus-screens-container{position:relative}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-5px;padding:0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{display:block;position:relative;z-index:2;width:33.3%;padding:5px}@media screen and (min-width:540px){.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{width:20%}}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-button{display:block}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-placeholder,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview{background:rgba(0,0,0,.9)}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-settings{position:absolute;top:0;right:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-noWrap .micromag-editor-menus-screens-items{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-items{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-item{width:100%}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-withPlaceholder .micromag-editor-menus-screens-item{margin:5px;padding:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-withPlaceholder .micromag-editor-menus-screens-button{width:100px}
 .micromag-editor-sortable-sortable-tree-item{padding-bottom:3px}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-parent{padding-bottom:0;background-color:#494949}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group{padding-top:3px;background-color:#494949}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group.micromag-editor-sortable-sortable-tree-isLastChild{margin-bottom:4px;padding-bottom:6px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}
 .micromag-editor-sortable-sortable-tree-item-container{display:block}.micromag-editor-sortable-sortable-tree-item-container .micromag-editor-sortable-sortable-tree-item-parent{position:relative;z-index:1;-webkit-box-shadow:0 4px 8px rgba(0,0,0,.5);box-shadow:0 4px 8px rgba(0,0,0,.5)}.micromag-editor-sortable-sortable-tree-item-container .micromag-editor-sortable-sortable-tree-item-child{position:absolute;z-index:0;right:5px;bottom:-25px;width:75%;-webkit-filter:brightness(60%);filter:brightness(60%)}
 .micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-button{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-editor-sortable-sortable-tree-item-actions-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;list-style:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;background-color:rgba(0,0,0,0);color:#222}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-button{background-color:rgba(0,0,0,0);color:#fff}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-handle{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:10px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-handle .micromag-editor-sortable-sortable-tree-item-actions-icon{display:none;visibility:hidden;position:absolute;top:10px;left:10px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-text{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-left:.5rem;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapsedCount,.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-count{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:-10px;right:-10px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#a13dff;color:#fff;font-size:.8rem;font-weight:600}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapsedCount{top:auto;right:3px;bottom:2px;background-color:rgba(0,0,0,0)}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-disableInteraction{pointer-events:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-clone .micromag-editor-sortable-sortable-tree-item-actions-count,.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-clone .micromag-editor-sortable-sortable-tree-item-actions-text,.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-disableSelection .micromag-editor-sortable-sortable-tree-item-actions-count,.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-disableSelection .micromag-editor-sortable-sortable-tree-item-actions-text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapse{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:1;bottom:0;left:0;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:100%;height:30px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapse svg{margin-left:10px;-webkit-transition:-webkit-transform .25s ease;transition:-webkit-transform .25s ease;-o-transition:transform .25s ease;transition:transform .25s ease;transition:transform .25s ease, -webkit-transform .25s ease}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapse.micromag-editor-sortable-sortable-tree-item-actions-collapsed svg{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-children{position:relative;z-index:0;width:100%}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-withChildren{background-color:#494949}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-withChildren .micromag-editor-sortable-sortable-tree-item-actions-inner{padding-bottom:30px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-clone{display:block;width:100%;margin-top:5px;margin-left:10px;padding:0;pointer-events:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-clone .micromag-editor-sortable-sortable-tree-item-actions-inner{padding-right:24px;border-radius:10px;-webkit-box-shadow:0 15px 15px 0 rgba(34,33,81,.1);box-shadow:0 15px 15px 0 rgba(34,33,81,.1)}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost:not(.micromag-editor-sortable-sortable-tree-item-actions-indicator){-webkit-filter:opacity(.6);filter:opacity(.6)}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost .micromag-editor-sortable-sortable-tree-item-actions-inner>*{background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost .micromag-editor-sortable-sortable-tree-item-actions-inner{border:1px solid #a13dff;border-radius:4px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost.micromag-editor-sortable-sortable-tree-item-actions-indicator{position:relative;z-index:1;margin-bottom:-1px;opacity:1}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost.micromag-editor-sortable-sortable-tree-item-actions-indicator .micromag-editor-sortable-sortable-tree-item-actions-inner{position:relative;height:8px;padding:0;border:1px solid #a13dff;border-radius:10px;background-color:#a13dff}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost.micromag-editor-sortable-sortable-tree-item-actions-indicator .micromag-editor-sortable-sortable-tree-item-actions-inner>*{height:0;opacity:0}
-.micromag-editor-menus-screen-types-container{position:relative}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row{margin-bottom:2rem}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row .micromag-editor-menus-screen-types-title{padding-bottom:.25rem;border-bottom:1px solid #dedede;font-size:.85rem}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row:last-child{margin-bottom:0}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-screen{width:100%;max-width:100px}
+.micromag-editor-menus-screen-types-container{position:relative}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row{margin-bottom:2rem}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row .micromag-editor-menus-screen-types-title{padding-bottom:.25rem;border-bottom:1px solid #dedede;font-size:.85rem}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row:last-child{margin-bottom:0}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-screen{width:100%;max-width:100px}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-button{mix-blend-mode:difference}
 .micromag-editor-modals-screen-types-container .micromag-editor-modals-screen-types-selected{background-color:#a13dff}
 .micromag-editor-forms-settings-container{position:relative;padding:.5rem}.micromag-editor-forms-settings-container .micromag-editor-forms-settings-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}

package/es/index.js

@@ -4,7 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$1, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
 import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
-import { useResizeObserver, useParsedStory, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
+import { useParsedStory, useResizeObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
 import { getScreenExtraField, isMessage, slug, getComponentFromName, getDeviceScreens } from '@micromag/core/utils';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -1146,7 +1146,7 @@ DevicesMenu.defaultProps = defaultProps$f;
 
 var styles$a = {"button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
 
-var styles$9 = {"button":"micromag-editor-buttons-screen-with-preview-button","placeholder":"micromag-editor-buttons-screen-with-preview-placeholder","preview":"micromag-editor-buttons-screen-with-preview-preview","screen":"micromag-editor-buttons-screen-with-preview-screen","frame":"micromag-editor-buttons-screen-with-preview-frame"};
+var styles$9 = {"button":"micromag-editor-buttons-screen-with-preview-button"};
 
 var styles$8 = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
 
@@ -1229,9 +1229,6 @@ var propTypes$d = {
   href: PropTypes.string,
   title: PropTypes.string,
   active: PropTypes.bool,
-  previewWidth: PropTypes.number,
-  previewHeight: PropTypes.number,
-  withPreview: PropTypes.bool,
   withPlaceholder: PropTypes.bool,
   onClick: PropTypes.func,
   onClickItem: PropTypes.func,
@@ -1243,9 +1240,6 @@ var defaultProps$d = {
   title: null,
   href: null,
   active: false,
-  previewWidth: 320,
-  previewHeight: 480,
-  withPreview: true,
   withPlaceholder: false,
   onClick: null,
   onClickItem: null,
@@ -1253,8 +1247,6 @@ var defaultProps$d = {
 };
 
 var ScreenWithPreview = function ScreenWithPreview(_ref) {
-  var _classNames;
-
   var screen = _ref.screen,
       screenState = _ref.screenState,
       index = _ref.index,
@@ -1262,45 +1254,13 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       href = _ref.href,
       active = _ref.active,
       className = _ref.className,
-      previewWidth = _ref.previewWidth,
-      previewHeight = _ref.previewHeight,
       _onClick = _ref.onClick,
       onClickItem = _ref.onClickItem,
-      withPreview = _ref.withPreview,
       withPlaceholder = _ref.withPlaceholder;
   var intl = useIntl();
-
-  var _useResizeObserver = useResizeObserver(),
-      refResize = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
-
-  var _useMemo = useMemo(function () {
-    var _ref2 = contentRect || {},
-        _ref2$width = _ref2.width,
-        itemWidth = _ref2$width === void 0 ? 0 : _ref2$width;
-
-    var ratio = 3 / 4;
-    var finalWidth = previewWidth;
-    var finalHeight = previewHeight !== null ? previewHeight : previewWidth * ratio;
-    var previewScale = itemWidth / previewWidth;
-    return {
-      width: itemWidth,
-      height: finalHeight * previewScale,
-      screenWidth: finalWidth,
-      screenHeight: finalHeight,
-      scale: previewScale
-    };
-  }, [withPlaceholder, previewWidth, previewHeight, contentRect]),
-      width = _useMemo.width,
-      height = _useMemo.height,
-      screenWidth = _useMemo.screenWidth,
-      screenHeight = _useMemo.screenHeight,
-      scale = _useMemo.scale;
-
   var ScreenComponent = withPlaceholder ? ScreenPlaceholder : ScreenPreview;
   return /*#__PURE__*/React.createElement(ScreenButton$1, {
     href: href,
-    ref: refResize,
     active: active,
     className: classNames([styles$9.button, _defineProperty({}, className, className !== null)]),
     title: isMessage(title) ? intl.formatMessage(title) : null,
@@ -1313,26 +1273,12 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
         onClickItem(screen, index);
       }
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.frame,
-    style: {
-      width: width,
-      height: height
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames = {}, _defineProperty(_classNames, styles$9.preview, withPreview && !withPlaceholder), _defineProperty(_classNames, styles$9.placeholder, withPlaceholder && !withPreview), _classNames)),
-    style: {
-      width: withPlaceholder ? width : screenWidth,
-      height: withPlaceholder ? height : screenHeight,
-      transform: withPlaceholder ? null : "scale(".concat(scale, ")")
-    }
   }, /*#__PURE__*/React.createElement(ScreenComponent, {
     screen: screen,
     screenState: screenState,
-    width: withPlaceholder ? width : screenWidth,
-    height: withPlaceholder ? height : screenHeight,
-    className: styles$9.screen
-  }))));
+    className: styles$9.screen,
+    withSize: true
+  }));
 };
 
 ScreenWithPreview.propTypes = propTypes$d;
@@ -2913,7 +2859,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
 ScreensMenu.propTypes = propTypes$7;
 ScreensMenu.defaultProps = defaultProps$7;
 
-var styles$2 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen"};
+var styles$2 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
 
 var propTypes$6 = {
   screens: PropTypes$1.screenDefinitions,
@@ -3015,6 +2961,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
         'bg-secondary': selectedTypes === null,
         'text-secondary': selectedTypes !== null
       }]),
+      buttonClassName: styles$2.button,
       onClickItem: onClickItem
     })));
   })));

package/lib/index.js

@@ -1166,7 +1166,7 @@ DevicesMenu.defaultProps = defaultProps$f;
 
 var styles$a = {"button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
 
-var styles$9 = {"button":"micromag-editor-buttons-screen-with-preview-button","placeholder":"micromag-editor-buttons-screen-with-preview-placeholder","preview":"micromag-editor-buttons-screen-with-preview-preview","screen":"micromag-editor-buttons-screen-with-preview-screen","frame":"micromag-editor-buttons-screen-with-preview-frame"};
+var styles$9 = {"button":"micromag-editor-buttons-screen-with-preview-button"};
 
 var styles$8 = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
 
@@ -1249,9 +1249,6 @@ var propTypes$d = {
   href: PropTypes__default["default"].string,
   title: PropTypes__default["default"].string,
   active: PropTypes__default["default"].bool,
-  previewWidth: PropTypes__default["default"].number,
-  previewHeight: PropTypes__default["default"].number,
-  withPreview: PropTypes__default["default"].bool,
   withPlaceholder: PropTypes__default["default"].bool,
   onClick: PropTypes__default["default"].func,
   onClickItem: PropTypes__default["default"].func,
@@ -1263,9 +1260,6 @@ var defaultProps$d = {
   title: null,
   href: null,
   active: false,
-  previewWidth: 320,
-  previewHeight: 480,
-  withPreview: true,
   withPlaceholder: false,
   onClick: null,
   onClickItem: null,
@@ -1273,8 +1267,6 @@ var defaultProps$d = {
 };
 
 var ScreenWithPreview = function ScreenWithPreview(_ref) {
-  var _classNames;
-
   var screen = _ref.screen,
       screenState = _ref.screenState,
       index = _ref.index,
@@ -1282,45 +1274,13 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       href = _ref.href,
       active = _ref.active,
       className = _ref.className,
-      previewWidth = _ref.previewWidth,
-      previewHeight = _ref.previewHeight,
       _onClick = _ref.onClick,
       onClickItem = _ref.onClickItem,
-      withPreview = _ref.withPreview,
       withPlaceholder = _ref.withPlaceholder;
   var intl = reactIntl.useIntl();
-
-  var _useResizeObserver = hooks.useResizeObserver(),
-      refResize = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
-
-  var _useMemo = React.useMemo(function () {
-    var _ref2 = contentRect || {},
-        _ref2$width = _ref2.width,
-        itemWidth = _ref2$width === void 0 ? 0 : _ref2$width;
-
-    var ratio = 3 / 4;
-    var finalWidth = previewWidth;
-    var finalHeight = previewHeight !== null ? previewHeight : previewWidth * ratio;
-    var previewScale = itemWidth / previewWidth;
-    return {
-      width: itemWidth,
-      height: finalHeight * previewScale,
-      screenWidth: finalWidth,
-      screenHeight: finalHeight,
-      scale: previewScale
-    };
-  }, [withPlaceholder, previewWidth, previewHeight, contentRect]),
-      width = _useMemo.width,
-      height = _useMemo.height,
-      screenWidth = _useMemo.screenWidth,
-      screenHeight = _useMemo.screenHeight,
-      scale = _useMemo.scale;
-
   var ScreenComponent = withPlaceholder ? components.ScreenPlaceholder : components.ScreenPreview;
   return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
     href: href,
-    ref: refResize,
     active: active,
     className: classNames__default["default"]([styles$9.button, _defineProperty__default["default"]({}, className, className !== null)]),
     title: utils.isMessage(title) ? intl.formatMessage(title) : null,
@@ -1333,26 +1293,12 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
         onClickItem(screen, index);
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$9.frame,
-    style: {
-      width: width,
-      height: height
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles$9.preview, withPreview && !withPlaceholder), _defineProperty__default["default"](_classNames, styles$9.placeholder, withPlaceholder && !withPreview), _classNames)),
-    style: {
-      width: withPlaceholder ? width : screenWidth,
-      height: withPlaceholder ? height : screenHeight,
-      transform: withPlaceholder ? null : "scale(".concat(scale, ")")
-    }
   }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, {
     screen: screen,
     screenState: screenState,
-    width: withPlaceholder ? width : screenWidth,
-    height: withPlaceholder ? height : screenHeight,
-    className: styles$9.screen
-  }))));
+    className: styles$9.screen,
+    withSize: true
+  }));
 };
 
 ScreenWithPreview.propTypes = propTypes$d;
@@ -2933,7 +2879,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
 ScreensMenu.propTypes = propTypes$7;
 ScreensMenu.defaultProps = defaultProps$7;
 
-var styles$2 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen"};
+var styles$2 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
 
 var propTypes$6 = {
   screens: core.PropTypes.screenDefinitions,
@@ -3035,6 +2981,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
         'bg-secondary': selectedTypes === null,
         'text-secondary': selectedTypes !== null
       }]),
+      buttonClassName: styles$2.button,
       onClickItem: onClickItem
     })));
   })));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.3.9",
+    "version": "0.3.10",
     "description": "",
     "keywords": [
         "javascript"
@@ -62,11 +62,11 @@
         "@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.7",
-        "@micromag/elements": "^0.3.7",
-        "@micromag/fields": "^0.3.9",
-        "@micromag/screens": "^0.3.9",
-        "@micromag/viewer": "^0.3.9",
+        "@micromag/core": "^0.3.10",
+        "@micromag/elements": "^0.3.10",
+        "@micromag/fields": "^0.3.10",
+        "@micromag/screens": "^0.3.10",
+        "@micromag/viewer": "^0.3.10",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "aa563abb7ea0ce1692a4191b47260b503dda50c7"
+    "gitHead": "86e11f1f28cd844b3fde4718ac7ddfcb9585e7c6"
 }