@micromag/viewer 0.4.37 → 0.4.40

package/es/index.js

@@ -298,7 +298,7 @@ function Button(_ref) {
   var hasIcon = icon !== null;
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
-  var buttonClassNames = classNames([styles$i.container, styles$i["icon-".concat(iconPosition)], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$i.withIcon, hasIcon), styles$i.withIconColumns, hasIconColumns), styles$i.withText, text !== null), styles$i.isLink, href !== null), styles$i.asLink, asLink), styles$i.isDisabled, disabled), styles$i.isLoading, loading), className, className !== null)]);
+  var buttonClassNames = classNames([styles$i.container, styles$i["icon-".concat(iconPosition)], className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$i.withIcon, hasIcon), styles$i.withIconColumns, hasIconColumns), styles$i.withText, text !== null), styles$i.isLink, href !== null), styles$i.asLink, asLink), styles$i.isDisabled, disabled), styles$i.isLoading, loading)]);
   var _ref3 = theme || {},
     _ref3$colors = _ref3.colors,
     colors = _ref3$colors === void 0 ? null : _ref3$colors;
@@ -308,13 +308,13 @@ function Button(_ref) {
   var primaryColor = getStyleFromColor(brandPrimaryColor, 'color');
   var buttonStyles = _objectSpread({}, primaryColor);
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$i.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$i.icon, iconClassName])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$i.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$i.label, labelClassName])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, iconPosition === 'left' ? /*#__PURE__*/React.createElement("span", {
     className: classNames([styles$i.icon, styles$i.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, icon) : null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$i.center, styles$i.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$i.center, styles$i.label, labelClassName])
   }, text), iconPosition === 'right' ? /*#__PURE__*/React.createElement("span", {
     className: classNames([styles$i.icon, styles$i.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, icon) : null, hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
@@ -361,9 +361,9 @@ function IconButton(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$h.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$h.container, className]),
     labelClassName: styles$h.label,
-    iconClassName: classNames([styles$h.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    iconClassName: classNames([styles$h.icon, iconClassName])
   }, props));
 }
 
@@ -376,7 +376,7 @@ function CloseMenuButton(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$8);
   var intl = useIntl();
   return /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    className: classNames([_defineProperty({}, className, className !== null)]),
+    className: classNames([className]),
     label: intl.formatMessage({
       id: "dIvwcD",
       defaultMessage: [{
@@ -425,7 +425,7 @@ function MenuButton(_ref) {
     var props = _objectWithoutProperties(_ref, _excluded$7);
   var intl = useIntl();
   return /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    className: classNames([_defineProperty({}, className, className !== null)]),
+    className: classNames([className]),
     label: intl.formatMessage({
       id: "F/gl4b",
       defaultMessage: [{
@@ -467,7 +467,7 @@ function ShareButton(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$6);
   var intl = useIntl();
   return /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    className: classNames([_defineProperty({}, className, className !== null)]),
+    className: classNames([className]),
     label: intl.formatMessage({
       id: "7tw6U2",
       defaultMessage: [{
@@ -498,6 +498,7 @@ function ShareButton(_ref) {
 
 var styles$g = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
 
+/* eslint-disable react/jsx-props-no-spreading */
 function ToggleButton(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
@@ -511,7 +512,7 @@ function ToggleButton(_ref) {
     toggledButtonClassName = _ref$toggledButtonCla === void 0 ? null : _ref$toggledButtonCla;
   if (button === null) return null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$g.container, className])
   }, /*#__PURE__*/React.createElement(animated.div, {
     className: styles$g.normal,
     style: {
@@ -520,7 +521,7 @@ function ToggleButton(_ref) {
       })
     }
   }, button), /*#__PURE__*/React.createElement(animated.div, {
-    className: classNames([styles$g.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
+    className: classNames([styles$g.toggled, toggledButtonClassName]),
     style: {
       transform: progressSpring.to(function (p) {
         return "translateY(".concat((p - 1) * -100, "%)");
@@ -548,7 +549,7 @@ function ViewerMenuContainer(_ref) {
     brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color;
   var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$f.container, className]),
     style: {
       pointerEvents: 'none'
     }
@@ -629,7 +630,7 @@ function ViewerMenuDot(_ref) {
   }, [active, current, subIndex, count, setDotSpringProps]);
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames([styles$e.container, _defineProperty(_defineProperty(_defineProperty({}, styles$e.active, current), styles$e.vertical, vertical), className, className !== null)]),
+    className: classNames([styles$e.container, className, _defineProperty(_defineProperty({}, styles$e.active, current), styles$e.vertical, vertical)]),
     onClick: function onClick() {
       var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       if (e !== null) {
@@ -820,11 +821,12 @@ function MicromagIcon(_ref) {
 
 var styles$c = {"container":"micromag-viewer-partials-micromag-branding-container","link":"micromag-viewer-partials-micromag-branding-link","text":"micromag-viewer-partials-micromag-branding-text","icon":"micromag-viewer-partials-micromag-branding-icon"};
 
+/* eslint-disable react/button-has-type, react/jsx-props-no-spreading, jsx-a11y/label-has-associated-control */
 function MicromagBranding(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, _defineProperty({}, className, className)])
+    className: classNames([styles$c.container, className])
   }, /*#__PURE__*/React.createElement("a", {
     href: "https://micromag.media",
     target: "_blank",
@@ -857,7 +859,7 @@ function StackIcon(_ref) {
     width: "11.5px",
     height: "17.5px",
     viewBox: "0 0 11.5 17.5",
-    className: classNames([_defineProperty({}, className, className !== null)])
+    className: classNames([className])
   }, /*#__PURE__*/React.createElement("rect", {
     width: "10",
     height: "16"
@@ -919,7 +921,7 @@ function ViewerMenuScreen(_ref) {
     }]
   })) : '');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$b.container, _defineProperty(_defineProperty({}, className, className !== null), styles$b.isCurrent, current)]),
+    className: classNames([styles$b.container, className, _defineProperty({}, styles$b.isCurrent, current)]),
     style: {
       paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
     },
@@ -1032,7 +1034,7 @@ function ViewerMenuPreview(_ref) {
 
   var menuPaddingTop = paddingTop + 10;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$a.container, className]),
     style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
@@ -1065,14 +1067,14 @@ function ViewerMenuPreview(_ref) {
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles$a.items
   }, items.map(function (item, index) {
-    var _ref8 = item || {},
-      screenId = _ref8.screenId;
+    var _ref7 = item || {},
+      screenId = _ref7.screenId;
     var itemStyles = {
       width: "".concat(100 / thumbsPerLine, "%")
     };
-    var _ref9 = screenSize || {},
-      screenWidth = _ref9.width,
-      screenHeight = _ref9.height;
+    var _ref8 = screenSize || {},
+      screenWidth = _ref8.width,
+      screenHeight = _ref8.height;
     return /*#__PURE__*/React.createElement("li", {
       key: "item-".concat(screenId),
       className: styles$a.item,
@@ -1101,6 +1103,7 @@ function ViewerMenuPreview(_ref) {
 
 var styles$9 = {"container":"micromag-viewer-partials-micromag-preview-container","title":"micromag-viewer-partials-micromag-preview-title","cover":"micromag-viewer-partials-micromag-preview-cover","info":"micromag-viewer-partials-micromag-preview-info","url":"micromag-viewer-partials-micromag-preview-url"};
 
+/* eslint-disable react/button-has-type, react/jsx-props-no-spreading, jsx-a11y/label-has-associated-control */
 function MicromagPreview(_ref) {
   var _ref$screen = _ref.screen,
     screen = _ref$screen === void 0 ? null : _ref$screen,
@@ -1113,7 +1116,7 @@ function MicromagPreview(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, _defineProperty({}, className, className)])
+    className: classNames([styles$9.container, className])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$9.cover
   }, /*#__PURE__*/React.createElement(ScreenPreview, {
@@ -1202,7 +1205,7 @@ function ViewerMenuShare(_ref) {
     return shareCurrentScreen && currentScreenIndex !== 0 ? "".concat(shareUrl, "/").concat(currentScreenIndex + 1) : shareUrl;
   }, [shareUrl, shareCurrentScreen, currentScreenIndex]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$8.container, className]),
     style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
       width: menuWidth
     }),
@@ -1736,7 +1739,7 @@ function ViewerScreen(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$6.container, className])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$6.inner,
     style: {
@@ -1770,7 +1773,7 @@ function NavigationButton(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    className: classNames([styles$5.container, styles$5[direction], _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$5.container, styles$5[direction], className]),
     onClick: function onClick(e) {
       e.stopPropagation();
       _onClick();
@@ -1797,7 +1800,7 @@ function ArrowHint(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, _defineProperty(_defineProperty({}, styles$4.withoutShadow, withoutShadow), className, className !== null)])
+    className: classNames([styles$4.container, className, _defineProperty({}, styles$4.withoutShadow, withoutShadow)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$4.inner
   }, /*#__PURE__*/React.createElement(ArrowIcon, {
@@ -1830,7 +1833,7 @@ function HandTap(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.container, _defineProperty(_defineProperty({}, styles$3.withoutShadow, withoutShadow), className, className !== null)])
+    className: classNames([styles$3.container, className, _defineProperty({}, styles$3.withoutShadow, withoutShadow)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.inner
   }, /*#__PURE__*/React.createElement("div", {
@@ -1958,7 +1961,7 @@ function SeekBar(_ref3) {
     }
   });
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classNames([styles$2.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$2.withSeekHead, withSeekHead), styles$2.showTimestamp, showTimestamp)])
+    className: classNames([styles$2.container, className, _defineProperty(_defineProperty({}, styles$2.withSeekHead, withSeekHead), styles$2.showTimestamp, showTimestamp)])
   }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
     className: styles$2.inner
   }, /*#__PURE__*/React.createElement("div", {
@@ -2187,7 +2190,7 @@ function PlaybackControls(_ref) {
     color: "currentColor"
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$1.withPlayPause, controls && !seekBarOnly), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.withoutShadow, withoutShadow), styles$1.isMuted, muted), collapsedClassName, collapsedClassName !== null && isCollapsed)])
+    className: classNames([styles$1.container, className, isCollapsed ? collapsedClassName : null, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$1.withPlayPause, controls && !seekBarOnly), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.withoutShadow, withoutShadow), styles$1.isMuted, muted)])
   }, controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/React.createElement(Button$1, {
     className: classNames([styles$1.suggest]),
     style: {
@@ -2372,7 +2375,7 @@ function WebViewContainer(_ref) {
     }, currentQueryString))) : url;
   }, [webViewUrl, source]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, styles.opened, opened), className, className !== null)]),
+    className: classNames([styles.container, className, _defineProperty({}, styles.opened, opened)]),
     style: style,
     onTransitionEnd: onTransitionEnd,
     ref: ref
@@ -3167,7 +3170,7 @@ function Viewer(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$7.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$7.landscape, landscape), styles$7.withoutGestures, withoutGestures), styles$7.hideMenu, !menuVisible), styles$7.disableMenu, navigationDisabled), styles$7.fadeMenu, playing && playbackControls && !playbackControlsVisible), styles$7.ready, ready || withoutScreensTransforms), styles$7.hasInteracted, hasInteracted), styles$7.isDragging, isDragging), className, className)]),
+    }), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$7.landscape, landscape), styles$7.withoutGestures, withoutGestures), styles$7.hideMenu, !menuVisible), styles$7.disableMenu, navigationDisabled), styles$7.fadeMenu, playing && playbackControls && !playbackControlsVisible), styles$7.ready, ready || withoutScreensTransforms), styles$7.hasInteracted, hasInteracted), styles$7.isDragging, isDragging)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, /*#__PURE__*/React.createElement("div", {