@micromag/viewer 0.3.490 → 0.3.492

package/es/index.js

@@ -1349,6 +1349,8 @@ var propTypes$9 = {
   menuWidth: PropTypes.number,
   previewHeader: PropTypes.node,
   previewFooter: PropTypes.node,
+  afterShareMenuButton: PropTypes.node,
+  beforeScreensMenuButton: PropTypes.node,
   withDotItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
   withoutShareMenu: PropTypes.bool,
@@ -1375,6 +1377,8 @@ var defaultProps$9 = {
   menuWidth: null,
   previewHeader: null,
   previewFooter: null,
+  afterShareMenuButton: null,
+  beforeScreensMenuButton: null,
   withDotItemClick: false,
   withoutScreensMenu: false,
   withoutShareMenu: false,
@@ -1400,6 +1404,8 @@ var ViewerMenu = function ViewerMenu(_ref) {
     menuWidth = _ref.menuWidth,
     previewHeader = _ref.previewHeader,
     previewFooter = _ref.previewFooter,
+    afterShareMenuButton = _ref.afterShareMenuButton,
+    beforeScreensMenuButton = _ref.beforeScreensMenuButton,
     withDotItemClick = _ref.withDotItemClick,
     withoutScreensMenu = _ref.withoutScreensMenu,
     withoutShareMenu = _ref.withoutShareMenu,
@@ -1660,9 +1666,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, /*#__PURE__*/React.createElement("nav", {
     className: styles$6.menuTopContainer,
     ref: navContainerRef
-  }, !withoutShareMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
+  }, !withoutShareMenu || afterShareMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton$1, {
+  }, bindShareDrag()), !withoutShareMenu ? /*#__PURE__*/React.createElement(ToggleButton$1, {
     className: styles$6.slidingButton,
     button: /*#__PURE__*/React.createElement(ShareButton$1, {
       className: styles$6.menuButton,
@@ -1680,9 +1686,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
       single: true
     }),
     progressSpring: shareOpenedProgress
-  })) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
+  }) : null, afterShareMenuButton) : null, !withoutScreensMenu || beforeScreensMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton$1, {
+  }, bindMenuDrag()), beforeScreensMenuButton, !withoutScreensMenu ? /*#__PURE__*/React.createElement(ToggleButton$1, {
     className: styles$6.slidingButton,
     button: /*#__PURE__*/React.createElement(MenuButton$1, {
       className: styles$6.menuButton,
@@ -1700,7 +1706,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }),
     progressSpring: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
-  })) : null), /*#__PURE__*/React.createElement(MenuDots, Object.assign({}, menuTheme, {
+  }) : null) : null), /*#__PURE__*/React.createElement(MenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     items: items,
     onClickDot: onClickScreen,
@@ -2405,6 +2411,7 @@ function WebViewContainer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     currentUrl = _useState2[0],
     setCurrentUrl = _useState2[1];
+  var iframeRef = useRef(null);
 
   // Handle current webview url
   useEffect(function () {
@@ -2426,6 +2433,7 @@ function WebViewContainer(_ref) {
       if (playing) {
         setPlaying(false);
       }
+      iframeRef.current.focus();
     } else {
       enableInteraction();
       if (wasPlayingRef.current && !playing) {
@@ -2441,7 +2449,9 @@ function WebViewContainer(_ref) {
   }, /*#__PURE__*/React.createElement(WebView, Object.assign({
     url: url || currentUrl
   }, webViewProps, {
-    closeable: true,
+    closeable: opened,
+    focusable: opened,
+    iframeRef: iframeRef,
     className: styles.webView,
     onClose: close
   })));
@@ -2482,6 +2492,8 @@ var propTypes$2 = {
   menuIsScreenWidth: PropTypes.bool,
   menuHeader: PropTypes.node,
   menuFooter: PropTypes.node,
+  afterShareMenuButton: PropTypes.node,
+  beforeScreensMenuButton: PropTypes.node,
   closeable: PropTypes.bool,
   withMetadata: PropTypes.bool,
   withoutGestures: PropTypes.bool,
@@ -2530,6 +2542,8 @@ var defaultProps$2 = {
   menuIsScreenWidth: false,
   menuHeader: null,
   menuFooter: null,
+  afterShareMenuButton: null,
+  beforeScreensMenuButton: null,
   menuDotsButtons: null,
   closeable: false,
   withMetadata: false,
@@ -2575,6 +2589,8 @@ var Viewer = function Viewer(_ref) {
     menuHeader = _ref.menuHeader,
     menuDotsButtons = _ref.menuDotsButtons,
     menuFooter = _ref.menuFooter,
+    afterShareMenuButton = _ref.afterShareMenuButton,
+    beforeScreensMenuButton = _ref.beforeScreensMenuButton,
     closeable = _ref.closeable,
     withMetadata = _ref.withMetadata,
     withoutGestures = _ref.withoutGestures,
@@ -3085,6 +3101,8 @@ var Viewer = function Viewer(_ref) {
     withDotItemClick: screenContainerWidth > 400,
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
+    afterShareMenuButton: afterShareMenuButton,
+    beforeScreensMenuButton: beforeScreensMenuButton,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.content
@@ -3325,11 +3343,14 @@ var ViewerContainer = function ViewerContainer(_ref) {
   var _useMemoryRouter = useMemoryRouter(),
     memoryRouterHook = _useMemoryRouter.hook,
     memoryRouterSearchHook = _useMemoryRouter.searchHook;
-  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, {
-    base: !memoryRouter ? basePath : null,
-    hook: memoryRouter ? memoryRouterHook : null,
-    searchHook: memoryRouter ? memoryRouterSearchHook : null
-  }, /*#__PURE__*/React.createElement(RoutesProvider, {
+  var routerProps = useMemo(function () {
+    return {
+      hook: memoryRouter ? memoryRouterHook : null,
+      searchHook: memoryRouter ? memoryRouterSearchHook : null,
+      base: !memoryRouter ? basePath : null
+    };
+  }, [basePath, memoryRouter]);
+  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, routerProps, /*#__PURE__*/React.createElement(RoutesProvider, {
     routes: routes
   }, content));
 };

package/lib/index.js

@@ -1892,6 +1892,8 @@ var propTypes$9 = {
   menuWidth: PropTypes.number,
   previewHeader: PropTypes.node,
   previewFooter: PropTypes.node,
+  afterShareMenuButton: PropTypes.node,
+  beforeScreensMenuButton: PropTypes.node,
   withDotItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
   withoutShareMenu: PropTypes.bool,
@@ -1918,6 +1920,8 @@ var defaultProps$9 = {
   menuWidth: null,
   previewHeader: null,
   previewFooter: null,
+  afterShareMenuButton: null,
+  beforeScreensMenuButton: null,
   withDotItemClick: false,
   withoutScreensMenu: false,
   withoutShareMenu: false,
@@ -1943,6 +1947,8 @@ var ViewerMenu = function ViewerMenu(_ref) {
     menuWidth = _ref.menuWidth,
     previewHeader = _ref.previewHeader,
     previewFooter = _ref.previewFooter,
+    afterShareMenuButton = _ref.afterShareMenuButton,
+    beforeScreensMenuButton = _ref.beforeScreensMenuButton,
     withDotItemClick = _ref.withDotItemClick,
     withoutScreensMenu = _ref.withoutScreensMenu,
     withoutShareMenu = _ref.withoutShareMenu,
@@ -2203,9 +2209,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
   }, /*#__PURE__*/React.createElement("nav", {
     className: styles$6.menuTopContainer,
     ref: navContainerRef
-  }, !withoutShareMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
+  }, !withoutShareMenu || afterShareMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton$1, {
+  }, bindShareDrag()), !withoutShareMenu ? /*#__PURE__*/React.createElement(ToggleButton$1, {
     className: styles$6.slidingButton,
     button: /*#__PURE__*/React.createElement(ShareButton$1, {
       className: styles$6.menuButton,
@@ -2223,9 +2229,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
       single: true
     }),
     progressSpring: shareOpenedProgress
-  })) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
+  }) : null, afterShareMenuButton) : null, !withoutScreensMenu || beforeScreensMenuButton !== null ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton$1, {
+  }, bindMenuDrag()), beforeScreensMenuButton, !withoutScreensMenu ? /*#__PURE__*/React.createElement(ToggleButton$1, {
     className: styles$6.slidingButton,
     button: /*#__PURE__*/React.createElement(MenuButton$1, {
       className: styles$6.menuButton,
@@ -2243,7 +2249,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }),
     progressSpring: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
-  })) : null), /*#__PURE__*/React.createElement(MenuDots, Object.assign({}, menuTheme, {
+  }) : null) : null), /*#__PURE__*/React.createElement(MenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     items: items,
     onClickDot: onClickScreen,
@@ -2948,6 +2954,7 @@ function WebViewContainer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     currentUrl = _useState2[0],
     setCurrentUrl = _useState2[1];
+  var iframeRef = React.useRef(null);
 
   // Handle current webview url
   React.useEffect(function () {
@@ -2969,6 +2976,7 @@ function WebViewContainer(_ref) {
       if (playing) {
         setPlaying(false);
       }
+      iframeRef.current.focus();
     } else {
       enableInteraction();
       if (wasPlayingRef.current && !playing) {
@@ -2984,7 +2992,9 @@ function WebViewContainer(_ref) {
   }, /*#__PURE__*/React.createElement(WebView, Object.assign({
     url: url || currentUrl
   }, webViewProps, {
-    closeable: true,
+    closeable: opened,
+    focusable: opened,
+    iframeRef: iframeRef,
     className: styles.webView,
     onClose: close
   })));
@@ -3025,6 +3035,8 @@ var propTypes$2 = {
   menuIsScreenWidth: PropTypes.bool,
   menuHeader: PropTypes.node,
   menuFooter: PropTypes.node,
+  afterShareMenuButton: PropTypes.node,
+  beforeScreensMenuButton: PropTypes.node,
   closeable: PropTypes.bool,
   withMetadata: PropTypes.bool,
   withoutGestures: PropTypes.bool,
@@ -3073,6 +3085,8 @@ var defaultProps$2 = {
   menuIsScreenWidth: false,
   menuHeader: null,
   menuFooter: null,
+  afterShareMenuButton: null,
+  beforeScreensMenuButton: null,
   menuDotsButtons: null,
   closeable: false,
   withMetadata: false,
@@ -3118,6 +3132,8 @@ var Viewer = function Viewer(_ref) {
     menuHeader = _ref.menuHeader,
     menuDotsButtons = _ref.menuDotsButtons,
     menuFooter = _ref.menuFooter,
+    afterShareMenuButton = _ref.afterShareMenuButton,
+    beforeScreensMenuButton = _ref.beforeScreensMenuButton,
     closeable = _ref.closeable,
     withMetadata = _ref.withMetadata,
     withoutGestures = _ref.withoutGestures,
@@ -3628,6 +3644,8 @@ var Viewer = function Viewer(_ref) {
     withDotItemClick: screenContainerWidth > 400,
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
+    afterShareMenuButton: afterShareMenuButton,
+    beforeScreensMenuButton: beforeScreensMenuButton,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.content
@@ -3868,11 +3886,14 @@ var ViewerContainer = function ViewerContainer(_ref) {
   var _useMemoryRouter = useMemoryRouter(),
     memoryRouterHook = _useMemoryRouter.hook,
     memoryRouterSearchHook = _useMemoryRouter.searchHook;
-  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, {
-    base: !memoryRouter ? basePath : null,
-    hook: memoryRouter ? memoryRouterHook : null,
-    searchHook: memoryRouter ? memoryRouterSearchHook : null
-  }, /*#__PURE__*/React.createElement(RoutesProvider, {
+  var routerProps = React.useMemo(function () {
+    return {
+      hook: memoryRouter ? memoryRouterHook : null,
+      searchHook: memoryRouter ? memoryRouterSearchHook : null,
+      base: !memoryRouter ? basePath : null
+    };
+  }, [basePath, memoryRouter]);
+  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, routerProps, /*#__PURE__*/React.createElement(RoutesProvider, {
     routes: routes
   }, content));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.490",
+    "version": "0.3.492",
     "private": false,
     "description": "",
     "keywords": [
@@ -65,14 +65,14 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/routes": "^0.2.27",
-        "@micromag/core": "^0.3.488",
-        "@micromag/element-badge": "^0.3.488",
-        "@micromag/element-scroll": "^0.3.488",
-        "@micromag/element-share-options": "^0.3.488",
-        "@micromag/element-webview": "^0.3.488",
-        "@micromag/elements": "^0.3.488",
-        "@micromag/intl": "^0.3.488",
-        "@micromag/screens": "^0.3.490",
+        "@micromag/core": "^0.3.491",
+        "@micromag/element-badge": "^0.3.491",
+        "@micromag/element-scroll": "^0.3.491",
+        "@micromag/element-share-options": "^0.3.491",
+        "@micromag/element-webview": "^0.3.491",
+        "@micromag/elements": "^0.3.491",
+        "@micromag/intl": "^0.3.491",
+        "@micromag/screens": "^0.3.491",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -91,5 +91,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "58cf01e96ff336f5300b697cf83e220cb4f4a4e6"
+    "gitHead": "293645fa50748e255ddf91f4b468622d9ff19009"
 }