@micromag/viewer 0.2.412 → 0.3.0

package/lib/index.js

@@ -4,119 +4,329 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
 var PropTypes = require('prop-types');
+var React = require('react');
 var reactRouter = require('react-router');
 var reactRouterDom = require('react-router-dom');
-var screens = require('@micromag/screens');
-var intl = require('@micromag/intl');
-var fieldsManager = require('@micromag/fields/manager');
-var core = require('@micromag/core');
+var core$1 = require('@micromag/core');
 var contexts = require('@micromag/core/contexts');
+var fieldsManager = require('@micromag/fields/manager');
+var intl = require('@micromag/intl');
+var screens = require('@micromag/screens');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var core$1 = require('@react-spring/core');
-var web = require('@react-spring/web');
-var react = require('@use-gesture/react');
 var classNames = require('classnames');
 var reactHelmet = require('react-helmet');
 var reactIntl = require('react-intl');
 var components = require('@micromag/core/components');
 var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
+var core = require('@react-spring/core');
+var web = require('@react-spring/web');
+var react = require('@use-gesture/react');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var Scroll = require('@micromag/element-scroll');
 var reactShare = require('react-share');
+var EventEmitter = require('wolfy87-eventemitter');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var fieldsManager__default = /*#__PURE__*/_interopDefaultLegacy(fieldsManager);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
+var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
+
+var home = "/";
+var screen = "/:screen";
+var defaultRoutes = {
+  home: home,
+  screen: screen
+};
 
 var routes = PropTypes__default["default"].shape({
   home: PropTypes__default["default"].string.isRequired,
   screen: PropTypes__default["default"].string.isRequired
 });
 
-var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
+function useKeyboardShortcuts() {
+  var shortcuts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-var styles$5 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
 
-var propTypes$8 = {
-  screen: core.PropTypes.screenComponent,
-  renderContext: core.PropTypes.renderContext,
+  React.useEffect(function () {
+    var onKey = function onKey(e) {
+      if (['input', 'textarea'].reduce(function (foundMatch, match) {
+        return foundMatch || e.target.matches(match);
+      }, false)) {
+        return;
+      }
+
+      var key = e.key;
+      var lowercaseKey = key.toLowerCase();
+
+      if (typeof shortcuts[lowercaseKey] !== 'undefined') {
+        shortcuts[lowercaseKey]();
+      }
+    };
+
+    if (!disabled) {
+      window.addEventListener('keydown', onKey);
+    }
+
+    return function () {
+      if (!disabled) {
+        window.removeEventListener('keydown', onKey);
+      }
+    };
+  }, [disabled]);
+}
+
+function checkClickable(el) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var distance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+
+  var _ref = options || {},
+      _ref$maxDistance = _ref.maxDistance,
+      maxDistance = _ref$maxDistance === void 0 ? 5 : _ref$maxDistance,
+      _ref$tags = _ref.tags,
+      tags = _ref$tags === void 0 ? ['BUTTON', 'A', 'INPUT', 'TEXTAREA'] : _ref$tags;
+
+  var _ref2 = el || {},
+      _ref2$tagName = _ref2.tagName,
+      tagName = _ref2$tagName === void 0 ? null : _ref2$tagName,
+      _ref2$parentNode = _ref2.parentNode,
+      parentNode = _ref2$parentNode === void 0 ? null : _ref2$parentNode;
+
+  if (tagName === 'BODY') {
+    return false;
+  }
+
+  if (tags.map(function (it) {
+    return it.toLowerCase();
+  }).indexOf(tagName.toLowerCase()) > -1) {
+    return true;
+  }
+
+  if (distance < maxDistance) {
+    return checkClickable(parentNode, options, distance + 1);
+  }
+
+  return false;
+}
+
+function useScreenInteraction() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      screens = _ref.screens,
+      screenId = _ref.screenId,
+      screenWidth = _ref.screenWidth,
+      _ref$isView = _ref.isView,
+      isView = _ref$isView === void 0 ? false : _ref$isView,
+      _ref$clickOnSiblings = _ref.clickOnSiblings,
+      clickOnSiblings = _ref$clickOnSiblings === void 0 ? false : _ref$clickOnSiblings,
+      _ref$nextScreenWidthP = _ref.nextScreenWidthPercent,
+      nextScreenWidthPercent = _ref$nextScreenWidthP === void 0 ? 0.5 : _ref$nextScreenWidthP,
+      _ref$eventsManager = _ref.eventsManager,
+      eventsManager = _ref$eventsManager === void 0 ? null : _ref$eventsManager,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? null : _ref$onClick,
+      _ref$onEnd = _ref.onEnd,
+      onEnd = _ref$onEnd === void 0 ? null : _ref$onEnd,
+      _ref$onChangeScreen = _ref.onChangeScreen,
+      onChangeScreen = _ref$onChangeScreen === void 0 ? null : _ref$onChangeScreen;
+
+  var _useState = React.useState(screens.reduce(function (map, _ref2) {
+    var id = _ref2.id;
+    return _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, true));
+  }, {})),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      screensInteractionEnabled = _useState2[0],
+      setScreensInteractionEnabled = _useState2[1];
+
+  var screenIndex = screens.findIndex(function (_ref3) {
+    var id = _ref3.id;
+    return id === screenId;
+  });
+  var _screensInteractionEn = screensInteractionEnabled[screenId],
+      currentScreenInteractionEnabled = _screensInteractionEn === void 0 ? true : _screensInteractionEn;
+  var updateInteraction = React.useCallback(function (newValue) {
+    var _screensInteractionEn2 = screensInteractionEnabled[screenId],
+        currentValue = _screensInteractionEn2 === void 0 ? true : _screensInteractionEn2;
+
+    if (currentValue !== newValue) {
+      setScreensInteractionEnabled(screens.reduce(function (map, _ref4) {
+        var id = _ref4.id;
+        return screenId === id ? _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, newValue)) : _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, typeof screensInteractionEnabled[id] === 'undefined' || screensInteractionEnabled[id] === true));
+      }, {}));
+    }
+  }, [screens, screenId, screensInteractionEnabled, setScreensInteractionEnabled]);
+  var enableInteraction = React.useCallback(function () {
+    return updateInteraction(true);
+  }, [updateInteraction]);
+  var disableInteraction = React.useCallback(function () {
+    return updateInteraction(false);
+  }, [updateInteraction]);
+  var onScreenClick = React.useCallback(function (e, index) {
+    if (onClick !== null) {
+      onClick(e, index);
+    }
+
+    var screensCount = screens.length;
+    var tappedCurrent = screenIndex === index;
+    eventsManager.emit('tap', e, index);
+
+    if (!isView && tappedCurrent || checkClickable(e.target) || tappedCurrent && !currentScreenInteractionEnabled) {
+      return;
+    }
+
+    var nextIndex = screenIndex;
+
+    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
+        _e$currentTarget$getB2 = _e$currentTarget$getB.left,
+        contentX = _e$currentTarget$getB2 === void 0 ? 0 : _e$currentTarget$getB2;
+
+    var tapX = e.clientX;
+    var hasTappedLeft = tappedCurrent ? tapX - contentX < screenWidth * (1 - nextScreenWidthPercent) : screenIndex > index;
+
+    if (hasTappedLeft) {
+      nextIndex = clickOnSiblings ? index : Math.max(0, screenIndex - 1);
+      eventsManager.emit('tap_previous', nextIndex);
+    } else {
+      nextIndex = clickOnSiblings ? index : Math.min(screensCount - 1, screenIndex + 1);
+      var isLastScreen = screenIndex === screensCount - 1;
+
+      if (isLastScreen && onEnd !== null) {
+        eventsManager.emit('tap_end');
+        onEnd();
+      } else {
+        eventsManager.emit('tap_next', nextIndex);
+      }
+    }
+
+    eventsManager.emit('change_screen', nextIndex);
+    onChangeScreen(nextIndex);
+  }, [screenWidth, screens, screenIndex, eventsManager, onClick, onEnd, onChangeScreen, screenIndex, screensInteractionEnabled, currentScreenInteractionEnabled, nextScreenWidthPercent, isView, clickOnSiblings]);
+  return {
+    onClick: onScreenClick,
+    currentScreenInteractionEnabled: currentScreenInteractionEnabled,
+    enableInteraction: enableInteraction,
+    disableInteraction: disableInteraction
+  };
+}
+
+var styles$7 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","visible":"micromag-viewer-visible","withSibblings":"micromag-viewer-withSibblings","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
+
+var styles$6 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
+
+var styles$5 = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","vertical":"micromag-viewer-menus-menu-dot-vertical"};
+
+var propTypes$a = {
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
-  onPrevious: PropTypes__default["default"].func,
-  onNext: PropTypes__default["default"].func,
-  onEnableInteraction: PropTypes__default["default"].func,
-  onDisableInteraction: PropTypes__default["default"].func,
-  getMediaRef: PropTypes__default["default"].func
+  colors: PropTypes__default["default"].shape({
+    primary: PropTypes__default["default"].string,
+    secondary: PropTypes__default["default"].string
+  }),
+  vertical: PropTypes__default["default"].bool,
+  onClick: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string
 };
-var defaultProps$8 = {
-  screen: null,
-  renderContext: null,
+var defaultProps$a = {
   current: false,
-  active: true,
-  onPrevious: null,
-  onNext: null,
-  onEnableInteraction: null,
-  onDisableInteraction: null,
-  getMediaRef: null
+  active: false,
+  colors: null,
+  vertical: false,
+  onClick: null,
+  className: null
 };
 
-var ViewerScreen = function ViewerScreen(_ref) {
-  var _ref2;
+var ViewerMenuDot = function ViewerMenuDot(_ref) {
+  var _ref3;
 
-  var screen = _ref.screen,
-      renderContext = _ref.renderContext,
+  var current = _ref.current,
       active = _ref.active,
-      current = _ref.current,
-      onPrevious = _ref.onPrevious,
-      onNext = _ref.onNext,
-      onEnableInteraction = _ref.onEnableInteraction,
-      onDisableInteraction = _ref.onDisableInteraction,
-      getMediaRef = _ref.getMediaRef;
-  return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$5.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$5.active, active), _defineProperty__default["default"](_ref2, styles$5.current, current), _ref2)]),
-    "aria-hidden": current ? null : 'true'
-  }, /*#__PURE__*/React__default["default"].createElement(components.Screen, {
-    screen: screen,
-    renderContext: renderContext,
-    active: active,
-    current: current,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnableInteraction: onEnableInteraction,
-    onDisableInteraction: onDisableInteraction,
-    getMediaRef: getMediaRef
-  })) : null;
-};
+      colors = _ref.colors,
+      vertical = _ref.vertical,
+      onClick = _ref.onClick,
+      className = _ref.className;
+  var currentTime = 0;
+  var duration = 1;
+  var playing = true;
 
-ViewerScreen.propTypes = propTypes$8;
-ViewerScreen.defaultProps = defaultProps$8;
+  var _ref2 = colors || {},
+      _ref2$primary = _ref2.primary,
+      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
+      _ref2$secondary = _ref2.secondary,
+      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary; // TODO: if approved animate progress
 
-var styles$4 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
 
-var styles$3 = {};
+  var _useSpring = core.useSpring(function () {
+    return {
+      x: 0,
+      config: {
+        duration: 0
+      }
+    };
+  }),
+      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2);
+      _useSpring2[0];
+      var setSpringProps = _useSpring2[1];
 
-var propTypes$7 = {
+  React.useEffect(function () {
+
+    var progress = currentTime / duration;
+    setSpringProps.start({
+      reset: true,
+      immediate: !playing,
+      from: {
+        x: progress
+      },
+      to: {
+        x: 1 
+      },
+      config: {
+        duration: (duration - currentTime) * 1000
+      }
+    });
+  }, [playing, duration, currentTime, setSpringProps]);
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: classNames__default["default"]([styles$5.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$5.active, current), _defineProperty__default["default"](_ref3, styles$5.vertical, vertical), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: styles$5.button,
+    onClick: onClick,
+    tabIndex: "-1"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$5.dot,
+    style: {
+      backgroundColor: active ? primary : secondary
+    }
+  })));
+};
+
+ViewerMenuDot.propTypes = propTypes$a;
+ViewerMenuDot.defaultProps = defaultProps$a;
+
+var styles$4 = {};
+
+var propTypes$9 = {
   size: PropTypes__default["default"].number,
   spacing: PropTypes__default["default"].number,
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$7 = {
+var defaultProps$9 = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -130,7 +340,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$4.container, _defineProperty__default["default"]({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -148,57 +358,66 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$7;
-MenuIcon.defaultProps = defaultProps$7;
+MenuIcon.propTypes = propTypes$9;
+MenuIcon.defaultProps = defaultProps$9;
 
-var propTypes$6 = {
+var propTypes$8 = {
   direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes__default["default"].bool,
-  items: core.PropTypes.menuItems,
-  current: PropTypes__default["default"].number,
+  items: core$1.PropTypes.menuItems,
   onClickItem: PropTypes__default["default"].func,
+  onClickMenu: PropTypes__default["default"].func,
   colors: PropTypes__default["default"].shape({
     primary: PropTypes__default["default"].string,
     secondary: PropTypes__default["default"].string
   }),
   closeable: PropTypes__default["default"].bool,
+  withItemClick: PropTypes__default["default"].bool,
+  withoutScreensMenu: PropTypes__default["default"].bool,
   onClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$6 = {
+var defaultProps$8 = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
-  current: 0,
   onClickItem: null,
+  onClickMenu: null,
   colors: null,
   closeable: false,
+  withItemClick: false,
+  withoutScreensMenu: false,
   onClose: null,
   className: null
 };
 
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var _ref3;
+  var _ref4;
 
   var direction = _ref.direction,
       withShadow = _ref.withShadow,
       items = _ref.items,
-      current = _ref.current,
       onClickItem = _ref.onClickItem,
+      onClickMenu = _ref.onClickMenu,
       colors = _ref.colors,
       closeable = _ref.closeable,
+      withItemClick = _ref.withItemClick,
+      withoutScreensMenu = _ref.withoutScreensMenu,
       onClose = _ref.onClose,
       className = _ref.className;
 
   var _ref2 = colors || {},
       _ref2$primary = _ref2.primary,
-      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
-      _ref2$secondary = _ref2.secondary,
-      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary;
+      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary;
 
   var intl = reactIntl.useIntl();
+  var currentIndex = items.findIndex(function (_ref3) {
+    var _ref3$current = _ref3.current,
+        current = _ref3$current === void 0 ? false : _ref3$current;
+    return current;
+  });
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$4.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles$4.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref3, styles$4.withShadow, withShadow), _ref3)]),
+    className: classNames__default["default"]([styles$6.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$6.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref4, styles$6.withShadow, withShadow), _ref4)]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -218,35 +437,32 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "."
       }]
     }, {
-      current: current + 1,
+      current: currentIndex + 1,
       total: items.length
     })
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: styles$4.items
+    className: styles$6.items
   }, items.map(function (item, index) {
-    return (item === null || item === void 0 ? void 0 : item.parentId) === null ? /*#__PURE__*/React__default["default"].createElement("li", {
-      className: classNames__default["default"]([styles$4.item, _defineProperty__default["default"]({}, styles$4.active, current === index)]),
-      key: "item-".concat(index),
-      "aria-hidden": "true"
-    }, /*#__PURE__*/React__default["default"].createElement("button", {
-      type: "button",
-      className: styles$4.button,
+    var _item$current = item.current,
+        current = _item$current === void 0 ? false : _item$current;
+    return /*#__PURE__*/React__default["default"].createElement(ViewerMenuDot, {
+      key: "item-".concat(index + 1),
+      current: current,
+      active: index <= currentIndex,
+      colors: colors,
       onClick: function onClick() {
-        if (onClickItem !== null) {
-          onClickItem(index);
+        if ((withItemClick || withoutScreensMenu) && onClickItem !== null) {
+          onClickItem(item);
+        } else if (!withItemClick && onClickMenu !== null) {
+          onClickMenu();
         }
       },
-      tabIndex: "-1"
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$4.dot,
-      style: {
-        backgroundColor: index <= current ? primary : secondary
-      }
-    }))) : null;
-  }), /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$4.menu
+      vertical: direction === 'vertical'
+    });
+  }), !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
+    className: styles$6.menu
   }, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
-    className: styles$4.menuIcon,
+    className: styles$6.menuIcon,
     color: primary
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
@@ -264,20 +480,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$4.menuButton,
-    onClick: function onClick() {
-      if (onClickItem !== null) {
-        onClickItem(null);
-      }
-    }
-  })), closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$4.closeButton,
+    className: styles$6.menuButton,
+    onClick: onClickMenu
+  })) : null, closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
+    className: styles$6.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: styles$4.closeButton,
+    className: styles$6.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -298,14 +510,14 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$6;
-ViewerMenuDots.defaultProps = defaultProps$6;
+ViewerMenuDots.propTypes = propTypes$8;
+ViewerMenuDots.defaultProps = defaultProps$8;
 
-var styles$2 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","itemContent":"micromag-viewer-menus-menu-preview-itemContent","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
+var styles$3 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
 
-var styles$1 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
+var styles$2 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
 
-var propTypes$5 = {
+var propTypes$7 = {
   url: PropTypes__default["default"].string,
   title: PropTypes__default["default"].string,
   opened: PropTypes__default["default"].bool,
@@ -313,7 +525,7 @@ var propTypes$5 = {
   onShare: PropTypes__default["default"].func,
   onCancel: PropTypes__default["default"].func
 };
-var defaultProps$5 = {
+var defaultProps$7 = {
   url: null,
   title: null,
   opened: false,
@@ -366,13 +578,13 @@ var ShareModal = function ShareModal(_ref) {
   }, [opened, onCancel]);
   hooks.useDocumentEvent('click', onDocumentClick, opened);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$1.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className), _defineProperty__default["default"](_ref2, styles$1.opened, opened), _ref2)]),
+    className: classNames__default["default"]([styles$2.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className), _defineProperty__default["default"](_ref2, styles$2.opened, opened), _ref2)]),
     ref: containerRef,
     "aria-hidden": opened ? null : '-1'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1.content
+    className: styles$2.content
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1.buttons
+    className: styles$2.buttons
   }, /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
     quote: title,
     beforeOnClick: function beforeOnClick() {
@@ -397,12 +609,12 @@ var ShareModal = function ShareModal(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailIcon, shareIconProps)))));
 };
 
-ShareModal.propTypes = propTypes$5;
-ShareModal.defaultProps = defaultProps$5;
+ShareModal.propTypes = propTypes$7;
+ShareModal.defaultProps = defaultProps$7;
 
-var styles = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
+var styles$1 = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
 
-var propTypes$4 = {
+var propTypes$6 = {
   title: PropTypes__default["default"].string,
   url: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
@@ -411,7 +623,7 @@ var propTypes$4 = {
   children: PropTypes__default["default"].node,
   focusable: PropTypes__default["default"].bool
 };
-var defaultProps$4 = {
+var defaultProps$6 = {
   title: null,
   url: null,
   className: null,
@@ -452,7 +664,7 @@ var ShareButton = function ShareButton(_ref) {
     setStoryShareModalOpened(false);
   }, [setStoryShareModalOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
     className: classNames__default["default"]([_defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
     onClick: onShareIconClick,
@@ -472,7 +684,7 @@ var ShareButton = function ShareButton(_ref) {
     }),
     focusable: focusable
   }, children), /*#__PURE__*/React__default["default"].createElement(ShareModal, {
-    className: styles.shareModal,
+    className: styles$1.shareModal,
     opened: storyShareModalOpened,
     title: title,
     url: url,
@@ -481,16 +693,16 @@ var ShareButton = function ShareButton(_ref) {
   }));
 };
 
-ShareButton.propTypes = propTypes$4;
-ShareButton.defaultProps = defaultProps$4;
+ShareButton.propTypes = propTypes$6;
+ShareButton.defaultProps = defaultProps$6;
 
-var propTypes$3 = {
-  viewerTheme: core.PropTypes.viewerTheme,
-  screenWidth: PropTypes__default["default"].number,
+var propTypes$5 = {
+  viewerTheme: core$1.PropTypes.viewerTheme,
+  screenSize: core$1.PropTypes.screenSize,
+  menuWidth: PropTypes__default["default"].number,
   title: PropTypes__default["default"].string,
   shareUrl: PropTypes__default["default"].string,
-  items: core.PropTypes.menuItems,
-  current: PropTypes__default["default"].number,
+  items: core$1.PropTypes.menuItems,
   focusable: PropTypes__default["default"].bool,
   onClickItem: PropTypes__default["default"].func,
   onClose: PropTypes__default["default"].func,
@@ -501,13 +713,13 @@ var propTypes$3 = {
   fullscreenEnabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$3 = {
+var defaultProps$5 = {
   viewerTheme: null,
-  screenWidth: null,
+  screenSize: null,
+  menuWidth: null,
   title: null,
   shareUrl: null,
   items: [],
-  current: 0,
   focusable: true,
   onClickItem: null,
   onClose: null,
@@ -521,11 +733,11 @@ var defaultProps$3 = {
 
 var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var viewerTheme = _ref.viewerTheme,
-      screenWidth = _ref.screenWidth,
+      screenSize = _ref.screenSize,
+      menuWidth = _ref.menuWidth,
       title = _ref.title,
       shareUrl = _ref.shareUrl,
       items = _ref.items,
-      current = _ref.current,
       focusable = _ref.focusable,
       onClickItem = _ref.onClickItem,
       onClose = _ref.onClose,
@@ -536,82 +748,74 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       fullscreenEnabled = _ref.fullscreenEnabled,
       className = _ref.className;
   var intl = reactIntl.useIntl();
-  var screenSizeRatio = "".concat(3 / 2 / thumbsPerLine * 100, "%");
-  var screenRatioHeight = screenWidth * 3 / 2;
-  var hasSize = screenWidth > 0;
-  var hasItems = items !== null && items.length > 0;
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      thumbSize = _useState2[0],
-      setThumbSize = _useState2[1];
-
-  var firstScreenContainerRef = React.useRef(null);
-  React.useEffect(function () {
-    if (hasItems && hasSize && firstScreenContainerRef.current !== null) {
-      var _firstScreenContainer = firstScreenContainerRef.current,
-          offsetWidth = _firstScreenContainer.offsetWidth,
-          offsetHeight = _firstScreenContainer.offsetHeight;
-      setThumbSize({
-        width: offsetWidth,
-        height: offsetHeight
-      });
-    }
-  }, [screenWidth, hasItems, hasSize]); // Viewer theme
-
-  var _ref2 = viewerTheme || {},
-      _ref2$colors = _ref2.colors,
-      colors = _ref2$colors === void 0 ? null : _ref2$colors,
-      _ref2$background = _ref2.background,
-      background = _ref2$background === void 0 ? null : _ref2$background,
-      _ref2$textStyles = _ref2.textStyles,
-      textStyles = _ref2$textStyles === void 0 ? null : _ref2$textStyles,
-      _ref2$logo = _ref2.logo,
-      brandLogo = _ref2$logo === void 0 ? null : _ref2$logo;
-
-  var _ref3 = textStyles || {},
-      _ref3$title = _ref3.title,
-      brandTextStyle = _ref3$title === void 0 ? null : _ref3$title;
 
-  var _ref4 = colors || {},
-      _ref4$primary = _ref4.primary,
-      brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary,
-      _ref4$secondary = _ref4.secondary,
-      brandSecondaryColor = _ref4$secondary === void 0 ? null : _ref4$secondary;
+  var _ref2 = screenSize || {},
+      screenWidth = _ref2.width,
+      screenHeight = _ref2.height;
 
-  var _ref5 = background || {},
-      _ref5$color = _ref5.color,
-      brandBackgroundColor = _ref5$color === void 0 ? null : _ref5$color,
-      _ref5$image = _ref5.image,
-      image = _ref5$image === void 0 ? null : _ref5$image;
-
-  var _ref6 = image || {},
-      _ref6$url = _ref6.url,
-      brandImageUrl = _ref6$url === void 0 ? null : _ref6$url;
+  var _useResizeObserver = hooks.useResizeObserver(),
+      firstScreenContainerRef = _useResizeObserver.ref,
+      firstScreenContentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref3 = firstScreenContentRect || {},
+      _ref3$width = _ref3.width,
+      thumbWidth = _ref3$width === void 0 ? 0 : _ref3$width;
+
+  var screenScale = thumbWidth / screenWidth; // Viewer theme
+
+  var _ref4 = viewerTheme || {},
+      _ref4$colors = _ref4.colors,
+      colors = _ref4$colors === void 0 ? null : _ref4$colors,
+      _ref4$background = _ref4.background,
+      background = _ref4$background === void 0 ? null : _ref4$background,
+      _ref4$textStyles = _ref4.textStyles,
+      textStyles = _ref4$textStyles === void 0 ? null : _ref4$textStyles,
+      _ref4$logo = _ref4.logo,
+      brandLogo = _ref4$logo === void 0 ? null : _ref4$logo;
+
+  var _ref5 = textStyles || {},
+      _ref5$title = _ref5.title,
+      brandTextStyle = _ref5$title === void 0 ? null : _ref5$title;
+
+  var _ref6 = colors || {},
+      _ref6$primary = _ref6.primary,
+      brandPrimaryColor = _ref6$primary === void 0 ? null : _ref6$primary,
+      _ref6$secondary = _ref6.secondary,
+      brandSecondaryColor = _ref6$secondary === void 0 ? null : _ref6$secondary;
+
+  var _ref7 = background || {},
+      _ref7$color = _ref7.color,
+      brandBackgroundColor = _ref7$color === void 0 ? null : _ref7$color,
+      _ref7$image = _ref7.image,
+      image = _ref7$image === void 0 ? null : _ref7$image;
+
+  var _ref8 = image || {},
+      _ref8$url = _ref8.url,
+      brandImageUrl = _ref8$url === void 0 ? null : _ref8$url;
 
   var borderPrimaryColorStyle = utils.getStyleFromColor(brandPrimaryColor, 'borderColor');
   var colorSecondaryColorStyle = utils.getStyleFromColor(brandSecondaryColor, 'color');
   var backgroundColorStyle = utils.getStyleFromColor(brandBackgroundColor, 'backgroundColor');
 
-  var _ref7 = brandLogo || {},
-      _ref7$url = _ref7.url,
-      brandLogoUrl = _ref7$url === void 0 ? null : _ref7$url;
+  var _ref9 = brandLogo || {},
+      _ref9$url = _ref9.url,
+      brandLogoUrl = _ref9$url === void 0 ? null : _ref9$url;
 
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null;
   var titleStyle = brandTextStyle !== null ? utils.getStyleFromText(brandTextStyle) : null;
 
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      scrolledBottom = _useState4[0],
-      setScrolledBottom = _useState4[1];
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      scrolledBottom = _useState2[0],
+      setScrolledBottom = _useState2[1];
 
-  var dragBind = react.useDrag(function (_ref8) {
-    var _ref8$direction = _slicedToArray__default["default"](_ref8.direction, 2),
-        dy = _ref8$direction[1],
-        last = _ref8.last,
-        tap = _ref8.tap;
+  var dragBind = react.useDrag(function (_ref10) {
+    var _ref10$direction = _slicedToArray__default["default"](_ref10.direction, 2),
+        dy = _ref10$direction[1],
+        last = _ref10.last,
+        tap = _ref10.tap;
 
     if (!tap && last && scrolledBottom && dy < 0 && onClose !== null) {
       onClose();
@@ -628,37 +832,37 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var onScrolledNotBottom = React.useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
-  return hasSize ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className !== null)]),
     style: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, backgroundColorStyle), brandImageStyle), {}, {
-      width: screenWidth
+      width: menuWidth
     }),
     "aria-hidden": focusable ? null : 'true'
   }, dragBind()), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2.header
+    className: styles$3.header
   }, brandLogoUrl !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2.organisation,
+    className: styles$3.organisation,
     style: {
       backgroundImage: "url(".concat(brandLogoUrl, ")")
     }
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2.title,
+    className: styles$3.title,
     style: titleStyle
   }, title), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2.buttons,
+    className: styles$3.buttons,
     style: colorSecondaryColorStyle
   }, /*#__PURE__*/React__default["default"].createElement(ShareButton, {
-    className: styles$2.shareButton,
-    buttonClassName: styles$2.button,
+    className: styles$3.shareButton,
+    buttonClassName: styles$3.button,
     onShare: onShare,
     url: shareUrl,
     title: title,
     focusable: focusable
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$2.icon,
+    className: styles$3.icon,
     icon: freeSolidSvgIcons.faShare
   })), fullscreenEnabled ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$2.button,
+    className: styles$3.button,
     onClick: toggleFullscreen,
     title: intl.formatMessage({
       id: "AuxqcG",
@@ -676,10 +880,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$2.icon,
+    className: styles$3.icon,
     icon: fullscreenActive ? freeSolidSvgIcons.faCompress : freeSolidSvgIcons.faExpand
   })) : null, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$2.button,
+    className: styles$3.button,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -697,20 +901,23 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }),
     focusable: focusable
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$2.icon,
+    className: styles$3.icon,
     icon: freeSolidSvgIcons.faTimes
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2.content
+    className: styles$3.content
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
-    className: styles$2.scroll,
+    className: styles$3.scroll,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom
   }, /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: styles$2.nav
+    className: styles$3.nav
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: styles$2.items
+    className: styles$3.items
   }, items.map(function (item, index) {
-    var screenIndexLabel = intl.formatMessage({
+    var _item$current = item.current,
+        current = _item$current === void 0 ? false : _item$current,
+        screen = item.screen;
+    var screenAriaLabel = "".concat(intl.formatMessage({
       id: "LkVfwW",
       defaultMessage: [{
         "type": 0,
@@ -721,112 +928,453 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       }]
     }, {
       index: index + 1
-    });
-    var isCurrentScreenLabel = current === index ? " ".concat(intl.formatMessage({
+    })).concat(current ? " ".concat(intl.formatMessage({
       id: "vmrJ8U",
       defaultMessage: [{
         "type": 0,
         "value": "(current screen)"
       }]
-    })) : '';
-    var screenAriaLabel = screenIndexLabel + isCurrentScreenLabel;
-    return item.parentId === null ? /*#__PURE__*/React__default["default"].createElement("li", {
-      className: classNames__default["default"]([styles$2.item, _defineProperty__default["default"]({}, styles$2.active, current === index)]),
+    })) : '');
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: classNames__default["default"]([styles$3.item, _defineProperty__default["default"]({}, styles$3.active, current)]),
       key: "item-".concat(index),
       style: {
-        paddingBottom: screenSizeRatio,
         width: "".concat(100 / thumbsPerLine, "%")
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$2.itemContent
+      className: styles$3.itemContent
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$2.screenContainer,
-      ref: index === 0 ? firstScreenContainerRef : null
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$2.screenContent,
-      style: thumbSize !== null ? {
+      className: styles$3.screenContainer,
+      ref: index === 0 ? firstScreenContainerRef : null,
+      style: {
+        height: screenHeight * screenScale
+      }
+    }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styles$3.screenContent,
+      style: {
         width: screenWidth,
-        height: screenRatioHeight,
-        transform: "scale(".concat(thumbSize.width / screenWidth)
-      } : null,
+        height: screenHeight,
+        transform: "scale(".concat(screenScale)
+      },
       "aria-hidden": "true"
     }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
       width: screenWidth,
-      height: screenRatioHeight,
-      screen: item,
+      height: screenHeight,
+      screen: screen,
       focusable: false
-    })), current === index ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$2.activeScreenBorder,
+    })) : null, current ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styles$3.activeScreenBorder,
       style: borderPrimaryColorStyle
     }) : null)), /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: styles$2.screenButton,
+      className: styles$3.screenButton,
       onClick: function onClick() {
-        onClickItem(index);
+        if (onClickItem !== null) {
+          onClickItem(item);
+        }
       },
       "aria-label": screenAriaLabel,
       onKeyUp: function onKeyUp(e) {
-        if (e.key === 'Enter') {
-          onClickItem(index);
+        if (e.key === 'Enter' && onClickItem !== null) {
+          onClickItem(item);
         }
       },
       tabIndex: focusable ? '0' : '-1'
-    })) : null;
-  })))))) : null;
+    }));
+  }))))));
 };
 
-ViewerMenuPreview.propTypes = propTypes$3;
-ViewerMenuPreview.defaultProps = defaultProps$3;
+ViewerMenuPreview.propTypes = propTypes$5;
+ViewerMenuPreview.defaultProps = defaultProps$5;
 
-var propTypes$2 = {
-  story: core.PropTypes.story,
-  // .isRequired,
-  basePath: PropTypes__default["default"].string,
-  theme: core.PropTypes.viewerTheme,
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  screen: PropTypes__default["default"].string,
-  deviceScreens: core.PropTypes.deviceScreens,
-  renderContext: core.PropTypes.renderContext,
-  onScreenChange: PropTypes__default["default"].func,
-  tapNextScreenWidthPercent: PropTypes__default["default"].number,
-  neighborScreensActive: PropTypes__default["default"].number,
-  storyIsParsed: PropTypes__default["default"].bool,
-  landscapeScreenMargin: PropTypes__default["default"].number,
-  withMetadata: PropTypes__default["default"].bool,
-  withoutMenu: PropTypes__default["default"].bool,
-  withoutFullscreen: PropTypes__default["default"].bool,
+var propTypes$4 = {
+  story: core$1.PropTypes.story.isRequired,
+  currentScreenIndex: PropTypes__default["default"].number,
+  opened: PropTypes__default["default"].bool,
+  toggleFullscreen: PropTypes__default["default"].func,
+  fullscreenActive: PropTypes__default["default"].bool,
+  fullscreenEnabled: PropTypes__default["default"].bool,
   closeable: PropTypes__default["default"].bool,
-  onClose: PropTypes__default["default"].func,
-  onInteraction: PropTypes__default["default"].func,
-  onEnd: PropTypes__default["default"].func,
-  onViewModeChange: PropTypes__default["default"].func,
-  currentScreenMedia: core.PropTypes.ref,
-  screensMedias: core.PropTypes.ref,
-  screenSizeOptions: PropTypes__default["default"].shape({
-    withoutMaxSize: PropTypes__default["default"].bool,
-    desktopHeightRatio: PropTypes__default["default"].number,
-    screenRatio: PropTypes__default["default"].number
-  }),
-  className: PropTypes__default["default"].string
-};
-var defaultProps$2 = {
+  withShadow: PropTypes__default["default"].bool,
+  trackingEnabled: PropTypes__default["default"].bool,
+  shareBasePath: PropTypes__default["default"].string,
+  theme: core$1.PropTypes.viewerTheme,
+  screenSize: core$1.PropTypes.screenSize,
+  menuWidth: PropTypes__default["default"].number,
+  withDotItemClick: PropTypes__default["default"].bool,
+  withoutScreensMenu: PropTypes__default["default"].bool,
+  onRequestOpen: PropTypes__default["default"].func,
+  onRequestClose: PropTypes__default["default"].func,
+  onClickItem: PropTypes__default["default"].func,
+  onClickMenu: PropTypes__default["default"].func,
+  onClickCloseViewer: PropTypes__default["default"].func,
+  refDots: PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any // eslint-disable-line
+
+  })
+};
+var defaultProps$4 = {
+  currentScreenIndex: 0,
+  opened: false,
+  toggleFullscreen: null,
+  fullscreenActive: false,
+  fullscreenEnabled: false,
+  closeable: false,
+  withShadow: false,
+  trackingEnabled: false,
+  shareBasePath: null,
+  theme: null,
+  screenSize: null,
+  menuWidth: null,
+  withDotItemClick: false,
+  withoutScreensMenu: false,
+  onRequestOpen: null,
+  onRequestClose: null,
+  onClickItem: null,
+  onClickMenu: null,
+  onClickCloseViewer: null,
+  refDots: null
+};
+
+var ViewerMenu = function ViewerMenu(_ref) {
+  var story = _ref.story,
+      currentScreenIndex = _ref.currentScreenIndex,
+      opened = _ref.opened,
+      toggleFullscreen = _ref.toggleFullscreen,
+      fullscreenActive = _ref.fullscreenActive,
+      fullscreenEnabled = _ref.fullscreenEnabled,
+      closeable = _ref.closeable,
+      withShadow = _ref.withShadow,
+      shareBasePath = _ref.shareBasePath,
+      trackingEnabled = _ref.trackingEnabled,
+      viewerTheme = _ref.theme,
+      screenSize = _ref.screenSize,
+      menuWidth = _ref.menuWidth,
+      withDotItemClick = _ref.withDotItemClick,
+      withoutScreensMenu = _ref.withoutScreensMenu,
+      onRequestOpen = _ref.onRequestOpen,
+      onRequestClose = _ref.onRequestClose,
+      customOnClickItem = _ref.onClickItem,
+      customOnClickMenu = _ref.onClickMenu,
+      onClickCloseViewer = _ref.onClickCloseViewer,
+      refDots = _ref.refDots;
+  var _story$components = story.components,
+      screens = _story$components === void 0 ? [] : _story$components,
+      _story$title = story.title,
+      title = _story$title === void 0 ? null : _story$title;
+  var currentScreen = screens !== null ? screens[currentScreenIndex] || null : null;
+
+  var _ref2 = currentScreen || {},
+      _ref2$id = _ref2.id,
+      screenId = _ref2$id === void 0 ? null : _ref2$id,
+      _ref2$type = _ref2.type,
+      screenType = _ref2$type === void 0 ? null : _ref2$type;
+
+  var items = React.useMemo(function () {
+    return screens.filter(function (_ref3) {
+      var _ref3$parentId = _ref3.parentId,
+          parentId = _ref3$parentId === void 0 ? null : _ref3$parentId;
+      return parentId === null;
+    }).map(function (it) {
+      return {
+        screen: it,
+        screenId: it.id,
+        current: screenId === it.id
+      };
+    });
+  }, [screens, screenId]);
+  var trackEvent = hooks.useTrackEvent();
+  var trackScreenEvent = React.useCallback(function (cat, action, label) {
+    if (trackingEnabled) {
+      trackEvent(cat, action, label, {
+        screenId: screenId,
+        screenIndex: currentScreenIndex,
+        screenType: screenType
+      });
+    }
+  }, [trackEvent, screenId, currentScreenIndex, screenType]);
+  var shareUrl = React.useMemo(function () {
+    var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
+    var path = shareBasePath !== null ? "".concat(origin).concat(shareBasePath) : origin;
+    return path;
+  }, [shareBasePath]);
+
+  var _useSpring = core.useSpring(function () {
+    return {
+      y: 0,
+      config: _objectSpread__default["default"](_objectSpread__default["default"]({}, core.config.stiff), {}, {
+        clamp: true
+      })
+    };
+  }),
+      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+      menuY = _useSpring2[0].y,
+      setMenuSpring = _useSpring2[1];
+
+  var refOpened = React.useRef(opened);
+
+  if (refOpened.current !== opened) {
+    refOpened.current = opened;
+  }
+
+  React.useEffect(function () {
+    setMenuSpring.start({
+      y: opened ? 1 : 0
+    });
+  }, [opened]);
+
+  var _useResizeObserver = hooks.useResizeObserver(),
+      menuPreviewContainerRef = _useResizeObserver.ref,
+      menuPreviewContainerRect = _useResizeObserver.entry.contentRect;
+
+  var _ref4 = menuPreviewContainerRect || {},
+      _ref4$height = _ref4.height,
+      menuPreviewContainerHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+
+  var menuPreviewStyle = {
+    transform: menuY.to(function (y) {
+      return "translateY(".concat(y * menuPreviewContainerHeight, "px)");
+    })
+  };
+  var menuDragBind = react.useDrag(function (_ref5) {
+    var _ref5$movement = _slicedToArray__default["default"](_ref5.movement, 2),
+        my = _ref5$movement[1],
+        first = _ref5.first,
+        last = _ref5.last,
+        _ref5$direction = _slicedToArray__default["default"](_ref5.direction, 2),
+        dy = _ref5$direction[1],
+        cancel = _ref5.cancel,
+        canceled = _ref5.canceled,
+        tap = _ref5.tap;
+
+    if (canceled || tap) {
+      return;
+    }
+
+    var isMenuOpened = refOpened.current;
+
+    if (first) {
+      if (isMenuOpened) {
+        cancel();
+        return;
+      }
+    }
+
+    var yProgress = Math.max(0, Math.min(1, my / menuPreviewContainerHeight + (isMenuOpened ? 1 : 0)));
+
+    if (last) {
+      var menuNowOpened = dy > 0 && yProgress > 0.1;
+      refOpened.current = menuNowOpened;
+      setMenuSpring.start({
+        y: menuNowOpened ? 1 : 0
+      });
+
+      if (menuNowOpened && onRequestOpen !== null) {
+        onRequestOpen();
+      } else if (!menuNowOpened && onRequestClose !== null) {
+        onRequestClose();
+      }
+    } else {
+      setMenuSpring.start({
+        y: yProgress
+      });
+    }
+  }, {
+    axis: 'y',
+    filterTaps: true
+  }); // handle preview menu item click
+
+  var onClickMenu = React.useCallback(function (index) {
+    if (customOnClickMenu !== null) {
+      customOnClickMenu(index);
+    }
+
+    trackScreenEvent('viewer_menu', 'click_open', 'Menu icon');
+  }, [customOnClickMenu, trackScreenEvent]);
+  var onClickItem = React.useCallback(function (item) {
+    if (customOnClickItem !== null) {
+      customOnClickItem(item);
+    }
+
+    var index = items.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === screenId;
+    });
+    trackScreenEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1));
+  }, [customOnClickItem, items, screenId, trackScreenEvent]);
+  var onClickClose = React.useCallback(function () {
+    if (onRequestClose !== null) {
+      onRequestClose();
+    }
+
+    trackScreenEvent('viewer_menu', 'click_close', 'Close icon');
+  }, [onRequestClose, trackScreenEvent]); // Handle preview menu share click
+
+  var onClickShare = React.useCallback(function (type) {
+    return trackScreenEvent('viewer_menu', 'click_share', type);
+  }, [trackScreenEvent]);
+
+  var _ref7 = viewerTheme || {},
+      _ref7$menuTheme = _ref7.menuTheme,
+      menuTheme = _ref7$menuTheme === void 0 ? null : _ref7$menuTheme;
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    className: styles$7.menuDotsContainer,
+    ref: refDots,
+    style: {
+      width: menuWidth
+    }
+  }, menuDragBind()), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
+    direction: "horizontal",
+    withShadow: withShadow,
+    items: items,
+    onClickItem: onClickItem,
+    onClickMenu: onClickMenu,
+    closeable: closeable,
+    withItemClick: withDotItemClick,
+    withoutScreensMenu: withoutScreensMenu,
+    onClose: onClickCloseViewer,
+    className: styles$7.menuDots
+  }))), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+    className: styles$7.menuPreviewContainer,
+    style: menuPreviewStyle,
+    ref: menuPreviewContainerRef
+  }, /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
+    viewerTheme: viewerTheme,
+    title: title,
+    shareUrl: shareUrl,
+    className: styles$7.menuPreview,
+    screenSize: screenSize,
+    menuWidth: menuWidth,
+    focusable: opened,
+    items: items,
+    onClickItem: onClickItem,
+    onClose: onClickClose,
+    onShare: onClickShare,
+    toggleFullscreen: toggleFullscreen,
+    fullscreenActive: fullscreenActive,
+    fullscreenEnabled: fullscreenEnabled
+  })));
+};
+
+ViewerMenu.propTypes = propTypes$4;
+ViewerMenu.defaultProps = defaultProps$4;
+
+var styles = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+
+var propTypes$3 = {
+  screen: core$1.PropTypes.screenComponent,
+  renderContext: core$1.PropTypes.renderContext,
+  screenState: PropTypes__default["default"].string,
+  current: PropTypes__default["default"].bool,
+  active: PropTypes__default["default"].bool,
+  onPrevious: PropTypes__default["default"].func,
+  onNext: PropTypes__default["default"].func,
+  onEnableInteraction: PropTypes__default["default"].func,
+  onDisableInteraction: PropTypes__default["default"].func,
+  getMediaRef: PropTypes__default["default"].func
+};
+var defaultProps$3 = {
+  screen: null,
+  renderContext: null,
+  screenState: null,
+  current: false,
+  active: true,
+  onPrevious: null,
+  onNext: null,
+  onEnableInteraction: null,
+  onDisableInteraction: null,
+  getMediaRef: null
+};
+
+var ViewerScreen = function ViewerScreen(_ref) {
+  var _ref2;
+
+  var screen = _ref.screen,
+      renderContext = _ref.renderContext,
+      screenState = _ref.screenState,
+      active = _ref.active,
+      current = _ref.current,
+      onPrevious = _ref.onPrevious,
+      onNext = _ref.onNext,
+      onEnableInteraction = _ref.onEnableInteraction,
+      onDisableInteraction = _ref.onDisableInteraction,
+      getMediaRef = _ref.getMediaRef;
+  return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles.active, active), _defineProperty__default["default"](_ref2, styles.current, current), _ref2)]),
+    "aria-hidden": current ? null : 'true'
+  }, /*#__PURE__*/React__default["default"].createElement(components.Screen, {
+    screen: screen,
+    renderContext: renderContext,
+    screenState: screenState,
+    active: active,
+    current: current,
+    onPrevious: onPrevious,
+    onNext: onNext,
+    onEnableInteraction: onEnableInteraction,
+    onDisableInteraction: onDisableInteraction,
+    getMediaRef: getMediaRef
+  })) : null;
+};
+
+ViewerScreen.propTypes = propTypes$3;
+ViewerScreen.defaultProps = defaultProps$3;
+
+var propTypes$2 = {
+  story: core$1.PropTypes.story,
+  // .isRequired,
+  basePath: PropTypes__default["default"].string,
+  theme: core$1.PropTypes.viewerTheme,
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  screen: PropTypes__default["default"].string,
+  screenState: PropTypes__default["default"].string,
+  deviceScreens: core$1.PropTypes.deviceScreens,
+  renderContext: core$1.PropTypes.renderContext,
+  onScreenChange: PropTypes__default["default"].func,
+  tapNextScreenWidthPercent: PropTypes__default["default"].number,
+  neighborScreensActive: PropTypes__default["default"].number,
+  storyIsParsed: PropTypes__default["default"].bool,
+  landscapeScreenMargin: PropTypes__default["default"].number,
+  withMetadata: PropTypes__default["default"].bool,
+  withoutMenu: PropTypes__default["default"].bool,
+  withoutScreensMenu: PropTypes__default["default"].bool,
+  withoutFullscreen: PropTypes__default["default"].bool,
+  withLandscapeSiblingsScreens: PropTypes__default["default"].bool,
+  closeable: PropTypes__default["default"].bool,
+  onClose: PropTypes__default["default"].func,
+  onInteraction: PropTypes__default["default"].func,
+  onEnd: PropTypes__default["default"].func,
+  onViewModeChange: PropTypes__default["default"].func,
+  currentScreenMedia: core$1.PropTypes.ref,
+  screensMedias: core$1.PropTypes.ref,
+  screenSizeOptions: PropTypes__default["default"].shape({
+    withoutMaxSize: PropTypes__default["default"].bool,
+    desktopHeightRatio: PropTypes__default["default"].number,
+    screenRatio: PropTypes__default["default"].number
+  }),
+  className: PropTypes__default["default"].string
+};
+var defaultProps$2 = {
   story: null,
   theme: null,
   basePath: null,
   width: null,
   height: null,
   screen: null,
+  screenState: null,
   deviceScreens: utils.getDeviceScreens(),
   renderContext: 'view',
   onScreenChange: null,
-  tapNextScreenWidthPercent: 0.5,
+  tapNextScreenWidthPercent: 0.8,
   neighborScreensActive: 2,
   storyIsParsed: false,
-  landscapeScreenMargin: 50,
+  landscapeScreenMargin: 20,
   withMetadata: false,
   withoutMenu: false,
+  withoutScreensMenu: false,
   withoutFullscreen: false,
+  withLandscapeSiblingsScreens: false,
   closeable: false,
   onClose: null,
   onInteraction: null,
@@ -839,7 +1387,7 @@ var defaultProps$2 = {
 };
 
 var Viewer = function Viewer(_ref) {
-  var _ref15;
+  var _ref12;
 
   var story = _ref.story,
       basePath = _ref.basePath,
@@ -847,6 +1395,7 @@ var Viewer = function Viewer(_ref) {
       width = _ref.width,
       height = _ref.height,
       screenId = _ref.screen,
+      screenState = _ref.screenState,
       deviceScreens = _ref.deviceScreens,
       renderContext = _ref.renderContext,
       onScreenChange = _ref.onScreenChange,
@@ -855,10 +1404,12 @@ var Viewer = function Viewer(_ref) {
       storyIsParsed = _ref.storyIsParsed,
       landscapeScreenMargin = _ref.landscapeScreenMargin,
       withMetadata = _ref.withMetadata,
-      withoutMenu = _ref.withoutMenu;
+      withoutMenu = _ref.withoutMenu,
+      withoutScreensMenu = _ref.withoutScreensMenu;
       _ref.withoutFullscreen;
-      var closeable = _ref.closeable,
-      onClose = _ref.onClose,
+      var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
+      closeable = _ref.closeable,
+      onCloseViewer = _ref.onClose,
       onInteraction = _ref.onInteraction,
       onEnd = _ref.onEnd,
       onViewModeChange = _ref.onViewModeChange,
@@ -877,7 +1428,10 @@ var Viewer = function Viewer(_ref) {
       _parsedStory$metadata = parsedStory.metadata,
       metadata = _parsedStory$metadata === void 0 ? null : _parsedStory$metadata,
       _parsedStory$fonts = parsedStory.fonts,
-      fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts; // Viewer Theme
+      fonts = _parsedStory$fonts === void 0 ? null : _parsedStory$fonts;
+  var eventsManager = React.useMemo(function () {
+    return new EventEmitter__default["default"]();
+  }, [parsedStory]); // Viewer Theme
 
   var _ref2 = viewerTheme || {},
       textStyles = _ref2.textStyles;
@@ -901,17 +1455,11 @@ var Viewer = function Viewer(_ref) {
       _useLoadedFonts.loaded; // eslint-disable-line
 
 
-  var shareUrl = React.useMemo(function () {
-    var origin = typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '';
-    var path = basePath !== null ? "".concat(origin).concat(basePath) : origin;
-    return path;
-  }, [basePath]);
   var isView = renderContext === 'view';
   var isStatic = renderContext === 'static';
   var isCapture = renderContext === 'capture';
   var withoutScreensTransforms = isStatic || isCapture;
   var trackScreenView = hooks.useTrackScreenView();
-  var trackEvent = hooks.useTrackEvent();
   var contentRef = React.useRef(null); // Get screen size
 
   var _useScreenSizeFromEle = hooks.useScreenSizeFromElement(_objectSpread__default["default"]({
@@ -941,30 +1489,12 @@ var Viewer = function Viewer(_ref) {
         landscape: landscape
       });
     }
-  }, [ready, landscape, onViewModeChange]); // Get dots menu height
-
-  var _useResizeObserver = hooks.useResizeObserver(),
-      menuDotsContainerRef = _useResizeObserver.ref,
-      menuDotsContainerRect = _useResizeObserver.entry.contentRect;
-
-  var _ref6 = menuDotsContainerRect || {},
-      _ref6$height = _ref6.height,
-      menuDotsContainerHeight = _ref6$height === void 0 ? 0 : _ref6$height; // Get preview menu height
-
-
-  var _useResizeObserver2 = hooks.useResizeObserver(),
-      menuPreviewContainerRef = _useResizeObserver2.ref,
-      menuPreviewContainerRect = _useResizeObserver2.entry.contentRect;
-
-  var _ref7 = menuPreviewContainerRect || {},
-      _ref7$height = _ref7.height,
-      menuPreviewContainerHeight = _ref7$height === void 0 ? 0 : _ref7$height;
-
+  }, [ready, landscape, onViewModeChange]);
   var screensMediasRef = React.useRef([]); // Screen index
 
   var screenIndex = React.useMemo(function () {
     return Math.max(0, screens.findIndex(function (it) {
-      return String(it.id) === String(screenId);
+      return "".concat(it.id) === "".concat(screenId);
     }));
   }, [screenId, screens]);
 
@@ -991,13 +1521,7 @@ var Viewer = function Viewer(_ref) {
   }, [screenIndex, screens, onScreenChange]); // Track screen view
 
   var trackingEnabled = isView;
-  var validIndex = screens.length > 0 && screenIndex < screens.length;
-  var currentScreen = validIndex ? screens[screenIndex] : null;
-
-  var _ref8 = currentScreen || {},
-      _ref8$type = _ref8.type,
-      screenType = _ref8$type === void 0 ? null : _ref8$type;
-
+  var currentScreen = screens[screenIndex] || null;
   React.useEffect(function () {
     if (trackingEnabled && currentScreen !== null) {
       trackScreenView(currentScreen, screenIndex);
@@ -1014,247 +1538,60 @@ var Viewer = function Viewer(_ref) {
     currentScreenRef.current.focus();
   }, [changeIndex]);
   var screensCount = screens.length;
-
-  var _useState = React.useState(screens.map(function () {
-    return true;
-  })),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      screensInteractionEnabled = _useState2[0],
-      setScreensInteractionEnabled = _useState2[1];
-
-  var currentScreenInteractionEnabled = screensInteractionEnabled[screenIndex];
-  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
-  React.useEffect(function () {
-    setScreensInteractionEnabled(_toConsumableArray__default["default"](Array(screensCount).keys()).map(function () {
-      return true;
-    }));
-  }, [screensCount]);
-  var onEnableInteraction = React.useCallback(function () {
-    if (!screensInteractionEnabled[screenIndex]) {
-      var newArray = _toConsumableArray__default["default"](screensInteractionEnabled);
-
-      newArray[screenIndex] = true;
-      setScreensInteractionEnabled(newArray);
-    }
-  }, [screenIndex, screensInteractionEnabled, setScreensInteractionEnabled]);
-  var onDisableInteraction = React.useCallback(function () {
-    if (screensInteractionEnabled[screenIndex]) {
-      var newArray = _toConsumableArray__default["default"](screensInteractionEnabled);
-
-      newArray[screenIndex] = false;
-      setScreensInteractionEnabled(newArray);
-    }
-  }, [screenIndex, screensInteractionEnabled, setScreensInteractionEnabled]); // handle screenClick
-
   var onInteractionPrivate = React.useCallback(function () {
     if (onInteraction !== null) {
       onInteraction();
     }
   }, [onInteraction]);
-  var onScreenClick = React.useCallback(function (e, index) {
-    onInteractionPrivate();
-
-    var checkClickable = function checkClickable(el) {
-      var maxDistance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
-      var distance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-
-      var _ref9 = el || {},
-          _ref9$tagName = _ref9.tagName,
-          tagName = _ref9$tagName === void 0 ? null : _ref9$tagName,
-          _ref9$parentNode = _ref9.parentNode,
-          parentNode = _ref9$parentNode === void 0 ? null : _ref9$parentNode;
-
-      if (tagName === 'BODY') {
-        return false;
-      }
-
-      var tags = ['BUTTON', 'A', 'INPUT', 'TEXTAREA'];
-
-      if (tags.indexOf(tagName) > -1) {
-        return true;
-      }
-
-      if (distance < maxDistance) {
-        return checkClickable(parentNode, maxDistance, distance + 1);
-      }
-
-      return false;
-    };
-
-    var tappedCurrent = screenIndex === index;
-
-    if (!isView && tappedCurrent || checkClickable(e.target)) {
-      return;
-    }
-
-    var it = screens[screenIndex] || null;
-    var interactionEnabled = screensInteractionEnabled[screenIndex];
-
-    if (it === null || tappedCurrent && !interactionEnabled) {
-      return;
-    }
-
-    var nextIndex = screenIndex;
-
-    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
-        _e$currentTarget$getB2 = _e$currentTarget$getB.left,
-        contentX = _e$currentTarget$getB2 === void 0 ? 0 : _e$currentTarget$getB2;
-
-    var tapX = e.clientX;
-    var hasTappedLeft = tappedCurrent ? tapX - contentX < screenWidth * (1 - tapNextScreenWidthPercent) : screenIndex > index;
-
-    if (hasTappedLeft) {
-      nextIndex = landscape ? index : Math.max(0, screenIndex - 1);
-    } else {
-      nextIndex = landscape ? index : Math.min(screens.length - 1, screenIndex + 1);
-      var isLastScreen = screenIndex === screens.length - 1;
 
-      if (isLastScreen && onEnd !== null) {
-        onEnd();
-      }
-    }
-
-    changeIndex(nextIndex);
-  }, [onScreenChange, screenWidth, screens, changeIndex, screenIndex, screensInteractionEnabled, isView, onInteractionPrivate, onEnd]); // swipe menu open
-
-  var menuOpened = React.useRef(false);
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      previewMenuOpen = _useState4[0],
-      setPreviewMenuOpen = _useState4[1];
-
-  var _useSpring = core$1.useSpring(function () {
-    return {
-      y: 0,
-      config: _objectSpread__default["default"](_objectSpread__default["default"]({}, core$1.config.stiff), {}, {
-        clamp: true
-      })
-    };
+  var _useScreenInteraction = useScreenInteraction({
+    screens: screens,
+    screenId: screenId,
+    screenWidth: screenWidth,
+    isView: isView,
+    clickOnSiblings: landscape && withLandscapeSiblingsScreens,
+    nextScreenWidthPercent: tapNextScreenWidthPercent,
+    events: eventsManager,
+    onClick: onInteractionPrivate,
+    onEnd: onEnd,
+    onChangeScreen: changeIndex
   }),
-      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
-      menuY = _useSpring2[0].y,
-      setMenuSpring = _useSpring2[1];
-
-  var menuPreviewStyle = {
-    transform: menuY.to(function (y) {
-      return "translateY(".concat(y * menuPreviewContainerHeight, "px)");
-    })
-  };
-  var menuDragBind = react.useDrag(function (_ref10) {
-    var _ref10$movement = _slicedToArray__default["default"](_ref10.movement, 2),
-        my = _ref10$movement[1],
-        first = _ref10.first,
-        last = _ref10.last,
-        _ref10$direction = _slicedToArray__default["default"](_ref10.direction, 2),
-        dy = _ref10$direction[1],
-        cancel = _ref10.cancel,
-        canceled = _ref10.canceled,
-        tap = _ref10.tap;
-
-    if (canceled || tap) {
-      return;
-    }
-
-    var isMenuOpened = menuOpened.current;
-
-    if (first) {
-      if (isMenuOpened) {
-        cancel();
-        return;
-      }
-    }
+      onScreenClick = _useScreenInteraction.onClick,
+      currentScreenInteractionEnabled = _useScreenInteraction.currentScreenInteractionEnabled,
+      enableInteraction = _useScreenInteraction.enableInteraction,
+      disableInteraction = _useScreenInteraction.disableInteraction; // swipe menu open
 
-    var yProgress = Math.max(0, Math.min(1, my / menuPreviewContainerHeight + (isMenuOpened ? 1 : 0)));
 
-    if (last) {
-      var menuNowOpened = dy > 0 && yProgress > 0.1;
-      menuOpened.current = menuNowOpened;
-      setMenuSpring.start({
-        y: menuNowOpened ? 1 : 0
-      });
-      setPreviewMenuOpen(menuNowOpened);
-    } else {
-      setMenuSpring.start({
-        y: yProgress
-      });
-    }
-  }, {
-    axis: 'y',
-    filterTaps: true
-  });
-
-  var setPreviewMenu = function setPreviewMenu(opened) {
-    setMenuSpring.start({
-      y: opened ? 1 : 0
-    });
-    menuOpened.current = opened;
-    setPreviewMenuOpen(opened);
-  };
-
-  var openPreviewMenu = React.useCallback(function () {
-    setPreviewMenu(true);
-  }, [setMenuSpring, setPreviewMenuOpen]);
-  var closePreviewMenu = React.useCallback(function () {
-    setPreviewMenu(false);
-  }, [setMenuSpring, setPreviewMenuOpen]); // Handle dot menu item click
+  var menuVisible = screensCount === 0 || currentScreenInteractionEnabled;
 
-  var onClickDotsMenuItem = React.useCallback(function (index) {
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      menuOpened = _useState2[0],
+      setMenuOpened = _useState2[1];
+
+  var onMenuRequestOpen = React.useCallback(function () {
+    return setMenuOpened(true);
+  }, [setMenuOpened]);
+  var onMenuRequestClose = React.useCallback(function () {
+    return setMenuOpened(false);
+  }, [setMenuOpened]);
+  var onClickMenu = React.useCallback(function () {
     onInteractionPrivate();
-    var clickedOnDot = index !== null;
-    var goToScreen = landscape && clickedOnDot;
-
-    if (goToScreen) {
-      changeIndex(index);
-    } else {
-      openPreviewMenu();
-    }
-
-    if (trackingEnabled) {
-      var trackAction = goToScreen ? 'click_screen_change' : 'click_open';
-      var trackLabel = clickedOnDot ? "Screen ".concat(index + 1) : 'Menu icon';
-      trackEvent('viewer_menu', trackAction, trackLabel, {
-        screenId: screenId,
-        screenType: screenType,
-        screenIndex: index
-      });
-    }
-  }, [changeIndex, landscape, trackingEnabled, trackEvent, screenType, onInteractionPrivate]); // handle preview menu item click
-
-  var onClickPreviewMenuItem = React.useCallback(function (index) {
+    setMenuOpened(true);
+  }, [changeIndex, onInteractionPrivate, setMenuOpened]);
+  var onClickMenuItem = React.useCallback(function (_ref6) {
+    var itemScreenId = _ref6.screenId;
+    onInteractionPrivate();
+    var index = screens.findIndex(function (_ref7) {
+      var id = _ref7.id;
+      return id === itemScreenId;
+    });
     changeIndex(index);
-    closePreviewMenu();
-
-    if (trackingEnabled) {
-      trackEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1), {
-        screenId: screenId,
-        screenType: screenType,
-        screenIndex: index
-      });
-    }
-  }, [changeIndex, trackingEnabled, trackEvent, screenId, screenType]); // Handle preview menu close click
 
-  var onClickPreviewMenuClose = React.useCallback(function () {
-    closePreviewMenu();
-
-    if (trackingEnabled) {
-      trackEvent('viewer_menu', 'click_close', 'Close icon', {
-        screenId: screenId,
-        screenIndex: screenIndex,
-        screenType: screenType
-      });
-    }
-  }, [closePreviewMenu, trackingEnabled, trackEvent, screenId, screenIndex, screenType]); // Handle preview menu share click
-
-  var onClickShare = React.useCallback(function (type) {
-    if (trackingEnabled) {
-      trackEvent('viewer_menu', 'click_share', type, {
-        screenId: screenId,
-        screenIndex: screenIndex,
-        screenType: screenType
-      });
+    if (menuOpened) {
+      setMenuOpened(false);
     }
-  }, [trackingEnabled, trackEvent, screenId, screenIndex, screenType]);
+  }, [onInteractionPrivate, changeIndex, menuOpened, setMenuOpened]);
   var onContextMenu = React.useCallback(function (e) {
     if (!landscape) {
       e.preventDefault();
@@ -1273,62 +1610,43 @@ var Viewer = function Viewer(_ref) {
       fullscreenEnabled = _useFullscreen.enabled; // Keyboard Events
 
 
-  React.useEffect(function () {
-    var onKey = function onKey(e) {
-      if (['input', 'textarea'].reduce(function (foundMatch, match) {
-        return foundMatch || e.target.matches(match);
-      }, false)) {
-        return;
-      }
-
-      var key = e.key;
-      var lowercaseKey = key.toLowerCase();
-
-      switch (lowercaseKey) {
-        case 'f':
-          toggleFullscreen();
-          break;
-
-        case 'm':
-          setPreviewMenu(!menuOpened.current);
-          break;
-
-        case 'escape':
-          closePreviewMenu();
-          break;
-
-        case 'arrowleft':
-          gotoPreviousScreen();
-          break;
-
-        case 'arrowright':
-        case ' ':
-          // spacebar
-          gotoNextScreen();
-          break;
+  var keyboardShortcuts = React.useMemo(function () {
+    return {
+      f: function f() {
+        return toggleFullscreen();
+      },
+      m: function m() {
+        return setMenuOpened(!menuOpened);
+      },
+      escape: function escape() {
+        return setMenuOpened(false);
+      },
+      arrowleft: function arrowleft() {
+        return gotoPreviousScreen();
+      },
+      arrowright: function arrowright() {
+        return gotoNextScreen();
+      },
+      ' ': function _() {
+        return gotoNextScreen();
       }
     };
+  }, [menuOpened, setMenuOpened, gotoPreviousScreen, gotoNextScreen]);
+  useKeyboardShortcuts(keyboardShortcuts, {
+    disabled: renderContext !== 'view'
+  });
 
-    if (renderContext === 'view') {
-      window.addEventListener('keydown', onKey);
-    }
-
-    return function () {
-      window.removeEventListener('keydown', onKey);
-    };
-  }, [renderContext, closePreviewMenu, gotoPreviousScreen, gotoNextScreen]);
-
-  var _ref11 = currentScreen || {},
-      screenParameters = _ref11.parameters;
+  var _ref8 = currentScreen || {},
+      screenParameters = _ref8.parameters;
 
-  var _ref12 = screenParameters || {},
-      screenMetadata = _ref12.metadata;
+  var _ref9 = screenParameters || {},
+      screenMetadata = _ref9.metadata;
 
-  var _ref13 = screenMetadata || {},
-      _ref13$title = _ref13.title,
-      screenTitle = _ref13$title === void 0 ? null : _ref13$title,
-      _ref13$description = _ref13.description,
-      screenDescription = _ref13$description === void 0 ? null : _ref13$description;
+  var _ref10 = screenMetadata || {},
+      _ref10$title = _ref10.title,
+      screenTitle = _ref10$title === void 0 ? null : _ref10$title,
+      _ref10$description = _ref10.description,
+      screenDescription = _ref10$description === void 0 ? null : _ref10$description;
 
   var finalTitle = screenTitle !== null ? screenTitle : title;
   var finalMetadata = React.useMemo(function () {
@@ -1337,84 +1655,88 @@ var Viewer = function Viewer(_ref) {
     }) : metadata;
   }, [metadata]);
 
-  var _ref14 = viewerTheme || {},
-      _ref14$menuTheme = _ref14.menuTheme,
-      menuTheme = _ref14$menuTheme === void 0 ? null : _ref14$menuTheme;
+  var _useResizeObserver = hooks.useResizeObserver(),
+      menuDotsContainerRef = _useResizeObserver.ref,
+      menuDotsContainerRect = _useResizeObserver.entry.contentRect;
+
+  var _ref11 = menuDotsContainerRect || {},
+      _ref11$height = _ref11.height,
+      menuDotsContainerHeight = _ref11$height === void 0 ? 0 : _ref11$height;
 
   return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
+    events: eventsManager,
     menuVisible: menuVisible,
     menuSize: menuDotsContainerHeight,
     gotoPreviousScreen: gotoPreviousScreen,
-    gotoNextScreen: gotoNextScreen
+    gotoNextScreen: gotoNextScreen,
+    disableInteraction: disableInteraction,
+    enableInteraction: enableInteraction
   }, withMetadata ? /*#__PURE__*/React__default["default"].createElement(components.Meta, {
     title: finalTitle,
     metadata: finalMetadata
   }, overscrollStyle) : /*#__PURE__*/React__default["default"].createElement(reactHelmet.Helmet, null, overscrollStyle), /*#__PURE__*/React__default["default"].createElement(components.FontFaces, {
     fonts: finalFonts
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$6.container, screenSize.screens.map(function (screenName) {
+    className: classNames__default["default"]([styles$7.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref15 = {}, _defineProperty__default["default"](_ref15, styles$6.landscape, landscape), _defineProperty__default["default"](_ref15, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref15, className, className), _ref15)]),
+    }), (_ref12 = {}, _defineProperty__default["default"](_ref12, styles$7.landscape, landscape), _defineProperty__default["default"](_ref12, styles$7.withSibblings, withLandscapeSiblingsScreens), _defineProperty__default["default"](_ref12, styles$7.hideMenu, !menuVisible), _defineProperty__default["default"](_ref12, styles$7.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref12, className, className), _ref12)]),
     ref: containerRef,
     onContextMenu: onContextMenu
-  }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: styles$6.menuDotsContainer,
-    ref: menuDotsContainerRef,
-    style: {
-      width: screenWidth
-    }
-  }, menuDragBind()), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
-    direction: "horizontal",
+  }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(ViewerMenu, {
+    story: parsedStory,
+    currentScreenIndex: screenIndex,
+    opened: menuOpened,
     withShadow: menuOverScreen,
-    items: screens,
-    current: screenIndex,
-    onClickItem: onClickDotsMenuItem,
-    closeable: closeable,
-    onClose: onClose,
-    className: styles$6.menuDots
-  }))), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
-    className: styles$6.menuPreviewContainer,
-    style: menuPreviewStyle,
-    ref: menuPreviewContainerRef
-  }, /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
-    viewerTheme: viewerTheme,
-    title: title,
-    shareUrl: shareUrl,
-    className: styles$6.menuPreview,
-    screenWidth: screenWidth,
-    focusable: previewMenuOpen,
-    items: screens,
-    current: screenIndex,
-    onClickItem: onClickPreviewMenuItem,
-    onClose: onClickPreviewMenuClose,
-    onShare: onClickShare,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
-    fullscreenEnabled: fullscreenEnabled
-  }))) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", {
+    fullscreenEnabled: fullscreenEnabled,
+    closeable: closeable,
+    shareBasePath: basePath,
+    screenSize: screenSize,
+    menuWidth: screenWidth,
+    trackingEnabled: trackingEnabled,
+    onClickItem: onClickMenuItem,
+    onClickMenu: onClickMenu,
+    onClickCloseViewer: onCloseViewer,
+    onRequestOpen: onMenuRequestOpen,
+    onRequestClose: onMenuRequestClose,
+    withDotItemClick: screenWidth > 400,
+    withoutScreensMenu: withoutScreensMenu,
+    refDots: menuDotsContainerRef
+  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: contentRef,
-    className: styles$6.content
+    className: styles$7.content
   }, screens.map(function (scr, i) {
+    var _ref13;
+
     var current = i === screenIndex;
     var active = i > screenIndex - neighborScreensActive && i < screenIndex + neighborScreensActive;
     var viewerScreen = /*#__PURE__*/React__default["default"].createElement(ViewerScreen, {
       screen: scr,
+      screenState: current ? screenState : null,
       renderContext: renderContext,
       index: i,
       current: current,
       active: active,
       onPrevious: gotoPreviousScreen,
       onNext: gotoNextScreen,
-      onEnableInteraction: onEnableInteraction,
-      onDisableInteraction: onDisableInteraction,
+      onEnableInteraction: enableInteraction,
+      onDisableInteraction: disableInteraction,
       getMediaRef: function getMediaRef(mediaRef) {
         screensMediasRef.current[i] = mediaRef;
       }
     });
     var key = "screen-viewer-".concat(scr.id || '', "-").concat(i + 1);
-    var screenTransform = landscape ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : "translateX(".concat(current ? 0 : '100%', ")");
+    var screenTransform = null;
+
+    if (landscape) {
+      screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
+    } else {
+      screenTransform = "translateX(".concat(current ? 0 : '100%', ")");
+    }
+
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
     }, current && screenIndex > 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
@@ -1435,7 +1757,7 @@ var Viewer = function Viewer(_ref) {
         height: landscape ? screenHeight : null,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
-      className: classNames__default["default"]([styles$6.screen, _defineProperty__default["default"]({}, styles$6.current, current)]),
+      className: classNames__default["default"]([styles$7.screen, (_ref13 = {}, _defineProperty__default["default"](_ref13, styles$7.current, current), _defineProperty__default["default"](_ref13, styles$7.visible, current || withLandscapeSiblingsScreens), _ref13)]),
       tabIndex: active ? '0' : '-1'
       /* eslint-disable-line */
       ,
@@ -1527,23 +1849,17 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
 ViewerRoutes.propTypes = propTypes$1;
 ViewerRoutes.defaultProps = defaultProps$1;
 
-var home = "/";
-var screen = "/:screen";
-var defaultRoutes = {
-  home: home,
-  screen: screen
-};
-
-var _excluded = ["story", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "trackingVariables", "locale", "locales", "translations"];
+var _excluded = ["story", "screenComponents", "memoryRouter", "basePath", "routes", "withoutRouter", "googleApiKey", "trackingVariables", "locale", "locales", "translations"];
 var propTypes = {
-  story: core.PropTypes.story,
+  story: core$1.PropTypes.story,
   screen: PropTypes__default["default"].string,
+  screenComponents: PropTypes__default["default"].objectOf(PropTypes__default["default"].elementType),
   memoryRouter: PropTypes__default["default"].bool,
   basePath: PropTypes__default["default"].string,
   routes: routes,
   withoutRouter: PropTypes__default["default"].bool,
   googleApiKey: PropTypes__default["default"].string,
-  trackingVariables: core.PropTypes.trackingVariables,
+  trackingVariables: core$1.PropTypes.trackingVariables,
   locale: PropTypes__default["default"].string,
   locales: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
   translations: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
@@ -1552,6 +1868,7 @@ var propTypes = {
 var defaultProps = {
   story: null,
   screen: null,
+  screenComponents: null,
   memoryRouter: false,
   basePath: null,
   routes: defaultRoutes,
@@ -1566,6 +1883,7 @@ var defaultProps = {
 
 var ViewerContainer = function ViewerContainer(_ref) {
   var story = _ref.story,
+      screenComponents = _ref.screenComponents,
       memoryRouter = _ref.memoryRouter,
       basePath = _ref.basePath,
       routes = _ref.routes,
@@ -1616,7 +1934,10 @@ var ViewerContainer = function ViewerContainer(_ref) {
     locale: finalLocale
   }, /*#__PURE__*/React__default["default"].createElement(contexts.FieldsProvider, {
     manager: fieldsManager__default["default"]
-  }, /*#__PURE__*/React__default["default"].createElement(screens.ScreensProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.UserInteractionProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.TrackingProvider, {
+  }, /*#__PURE__*/React__default["default"].createElement(screens.ScreensProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsProvider, {
+    namespace: contexts.SCREENS_NAMESPACE,
+    components: screenComponents || {}
+  }, /*#__PURE__*/React__default["default"].createElement(contexts.UserInteractionProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.TrackingProvider, {
     variables: finalTrackingVariables
   }, withoutRouter ? /*#__PURE__*/React__default["default"].createElement(Viewer, Object.assign({
     story: story,
@@ -1624,7 +1945,7 @@ var ViewerContainer = function ViewerContainer(_ref) {
   }, otherProps)) : /*#__PURE__*/React__default["default"].createElement(ViewerRoutes, Object.assign({
     story: story,
     basePath: basePath
-  }, otherProps)))))))));
+  }, otherProps))))))))));
   return withoutRouter ? content : /*#__PURE__*/React__default["default"].createElement(Router, {
     basename: !memoryRouter ? basePath : null
   }, /*#__PURE__*/React__default["default"].createElement(contexts.RoutesProvider, {