npm - @micromag/viewer - Versions diffs - 0.3.447 → 0.3.448 - Mend

@micromag/viewer 0.3.447 → 0.3.448

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/assets/css/styles.css CHANGED Viewed

@@ -3,7 +3,7 @@
 .micromag-viewer-buttons-toggle-button-container{overflow:hidden;position:relative}.micromag-viewer-buttons-toggle-button-normal{position:relative}.micromag-viewer-buttons-toggle-button-toggled{left:0;position:absolute;top:0;white-space:nowrap}
 .micromag-viewer-menus-menu-container-backdrop,.micromag-viewer-menus-menu-container-heightContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-container-container{color:#fff}.micromag-viewer-menus-menu-container-heightContainer{overflow:hidden;z-index:2}.micromag-viewer-menus-menu-container-backdrop{-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);background-color:rgba(28,28,28,.75);z-index:1}
 .micromag-viewer-menus-menu-dot-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-viewer-menus-menu-dot-progress{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-dot-container{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.micromag-viewer-menus-menu-dot-container:last-child{margin-right:0}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-button{height:100%;padding:2px 10px;width:auto}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-dot{height:100%;width:2px}.micromag-viewer-menus-menu-dot-button{display:block;padding:.25rem 2px 1rem;width:100%}@media (hover:hover){.micromag-viewer-menus-menu-dot-button:hover .micromag-viewer-menus-menu-dot-dot{background-color:#fff!important}.micromag-viewer-menus-menu-dot-button:hover .micromag-viewer-menus-menu-dot-dot{-webkit-transform:scaleY(1.5);-ms-transform:scaleY(1.5);transform:scaleY(1.5)}}.micromag-viewer-menus-menu-dot-button:active .micromag-viewer-menus-menu-dot-dot{-webkit-transform:scaleY(1.5);-ms-transform:scaleY(1.5);transform:scaleY(1.5)}.micromag-viewer-menus-menu-dot-dot{background-color:hsla(0,0%,100%,.45);display:block;height:2px;position:relative;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,1.69,0,1);transition:-webkit-transform .3s cubic-bezier(.4,1.69,0,1);transition:transform .3s cubic-bezier(.4,1.69,0,1);transition:transform .3s cubic-bezier(.4,1.69,0,1),-webkit-transform .3s cubic-bezier(.4,1.69,0,1);width:100%}.micromag-viewer-menus-menu-dot-progress{-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-viewer-menus-menu-dot-subDot{border-radius:0;display:block;position:relative}.micromag-viewer-menus-menu-dot-subDot:after{background-color:inherit;content:"";height:100%;left:100%;position:absolute;width:1px}.micromag-viewer-menus-menu-dot-dots{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}@-webkit-keyframes micromag-viewer-menus-menu-dot-outlineBounce{to{-webkit-transform:scaleY(1.5);transform:scaleY(1.5)}}@keyframes micromag-viewer-menus-menu-dot-outlineBounce{to{-webkit-transform:scaleY(1.5);transform:scaleY(1.5)}}
-.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton.micromag-viewer-menus-menu-dots-focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-menus-menu-dots-container{position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{list-style:none;margin:0;padding:0}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;justify-content:flex-end;width:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:8px;padding-right:2px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;background:transparent;-ms-flex-direction:column;flex-direction:column}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;width:auto}
+.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton.micromag-viewer-menus-menu-dots-focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-menus-menu-dots-container{position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{list-style:none;margin:0;padding:0}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;justify-content:flex-end;width:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-buttons,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:8px;padding-right:2px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;background:transparent;-ms-flex-direction:column;flex-direction:column}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;width:auto}
 .micromag-viewer-menus-menu-screen-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;left:0;padding:0;position:relative;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-screen-container{height:0;overflow:hidden;position:relative;width:100%}.micromag-viewer-menus-menu-screen-button{border:0 solid #fff;border-radius:.45rem;display:block;-webkit-transition:border-width .4s cubic-bezier(.4,1.69,0,1);transition:border-width .4s cubic-bezier(.4,1.69,0,1);z-index:2}.micromag-viewer-menus-menu-screen-button.micromag-viewer-menus-menu-screen-focus-visible{outline:.25rem solid #a13dff;outline-offset:.25rem}.micromag-viewer-menus-menu-screen-button:focus-visible{outline:.25rem solid #a13dff;outline-offset:.25rem}.micromag-viewer-menus-menu-screen-isCurrent .micromag-viewer-menus-menu-screen-button{animation:micromag-viewer-menus-menu-screen-pulse .75s cubic-bezier(.4,0,.6,1) infinite alternate-reverse}@media (hover:hover){.micromag-viewer-menus-menu-screen-button:hover{border:.1rem solid #fff}}.micromag-viewer-menus-menu-screen-inner{pointer-events:none;z-index:1}.micromag-viewer-menus-menu-screen-subScreenBadge{bottom:.25rem;font-size:.9rem;font-weight:700;pointer-events:none;position:absolute;right:.25rem;z-index:2}.micromag-viewer-menus-menu-screen-subScreenCount{color:#343434;left:50%;letter-spacing:-.05rem;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);-ms-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);transform:translate(-50%,-50%) translate(-.1rem,-.1rem);z-index:2}.micromag-viewer-menus-menu-screen-subScreenIcon{fill:#fff;height:auto;position:relative;width:1.15rem;z-index:1}@-webkit-keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.1rem}to{border-width:.25rem}}@keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.1rem}to{border-width:.25rem}}
 .micromag-viewer-menus-menu-preview-scroll{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-preview-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-position:50%;background-repeat:no-repeat;background-size:cover;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:100%;max-height:100%;position:relative}.micromag-viewer-menus-menu-preview-buttons{-webkit-box-flex:1;-ms-flex-positive:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:1;position:relative;z-index:3}.micromag-viewer-menus-menu-preview-organisation{-ms-flex-negative:0;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:50%;flex-shrink:0;height:30px;margin-right:10px;width:30px}.micromag-viewer-menus-menu-preview-icon{display:block;height:auto;width:1rem}.micromag-viewer-menus-menu-preview-titleContainer{padding:10px 80px;text-align:center;width:100%}.micromag-viewer-menus-menu-preview-headerContainer{position:relative;width:100%}.micromag-viewer-menus-menu-preview-badge{border-color:#fff;color:#fff;display:inline-block;margin:0 auto 10px}.micromag-viewer-menus-menu-preview-title{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:24px;margin:0 auto;max-width:500px;text-align:center}.micromag-viewer-menus-menu-preview-nav{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:10px;position:relative}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{list-style:none;margin:0;padding:0}.micromag-viewer-menus-menu-preview-items{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:.75rem!important;position:relative}.micromag-viewer-menus-menu-preview-item{position:relative;width:33.333%}.micromag-viewer-menus-menu-preview-inner{padding:2px}.micromag-viewer-menus-menu-preview-frame{background-color:#343434;border-radius:.45rem;height:0;width:100%}.micromag-viewer-menus-menu-preview-screen{-webkit-animation:micromag-viewer-menus-menu-preview-intro 1s cubic-bezier(.6,0,.4,1) 50ms 1 forwards;animation:micromag-viewer-menus-menu-preview-intro 1s cubic-bezier(.6,0,.4,1) 50ms 1 forwards;border-radius:.45rem;-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c;opacity:0}@-webkit-keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}@keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}
 .micromag-viewer-partials-micromag-preview-container{-webkit-box-align:start;-ms-flex-align:start;-webkit-box-pack:start;-ms-flex-pack:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start}.micromag-viewer-partials-micromag-preview-cover{-ms-flex-negative:0;flex-shrink:0;margin-right:.5rem;overflow:hidden}.micromag-viewer-partials-micromag-preview-info{white-space:normal}.micromag-viewer-partials-micromag-preview-url{font-size:.75rem;margin:.5rem 0}.micromag-viewer-partials-micromag-preview-container .micromag-viewer-partials-micromag-preview-title{font-family:Helvetica,Arial,sans-serif!important;font-size:1.1rem!important;font-weight:700;margin-bottom:.25rem}

package/es/index.js CHANGED Viewed

@@ -225,7 +225,6 @@ var propTypes$n = {
     current: PropTypes.any // eslint-disable-line
   })])
 };
 var defaultProps$n = {
   type: 'button',
   theme: null,
@@ -707,9 +706,9 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
 ViewerMenuDot.propTypes = propTypes$g;
 ViewerMenuDot.defaultProps = defaultProps$g;
-var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","focus-visible":"micromag-viewer-menus-menu-dots-focus-visible","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","vertical":"micromag-viewer-menus-menu-dots-vertical"};
+var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","focus-visible":"micromag-viewer-menus-menu-dots-focus-visible","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
-var _excluded$4 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "withItemClick", "withoutScreensMenu", "onClose", "className"];
+var _excluded$4 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "buttons", "withItemClick", "withoutScreensMenu", "onClose", "className"];
 var propTypes$f = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   items: PropTypes$1.menuItems,
@@ -719,6 +718,7 @@ var propTypes$f = {
     primary: PropTypes.string,
     secondary: PropTypes.string
   }),
+  buttons: PropTypes.node,
   closeable: PropTypes.bool,
   withItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
@@ -731,6 +731,7 @@ var defaultProps$f = {
   onClickDot: null,
   onClickScreensMenu: null,
   colors: null,
+  buttons: null,
   closeable: false,
   withItemClick: false,
   withoutScreensMenu: false,
@@ -744,6 +745,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     onClickScreensMenu = _ref.onClickScreensMenu,
     colors = _ref.colors,
     closeable = _ref.closeable,
+    buttons = _ref.buttons,
     withItemClick = _ref.withItemClick,
     withoutScreensMenu = _ref.withoutScreensMenu,
     onClose = _ref.onClose,
@@ -834,7 +836,9 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Close"
       }]
     })
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null, buttons !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.buttons
+  }, buttons) : null));
 };
 ViewerMenuDots.propTypes = propTypes$f;
 ViewerMenuDots.defaultProps = defaultProps$f;
@@ -1319,6 +1323,7 @@ var propTypes$9 = {
   toggleFullscreen: PropTypes.func,
   fullscreenActive: PropTypes.bool,
   fullscreenEnabled: PropTypes.bool,
+  buttons: PropTypes.node,
   closeable: PropTypes.bool,
   withShadow: PropTypes.bool,
   trackingEnabled: PropTypes.bool,
@@ -1338,12 +1343,12 @@ var propTypes$9 = {
     current: PropTypes.any // eslint-disable-line
   })
 };
 var defaultProps$9 = {
   currentScreenIndex: 0,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
+  buttons: null,
   closeable: false,
   withShadow: false,
   trackingEnabled: false,
@@ -1367,6 +1372,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     toggleFullscreen = _ref.toggleFullscreen,
     fullscreenActive = _ref.fullscreenActive,
     fullscreenEnabled = _ref.fullscreenEnabled,
+    buttons = _ref.buttons,
     closeable = _ref.closeable,
     withShadow = _ref.withShadow,
     shareBasePath = _ref.shareBasePath,
@@ -1676,15 +1682,13 @@ var ViewerMenu = function ViewerMenu(_ref) {
     items: items,
     onClickDot: onClickScreen,
     onClickScreensMenu: onOpenMenu,
+    buttons: buttons,
     closeable: closeable,
     withItemClick: withDotItemClick,
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
     onClose: onClickCloseViewer,
     className: styles$6.dots
-    // style={{
-    // opacity: dotsOpacity ** 5, // @note this is like a "quint" easing, meaning it'll go towards 1 slowly first and then fast as it approaches 1
-    // }}
   }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: shareOpenedProgress,
@@ -1932,7 +1936,6 @@ var propTypes$5 = {
     current: PropTypes.any
   }) // eslint-disable-line
   ]),
   playing: PropTypes.bool,
   backgroundColor: PropTypes.string,
   progressColor: PropTypes.string,
@@ -2415,6 +2418,7 @@ var propTypes$2 = {
   withNeighborScreens: PropTypes.bool,
   withNavigationHint: PropTypes.bool,
   withoutPlaybackControls: PropTypes.bool,
+  buttons: PropTypes.node,
   closeable: PropTypes.bool,
   onClose: PropTypes.func,
   onInteraction: PropTypes.func,
@@ -2462,6 +2466,7 @@ var defaultProps$2 = {
   withoutPlaybackControls: false,
   menuIsScreenWidth: false,
   menuHeader: null,
+  buttons: null,
   closeable: false,
   onClose: null,
   onInteraction: null,
@@ -2502,6 +2507,7 @@ var Viewer = function Viewer(_ref) {
     withoutPlaybackControls = _ref.withoutPlaybackControls,
     menuIsScreenWidth = _ref.menuIsScreenWidth,
     menuHeader = _ref.menuHeader,
+    buttons = _ref.buttons,
     closeable = _ref.closeable,
     onCloseViewer = _ref.onClose,
     onInteraction = _ref.onInteraction,
@@ -2969,6 +2975,7 @@ var Viewer = function Viewer(_ref) {
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled,
+    buttons: buttons,
     closeable: closeable,
     shareBasePath: basePath,
     screenSize: screenSize,

package/lib/index.js CHANGED Viewed

@@ -229,7 +229,6 @@ var propTypes$n = {
     current: PropTypes.any // eslint-disable-line
   })])
 };
 var defaultProps$n = {
   type: 'button',
   theme: null,
@@ -711,9 +710,9 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
 ViewerMenuDot.propTypes = propTypes$g;
 ViewerMenuDot.defaultProps = defaultProps$g;
-var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","focus-visible":"micromag-viewer-menus-menu-dots-focus-visible","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","vertical":"micromag-viewer-menus-menu-dots-vertical"};
+var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","focus-visible":"micromag-viewer-menus-menu-dots-focus-visible","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
-var _excluded$4 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "withItemClick", "withoutScreensMenu", "onClose", "className"];
+var _excluded$4 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "buttons", "withItemClick", "withoutScreensMenu", "onClose", "className"];
 var propTypes$f = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   items: core.PropTypes.menuItems,
@@ -723,6 +722,7 @@ var propTypes$f = {
     primary: PropTypes.string,
     secondary: PropTypes.string
   }),
+  buttons: PropTypes.node,
   closeable: PropTypes.bool,
   withItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
@@ -735,6 +735,7 @@ var defaultProps$f = {
   onClickDot: null,
   onClickScreensMenu: null,
   colors: null,
+  buttons: null,
   closeable: false,
   withItemClick: false,
   withoutScreensMenu: false,
@@ -748,6 +749,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     onClickScreensMenu = _ref.onClickScreensMenu,
     colors = _ref.colors,
     closeable = _ref.closeable,
+    buttons = _ref.buttons,
     withItemClick = _ref.withItemClick,
     withoutScreensMenu = _ref.withoutScreensMenu,
     onClose = _ref.onClose,
@@ -838,7 +840,9 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Close"
       }]
     })
-  }, /*#__PURE__*/React.createElement(components.CloseIcon, null))) : null));
+  }, /*#__PURE__*/React.createElement(components.CloseIcon, null))) : null, buttons !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.buttons
+  }, buttons) : null));
 };
 ViewerMenuDots.propTypes = propTypes$f;
 ViewerMenuDots.defaultProps = defaultProps$f;
@@ -1323,6 +1327,7 @@ var propTypes$9 = {
   toggleFullscreen: PropTypes.func,
   fullscreenActive: PropTypes.bool,
   fullscreenEnabled: PropTypes.bool,
+  buttons: PropTypes.node,
   closeable: PropTypes.bool,
   withShadow: PropTypes.bool,
   trackingEnabled: PropTypes.bool,
@@ -1342,12 +1347,12 @@ var propTypes$9 = {
     current: PropTypes.any // eslint-disable-line
   })
 };
 var defaultProps$9 = {
   currentScreenIndex: 0,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
+  buttons: null,
   closeable: false,
   withShadow: false,
   trackingEnabled: false,
@@ -1371,6 +1376,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     toggleFullscreen = _ref.toggleFullscreen,
     fullscreenActive = _ref.fullscreenActive,
     fullscreenEnabled = _ref.fullscreenEnabled,
+    buttons = _ref.buttons,
     closeable = _ref.closeable,
     withShadow = _ref.withShadow,
     shareBasePath = _ref.shareBasePath,
@@ -1680,15 +1686,13 @@ var ViewerMenu = function ViewerMenu(_ref) {
     items: items,
     onClickDot: onClickScreen,
     onClickScreensMenu: onOpenMenu,
+    buttons: buttons,
     closeable: closeable,
     withItemClick: withDotItemClick,
     withoutScreensMenu: withoutScreensMenu,
     withoutShareMenu: withoutShareMenu,
     onClose: onClickCloseViewer,
     className: styles$6.dots
-    // style={{
-    // opacity: dotsOpacity ** 5, // @note this is like a "quint" easing, meaning it'll go towards 1 slowly first and then fast as it approaches 1
-    // }}
   }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: shareOpenedProgress,
@@ -1936,7 +1940,6 @@ var propTypes$5 = {
     current: PropTypes.any
   }) // eslint-disable-line
   ]),
   playing: PropTypes.bool,
   backgroundColor: PropTypes.string,
   progressColor: PropTypes.string,
@@ -2419,6 +2422,7 @@ var propTypes$2 = {
   withNeighborScreens: PropTypes.bool,
   withNavigationHint: PropTypes.bool,
   withoutPlaybackControls: PropTypes.bool,
+  buttons: PropTypes.node,
   closeable: PropTypes.bool,
   onClose: PropTypes.func,
   onInteraction: PropTypes.func,
@@ -2466,6 +2470,7 @@ var defaultProps$2 = {
   withoutPlaybackControls: false,
   menuIsScreenWidth: false,
   menuHeader: null,
+  buttons: null,
   closeable: false,
   onClose: null,
   onInteraction: null,
@@ -2506,6 +2511,7 @@ var Viewer = function Viewer(_ref) {
     withoutPlaybackControls = _ref.withoutPlaybackControls,
     menuIsScreenWidth = _ref.menuIsScreenWidth,
     menuHeader = _ref.menuHeader,
+    buttons = _ref.buttons,
     closeable = _ref.closeable,
     onCloseViewer = _ref.onClose,
     onInteraction = _ref.onInteraction,
@@ -2973,6 +2979,7 @@ var Viewer = function Viewer(_ref) {
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled,
+    buttons: buttons,
     closeable: closeable,
     shareBasePath: basePath,
     screenSize: screenSize,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.447",
+    "version": "0.3.448",
     "private": false,
     "description": "",
     "keywords": [
@@ -70,7 +70,7 @@
         "@micromag/elements": "^0.3.447",
         "@micromag/fields": "^0.3.447",
         "@micromag/intl": "^0.3.447",
-        "@micromag/screens": "^0.3.447",
+        "@micromag/screens": "^0.3.448",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -90,5 +90,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "ec175c602ce6f59b7561f57c92da443814109d50"
+    "gitHead": "5ed502871fe921a4bbd4ad4a6e1b5d8bd6513fab"
 }