@micromag/viewer 0.2.333 → 0.2.338

package/lib/index.js

@@ -18,7 +18,6 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var reactHelmet = require('react-helmet');
 var classNames = require('classnames');
-var reactIntl = require('react-intl');
 var reactUseGesture = require('react-use-gesture');
 var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
@@ -183,16 +182,12 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       closeable = _ref.closeable,
       onClose = _ref.onClose,
       className = _ref.className;
-  var intl = reactIntl.useIntl();
   return /*#__PURE__*/React__default['default'].createElement("nav", {
-    className: classNames__default['default']([styles$4.container, (_ref2 = {}, _defineProperty__default['default'](_ref2, className, className !== null), _defineProperty__default['default'](_ref2, styles$4.vertical, direction === 'vertical'), _defineProperty__default['default'](_ref2, styles$4.withShadow, withShadow), _ref2)]),
-    "aria-label": intl.formatMessage({
-      "id": "wCsW9o",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Screen shortcuts list"
-      }]
-    })
+    className: classNames__default['default']([styles$4.container, (_ref2 = {}, _defineProperty__default['default'](_ref2, className, className !== null), _defineProperty__default['default'](_ref2, styles$4.vertical, direction === 'vertical'), _defineProperty__default['default'](_ref2, styles$4.withShadow, withShadow), _ref2)]) // aria-label={intl.formatMessage({
+    //     defaultMessage: 'Screen shortcuts list',
+    //     description: 'Nav label',
+    // })}
+
   }, /*#__PURE__*/React__default['default'].createElement("ul", {
     className: styles$4.items
   }, items.map(function (item, index) {
@@ -206,19 +201,14 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         if (onClickItem !== null) {
           onClickItem(index);
         }
-      },
-      "aria-label": intl.formatMessage({
-        "id": "LkVfwW",
-        "defaultMessage": [{
-          "type": 0,
-          "value": "Screen "
-        }, {
-          "type": 1,
-          "value": "index"
-        }]
-      }, {
-        index: index + 1
-      })
+      } // aria-label={intl.formatMessage(
+      //     {
+      //         defaultMessage: 'Screen {index}',
+      //         description: 'Button label',
+      //     },
+      //     { index: index + 1 },
+      // )}
+
     }, /*#__PURE__*/React__default['default'].createElement("span", {
       className: styles$4.dot,
       style: {
@@ -232,20 +222,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     color: colorAccent
   }), /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
-    title: intl.formatMessage({
-      "id": "F/gl4b",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Menu"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      "id": "F/gl4b",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Menu"
-      }]
-    }),
+    "aria-label": "Menu" // title={intl.formatMessage({
+    //     defaultMessage: 'Menu',
+    //     description: 'Button label',
+    // })}
+    // aria-label={intl.formatMessage({
+    //     defaultMessage: 'Menu',
+    //     description: 'Button label',
+    // })}
+    ,
     className: styles$4.menuButton,
     onClick: function onClick() {
       if (onClickItem !== null) {
@@ -261,20 +246,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     type: "button",
     className: styles$4.closeButton,
     onClick: onClose,
-    title: intl.formatMessage({
-      "id": "dj/p/q",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      "id": "dj/p/q",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Close"
-      }]
-    })
+    "aria-label": "Close" // title={intl.formatMessage({
+    //     defaultMessage: 'Close',
+    //     description: 'Button label',
+    // })}
+    // aria-label={intl.formatMessage({
+    //     defaultMessage: 'Close',
+    //     description: 'Button label',
+    // })}
+
   }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faTimes
   }))) : null));
@@ -409,7 +389,6 @@ var ShareButton = function ShareButton(_ref) {
       onShare = _ref.onShare,
       children = _ref.children,
       focusable = _ref.focusable;
-  var intl = reactIntl.useIntl();
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -435,21 +414,15 @@ var ShareButton = function ShareButton(_ref) {
     className: classNames__default['default']([styles$2.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,
-    title: intl.formatMessage({
-      "id": "7tw6U2",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Share"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      "id": "7tw6U2",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Share"
-      }]
-    }),
+    onClick: onShareIconClick // title={intl.formatMessage({
+    //     defaultMessage: 'Share',
+    //     description: 'Button label',
+    // })}
+    // aria-label={intl.formatMessage({
+    //     defaultMessage: 'Share',
+    //     description: 'Button label',
+    // })}
+    ,
     focusable: focusable
   }, children), /*#__PURE__*/React__default['default'].createElement(ShareModal, {
     className: styles$2.shareModal,
@@ -464,7 +437,7 @@ var ShareButton = function ShareButton(_ref) {
 ShareButton.propTypes = propTypes$4;
 ShareButton.defaultProps = defaultProps$4;
 
-var styles$1 = {"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","disabled":"micromag-viewer-menus-menu-preview-disabled","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","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$1 = {"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 propTypes$3 = {
   viewerTheme: core.PropTypes.viewerTheme,
@@ -517,7 +490,6 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       fullscreenActive = _ref.fullscreenActive,
       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;
@@ -640,42 +612,30 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     icon: freeSolidSvgIcons.faShare
   })), fullscreenEnabled ? /*#__PURE__*/React__default['default'].createElement(components.Button, {
     className: styles$1.button,
-    onClick: toggleFullscreen,
-    title: intl.formatMessage({
-      "id": "AuxqcG",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Fullscreen"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      "id": "AuxqcG",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Fullscreen"
-      }]
-    }),
+    onClick: toggleFullscreen // title={intl.formatMessage({
+    //     defaultMessage: 'Fullscreen',
+    //     description: 'Button label',
+    // })}
+    // aria-label={intl.formatMessage({
+    //     defaultMessage: 'Fullscreen',
+    //     description: 'Button label',
+    // })}
+    ,
     focusable: focusable
   }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$1.icon,
     icon: fullscreenActive ? freeSolidSvgIcons.faCompress : freeSolidSvgIcons.faExpand
   })) : null, /*#__PURE__*/React__default['default'].createElement(components.Button, {
     className: styles$1.button,
-    onClick: onClose,
-    title: intl.formatMessage({
-      "id": "dj/p/q",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    "aria-label": intl.formatMessage({
-      "id": "dj/p/q",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
+    onClick: onClose // title={intl.formatMessage({
+    //     defaultMessage: 'Close',
+    //     description: 'Button label',
+    // })}
+    // aria-label={intl.formatMessage({
+    //     defaultMessage: 'Close',
+    //     description: 'Button label',
+    // })}
+    ,
     focusable: focusable
   }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$1.icon,
@@ -691,26 +651,21 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("ul", {
     className: styles$1.items
   }, items.map(function (item, index) {
-    var screenIndexLabel = intl.formatMessage({
-      "id": "LkVfwW",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Screen "
-      }, {
-        "type": 1,
-        "value": "index"
-      }]
-    }, {
-      index: index + 1
-    });
-    var isCurrentScreenLabel = current === index ? " ".concat(intl.formatMessage({
-      "id": "vmrJ8U",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "(current screen)"
-      }]
-    })) : '';
-    var screenAriaLabel = screenIndexLabel + isCurrentScreenLabel;
+    // const screenIndexLabel = intl.formatMessage(
+    //     {
+    //         defaultMessage: 'Screen {index}',
+    //         description: 'Button label',
+    //     },
+    //     { index: index + 1 },
+    // );
+    // const isCurrentScreenLabel =
+    //     current === index
+    //         ? ` ${intl.formatMessage({
+    //               defaultMessage: '(current screen)',
+    //               description: 'Button label',
+    //           })}`
+    //         : '';
+    // const screenAriaLabel = screenIndexLabel + isCurrentScreenLabel;
     return /*#__PURE__*/React__default['default'].createElement("li", {
       className: classNames__default['default']([styles$1.item, _defineProperty__default['default']({}, styles$1.active, current === index)]),
       key: "item-".concat(index),
@@ -744,8 +699,13 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       className: styles$1.screenButton,
       onClick: function onClick() {
         onClickItem(index);
+      } // aria-label={screenAriaLabel}
+      ,
+      onKeyUp: function onKeyUp(e) {
+        if (e.key === 'Enter') {
+          onClickItem(index);
+        }
       },
-      "aria-label": screenAriaLabel,
       tabIndex: focusable ? '0' : '-1'
     }));
   })))))) : null;
@@ -831,6 +791,7 @@ var Viewer = function Viewer(_ref) {
       onEnd = _ref.onEnd,
       onViewModeChange = _ref.onViewModeChange,
       className = _ref.className;
+  // const intl = useIntl();
   var parsedStory = hooks.useParsedStory(story, {
     disabled: storyIsParsed
   }) || {};
@@ -950,11 +911,14 @@ var Viewer = function Viewer(_ref) {
     }
   }, [currentScreen, trackScreenView, trackingEnabled]); // Handle interaction enable
 
+  var currentScreenRef = React.useRef(null);
   var onScreenPrevious = React.useCallback(function () {
     changeIndex(Math.max(0, screenIndex - 1));
+    currentScreenRef.current.focus();
   }, [changeIndex]);
   var onScreenNext = React.useCallback(function () {
     changeIndex(Math.min(screens.length - 1, screenIndex + 1));
+    currentScreenRef.current.focus();
   }, [changeIndex]);
   var screensCount = screens.length;
 
@@ -1124,7 +1088,22 @@ var Viewer = function Viewer(_ref) {
   }, {
     axis: 'y',
     filterTaps: true
-  }); // Handle dot menu item click
+  });
+
+  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 onClickDotsMenuItem = React.useCallback(function (index) {
     onInteractionPrivate();
@@ -1134,11 +1113,7 @@ var Viewer = function Viewer(_ref) {
     if (goToScreen) {
       changeIndex(index);
     } else {
-      setMenuSpring.start({
-        y: menuOpened.current ? 0 : 1
-      });
-      menuOpened.current = !menuOpened.current;
-      setPreviewMenuOpen(menuOpened.current);
+      openPreviewMenu();
     }
 
     if (trackingEnabled) {
@@ -1150,15 +1125,11 @@ var Viewer = function Viewer(_ref) {
         screenIndex: index
       });
     }
-  }, [changeIndex, landscape, trackingEnabled, trackEvent, screenId, screenType, onInteractionPrivate]); // handle preview menu item click
+  }, [changeIndex, landscape, trackingEnabled, trackEvent, screenType, onInteractionPrivate]); // handle preview menu item click
 
   var onClickPreviewMenuItem = React.useCallback(function (index) {
     changeIndex(index);
-    setMenuSpring.start({
-      y: 0
-    });
-    menuOpened.current = false;
-    setPreviewMenuOpen(false);
+    closePreviewMenu();
 
     if (trackingEnabled) {
       trackEvent('viewer_menu', 'click_screen_change', "Screen ".concat(index + 1), {
@@ -1169,15 +1140,6 @@ var Viewer = function Viewer(_ref) {
     }
   }, [changeIndex, trackingEnabled, trackEvent, screenId, screenType]); // Handle preview menu close click
 
-  var closePreviewMenu = React.useCallback(function () {
-    if (menuOpened.current) {
-      setMenuSpring.start({
-        y: 0
-      });
-      menuOpened.current = false;
-      setPreviewMenuOpen(false);
-    }
-  }, [setMenuSpring, setPreviewMenuOpen]);
   var onClickPreviewMenuClose = React.useCallback(function () {
     closePreviewMenu();
 
@@ -1230,32 +1192,43 @@ var Viewer = function Viewer(_ref) {
         return;
       }
 
-      var keyCode = e.keyCode;
+      var code = e.code;
 
-      switch (keyCode) {
-        case 27:
+      switch (code) {
+        case 'KeyF':
+          toggleFullscreen();
+          break;
+
+        case 'KeyM':
+          setPreviewMenu(!menuOpened.current);
+          break;
+
+        case 'Escape':
           closePreviewMenu();
           break;
 
-        case 37:
+        case 'ArrowLeft':
           // left
           onScreenPrevious();
           break;
 
-        case 39: // right
+        case 'ArrowRight': // right
 
-        case 32:
+        case 'Space':
           // spacebar
           onScreenNext();
           break;
       }
     };
 
-    window.addEventListener('keydown', onKey);
+    if (renderContext === 'view') {
+      window.addEventListener('keydown', onKey);
+    }
+
     return function () {
       window.removeEventListener('keydown', onKey);
     };
-  }, [closePreviewMenu, onScreenPrevious, onScreenNext]);
+  }, [renderContext, closePreviewMenu, onScreenPrevious, onScreenNext]);
 
   var _ref11 = currentScreen || {},
       screenParameters = _ref11.parameters;
@@ -1344,7 +1317,13 @@ var Viewer = function Viewer(_ref) {
     });
     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%', ")");
-    return /*#__PURE__*/React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, current && screenIndex > 0 ? /*#__PURE__*/React__default['default'].createElement("button", {
+      type: "button",
+      className: "sr-only",
+      onClick: onScreenPrevious,
+      tabIndex: "-1"
+    }, "Go to previous screen") : null, /*#__PURE__*/React__default['default'].createElement("div", {
+      ref: current ? currentScreenRef : null,
       key: key,
       style: {
         width: landscape ? screenWidth : null,
@@ -1352,30 +1331,31 @@ var Viewer = function Viewer(_ref) {
         transform: !withoutScreensTransforms ? screenTransform : null
       },
       className: classNames__default['default']([styles.screen, _defineProperty__default['default']({}, styles.current, current)]),
+      tabIndex: active ? '0' : '-1'
+      /* eslint-disable-line */
+      ,
+      "aria-hidden": current ? null : 'true' // aria-label={intl.formatMessage(
+      //     {
+      //         defaultMessage: 'Screen {index}',
+      //         description: 'Button label',
+      //     },
+      //     { index: i + 1 },
+      // )}
+      ,
+      onKeyUp: function onKeyUp(e) {
+        if (e.key === 'Enter') {
+          onScreenClick(e, i);
+        }
+      },
       onClick: function onClick(e) {
         onScreenClick(e, i);
       }
-    }, viewerScreen, current && screenIndex > 0 ? /*#__PURE__*/React__default['default'].createElement("button", {
-      type: "button",
-      className: "sr-only",
-      onClick: onScreenPrevious
-    }, /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
-      id: "zYH/31",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to previous screen"
-      }]
-    })) : null, current && screenIndex < screens.length ? /*#__PURE__*/React__default['default'].createElement("button", {
+    }, viewerScreen), current && screenIndex < screens.length ? /*#__PURE__*/React__default['default'].createElement("button", {
       type: "button",
       className: "sr-only",
-      onClick: onScreenNext
-    }, /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
-      id: "v9bqYj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen"
-      }]
-    })) : null);
+      onClick: onScreenNext,
+      tabIndex: "-1"
+    }, "Go to next screen") : null);
   })) : null)));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.2.333",
+    "version": "0.2.338",
     "description": "",
     "keywords": [
         "javascript"
@@ -55,12 +55,12 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.2.330",
-        "@micromag/element-scroll": "^0.2.330",
-        "@micromag/elements": "^0.2.333",
-        "@micromag/fields": "^0.2.330",
-        "@micromag/intl": "^0.2.330",
-        "@micromag/screens": "^0.2.333",
+        "@micromag/core": "^0.2.337",
+        "@micromag/element-scroll": "^0.2.337",
+        "@micromag/elements": "^0.2.337",
+        "@micromag/fields": "^0.2.337",
+        "@micromag/intl": "^0.2.338",
+        "@micromag/screens": "^0.2.337",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "classnames": "^2.2.6",
@@ -76,5 +76,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f4cc0b72ff60c80cd5628963a7e5ad82edf6acba"
+    "gitHead": "9cb8d8f533265c37191a5baa4b20452fc24d8cbf"
 }