@micromag/viewer 0.2.333 → 0.2.338

package/es/index.js

@@ -14,7 +14,6 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { Helmet } from 'react-helmet';
 import classNames from 'classnames';
-import { useIntl, FormattedMessage } from 'react-intl';
 import { useDrag } from 'react-use-gesture';
 import { useSpring, config } from '@react-spring/core';
 import { animated } from '@react-spring/web';
@@ -166,16 +165,12 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       closeable = _ref.closeable,
       onClose = _ref.onClose,
       className = _ref.className;
-  var intl = useIntl();
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$4.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$4.vertical, direction === 'vertical'), _defineProperty(_ref2, styles$4.withShadow, withShadow), _ref2)]),
-    "aria-label": intl.formatMessage({
-      "id": "wCsW9o",
-      "defaultMessage": [{
-        "type": 0,
-        "value": "Screen shortcuts list"
-      }]
-    })
+    className: classNames([styles$4.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$4.vertical, direction === 'vertical'), _defineProperty(_ref2, styles$4.withShadow, withShadow), _ref2)]) // aria-label={intl.formatMessage({
+    //     defaultMessage: 'Screen shortcuts list',
+    //     description: 'Nav label',
+    // })}
+
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles$4.items
   }, items.map(function (item, index) {
@@ -189,19 +184,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.createElement("span", {
       className: styles$4.dot,
       style: {
@@ -215,20 +205,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     color: colorAccent
   }), /*#__PURE__*/React.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) {
@@ -244,20 +229,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.createElement(FontAwesomeIcon, {
     icon: faTimes
   }))) : null));
@@ -392,7 +372,6 @@ var ShareButton = function ShareButton(_ref) {
       onShare = _ref.onShare,
       children = _ref.children,
       focusable = _ref.focusable;
-  var intl = useIntl();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -418,21 +397,15 @@ var ShareButton = function ShareButton(_ref) {
     className: classNames([styles$2.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Button, {
     className: classNames([_defineProperty({}, 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.createElement(ShareModal, {
     className: styles$2.shareModal,
@@ -447,7 +420,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: PropTypes$1.viewerTheme,
@@ -500,7 +473,6 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       fullscreenActive = _ref.fullscreenActive,
       fullscreenEnabled = _ref.fullscreenEnabled,
       className = _ref.className;
-  var intl = useIntl();
   var screenSizeRatio = "".concat(3 / 2 / thumbsPerLine * 100, "%");
   var screenRatioHeight = screenWidth * 3 / 2;
   var hasSize = screenWidth > 0;
@@ -623,42 +595,30 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     icon: faShare
   })), fullscreenEnabled ? /*#__PURE__*/React.createElement(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.createElement(FontAwesomeIcon, {
     className: styles$1.icon,
     icon: fullscreenActive ? faCompress : faExpand
   })) : null, /*#__PURE__*/React.createElement(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.createElement(FontAwesomeIcon, {
     className: styles$1.icon,
@@ -674,26 +634,21 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }, /*#__PURE__*/React.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.createElement("li", {
       className: classNames([styles$1.item, _defineProperty({}, styles$1.active, current === index)]),
       key: "item-".concat(index),
@@ -727,8 +682,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;
@@ -814,6 +774,7 @@ var Viewer = function Viewer(_ref) {
       onEnd = _ref.onEnd,
       onViewModeChange = _ref.onViewModeChange,
       className = _ref.className;
+  // const intl = useIntl();
   var parsedStory = useParsedStory(story, {
     disabled: storyIsParsed
   }) || {};
@@ -933,11 +894,14 @@ var Viewer = function Viewer(_ref) {
     }
   }, [currentScreen, trackScreenView, trackingEnabled]); // Handle interaction enable
 
+  var currentScreenRef = useRef(null);
   var onScreenPrevious = useCallback(function () {
     changeIndex(Math.max(0, screenIndex - 1));
+    currentScreenRef.current.focus();
   }, [changeIndex]);
   var onScreenNext = useCallback(function () {
     changeIndex(Math.min(screens.length - 1, screenIndex + 1));
+    currentScreenRef.current.focus();
   }, [changeIndex]);
   var screensCount = screens.length;
 
@@ -1107,7 +1071,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 = useCallback(function () {
+    setPreviewMenu(true);
+  }, [setMenuSpring, setPreviewMenuOpen]);
+  var closePreviewMenu = useCallback(function () {
+    setPreviewMenu(false);
+  }, [setMenuSpring, setPreviewMenuOpen]); // Handle dot menu item click
 
   var onClickDotsMenuItem = useCallback(function (index) {
     onInteractionPrivate();
@@ -1117,11 +1096,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) {
@@ -1133,15 +1108,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 = 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), {
@@ -1152,15 +1123,6 @@ var Viewer = function Viewer(_ref) {
     }
   }, [changeIndex, trackingEnabled, trackEvent, screenId, screenType]); // Handle preview menu close click
 
-  var closePreviewMenu = useCallback(function () {
-    if (menuOpened.current) {
-      setMenuSpring.start({
-        y: 0
-      });
-      menuOpened.current = false;
-      setPreviewMenuOpen(false);
-    }
-  }, [setMenuSpring, setPreviewMenuOpen]);
   var onClickPreviewMenuClose = useCallback(function () {
     closePreviewMenu();
 
@@ -1213,32 +1175,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;
@@ -1327,7 +1300,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.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, current && screenIndex > 0 ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "sr-only",
+      onClick: onScreenPrevious,
+      tabIndex: "-1"
+    }, "Go to previous screen") : null, /*#__PURE__*/React.createElement("div", {
+      ref: current ? currentScreenRef : null,
       key: key,
       style: {
         width: landscape ? screenWidth : null,
@@ -1335,30 +1314,31 @@ var Viewer = function Viewer(_ref) {
         transform: !withoutScreensTransforms ? screenTransform : null
       },
       className: classNames([styles.screen, _defineProperty({}, 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.createElement("button", {
-      type: "button",
-      className: "sr-only",
-      onClick: onScreenPrevious
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "zYH/31",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to previous screen"
-      }]
-    })) : null, current && screenIndex < screens.length ? /*#__PURE__*/React.createElement("button", {
+    }, viewerScreen), current && screenIndex < screens.length ? /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: "sr-only",
-      onClick: onScreenNext
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "v9bqYj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Go to next screen"
-      }]
-    })) : null);
+      onClick: onScreenNext,
+      tabIndex: "-1"
+    }, "Go to next screen") : null);
   })) : null)));
 };