@micromag/screen-timeline 0.4.48 → 0.4.50

package/es/index.js

@@ -4,7 +4,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useActivityDetector, useDebounce, useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
@@ -19,6 +19,7 @@ import Layout from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 
@@ -326,112 +327,120 @@ function Timeline(_ref) {
       titleTextStyle = _ref9.textStyle;
     var _ref0 = description || {},
       descriptionTextStyle = _ref0.textStyle;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/jsx("div", {
       className: styles.item,
-      key: "item-".concat(itemI)
-    }, elementsTypes.map(function (elementType, typeI) {
-      var elementContent = null;
-      var hasElement = false;
-      switch (elementType) {
-        case 'title':
-          hasElement = hasItemTitle;
-          elementContent = /*#__PURE__*/React.createElement("div", {
-            className: styles.title
-          }, /*#__PURE__*/React.createElement(ScreenElement, {
-            placeholder: "title",
-            emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-              id: "bmO4Ss",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Entry Title"
-              }]
-            }),
-            emptyClassName: styles.empty,
-            isEmpty: !hasItemTitle
-          }, hasItemTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({}, itemTitle, {
-            textStyle: _objectSpread(_objectSpread({}, itemTitleStyle || null), titleTextStyle)
-          })) : null));
-          break;
-        case 'image':
-          hasElement = hasImage;
-          elementContent = /*#__PURE__*/React.createElement("div", {
-            className: styles.imageContainer
-          }, /*#__PURE__*/React.createElement(ScreenElement, {
-            placeholder: "image",
-            emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-              id: "ebsPd4",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Image"
-              }]
-            }),
-            emptyClassName: styles.empty,
-            isEmpty: !hasImage
-          }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
-            className: styles.image,
-            videoClassName: styles.video,
-            loadingMode: "lazy",
-            media: image,
-            width: imageWidth,
-            resolution: resolution,
-            playing: backgroundPlaying,
-            active: active,
-            shouldLoad: mediaShouldLoad,
-            withoutVideo: isPreview,
-            onLoaded: onImageLoaded
-          }) : null));
-          break;
-        case 'description':
-          hasElement = hasDescription;
-          elementContent = /*#__PURE__*/React.createElement("div", {
-            className: styles.description
-          }, /*#__PURE__*/React.createElement(ScreenElement, {
-            placeholder: "text",
-            emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-              id: "507VAi",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Description"
-              }]
-            }),
-            emptyClassName: styles.empty,
-            isEmpty: !hasDescription
-          }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
-            textStyle: _objectSpread(_objectSpread({}, itemDescriptionStyle || null), descriptionTextStyle)
-          })) : null));
-          break;
-        default:
-          elementContent = null;
-          hasElement = false;
-      }
-      var firstItem = itemI === 0;
-      var lastItem = itemI === itemsCount - 1;
-      var lastType = typeI === typesCount - 1;
-      var topLineHidden = firstItem && typeI <= titleIndex || lastItem && typeI > titleIndex;
-      var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
-      return /*#__PURE__*/React.createElement("div", {
-        key: "element-".concat(elementType),
-        className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
-        ref: itemI === 0 ? firstContentRef : null
-      }, !withoutLine ? /*#__PURE__*/React.createElement("div", {
-        className: styles.timeline,
-        ref: itemI === 0 ? firstLineRef : null
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.line, _defineProperty({}, styles.hidden, topLineHidden)]),
-        style: _objectSpread({}, !topLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
-      }), elementType === 'title' ? /*#__PURE__*/React.createElement("div", {
-        className: styles.bullet,
-        style: _objectSpread(_objectSpread({}, getStyleFromColor(bulletColor, 'borderColor')), bulletFilled ? getStyleFromColor(bulletColor, 'backgroundColor') : null)
-      }) : null, /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.line, _defineProperty({}, styles.hidden, bottomLineHidden)]),
-        style: _objectSpread({}, !bottomLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
-      })) : null, /*#__PURE__*/React.createElement("div", {
-        className: styles.body,
-        style: {
-          marginBottom: lastType && !lastItem ? itemBottomSpacing : 0
+      children: elementsTypes.map(function (elementType, typeI) {
+        var elementContent = null;
+        var hasElement = false;
+        switch (elementType) {
+          case 'title':
+            hasElement = hasItemTitle;
+            elementContent = /*#__PURE__*/jsx("div", {
+              className: styles.title,
+              children: /*#__PURE__*/jsx(ScreenElement, {
+                placeholder: "title",
+                emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+                  id: "bmO4Ss",
+                  defaultMessage: [{
+                    "type": 0,
+                    "value": "Entry Title"
+                  }]
+                }),
+                emptyClassName: styles.empty,
+                isEmpty: !hasItemTitle,
+                children: hasItemTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, itemTitle), {}, {
+                  textStyle: _objectSpread(_objectSpread({}, itemTitleStyle || null), titleTextStyle)
+                })) : null
+              })
+            });
+            break;
+          case 'image':
+            hasElement = hasImage;
+            elementContent = /*#__PURE__*/jsx("div", {
+              className: styles.imageContainer,
+              children: /*#__PURE__*/jsx(ScreenElement, {
+                placeholder: "image",
+                emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+                  id: "ebsPd4",
+                  defaultMessage: [{
+                    "type": 0,
+                    "value": "Image"
+                  }]
+                }),
+                emptyClassName: styles.empty,
+                isEmpty: !hasImage,
+                children: hasImage ? /*#__PURE__*/jsx(Visual, {
+                  className: styles.image,
+                  videoClassName: styles.video,
+                  loadingMode: "lazy",
+                  media: image,
+                  width: imageWidth,
+                  resolution: resolution,
+                  playing: backgroundPlaying,
+                  active: active,
+                  shouldLoad: mediaShouldLoad,
+                  withoutVideo: isPreview,
+                  onLoaded: onImageLoaded
+                }) : null
+              })
+            });
+            break;
+          case 'description':
+            hasElement = hasDescription;
+            elementContent = /*#__PURE__*/jsx("div", {
+              className: styles.description,
+              children: /*#__PURE__*/jsx(ScreenElement, {
+                placeholder: "text",
+                emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+                  id: "507VAi",
+                  defaultMessage: [{
+                    "type": 0,
+                    "value": "Description"
+                  }]
+                }),
+                emptyClassName: styles.empty,
+                isEmpty: !hasDescription,
+                children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
+                  textStyle: _objectSpread(_objectSpread({}, itemDescriptionStyle || null), descriptionTextStyle)
+                })) : null
+              })
+            });
+            break;
+          default:
+            elementContent = null;
+            hasElement = false;
         }
-      }, elementContent));
-    }));
+        var firstItem = itemI === 0;
+        var lastItem = itemI === itemsCount - 1;
+        var lastType = typeI === typesCount - 1;
+        var topLineHidden = firstItem && typeI <= titleIndex || lastItem && typeI > titleIndex;
+        var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
+        return /*#__PURE__*/jsxs("div", {
+          className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
+          ref: itemI === 0 ? firstContentRef : null,
+          children: [!withoutLine ? /*#__PURE__*/jsxs("div", {
+            className: styles.timeline,
+            ref: itemI === 0 ? firstLineRef : null,
+            children: [/*#__PURE__*/jsx("div", {
+              className: classNames([styles.line, _defineProperty({}, styles.hidden, topLineHidden)]),
+              style: _objectSpread({}, !topLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
+            }), elementType === 'title' ? /*#__PURE__*/jsx("div", {
+              className: styles.bullet,
+              style: _objectSpread(_objectSpread({}, getStyleFromColor(bulletColor, 'borderColor')), bulletFilled ? getStyleFromColor(bulletColor, 'backgroundColor') : null)
+            }) : null, /*#__PURE__*/jsx("div", {
+              className: classNames([styles.line, _defineProperty({}, styles.hidden, bottomLineHidden)]),
+              style: _objectSpread({}, !bottomLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
+            })]
+          }) : null, /*#__PURE__*/jsx("div", {
+            className: styles.body,
+            style: {
+              marginBottom: lastType && !lastItem ? itemBottomSpacing : 0
+            },
+            children: elementContent
+          })]
+        }, "element-".concat(elementType));
+      })
+    }, "item-".concat(itemI));
   });
 
   // Call to Action
@@ -470,85 +479,92 @@ function Timeline(_ref) {
       });
     }
   }, [trackScreenEvent]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), styles.withoutLines, itemsCount < 2)]),
-    "data-screen-ready": ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles.scroll,
-    verticalAlign: "middle",
-    disabled: scrollingDisabled,
-    onScrolledTrigger: onScrolledTrigger,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    withShadow: true
-  }, /*#__PURE__*/React.createElement(Layout, {
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingBottom: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: "Title",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "BSTWf8",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyTitle]),
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.title
-  }, title)) : null), timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    ref: footerRef,
-    className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
-    style: {
-      transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingTop: spacing / 2,
-      paddingBottom: spacing / 2
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), audioAlternativeMedia !== null ? /*#__PURE__*/React.createElement(Audio, Object.assign({}, finalAudioAlternative, {
-    paused: !audioPlaying,
-    mediaRef: mediaRef,
-    muted: muted,
-    className: styles.audio,
-    shouldLoad: mediaShouldLoad,
-    onReady: onAudioReady,
-    onPlay: onAudioPlay,
-    onPause: onAudioPause,
-    onTimeUpdate: onAudioTimeUpdate,
-    onProgressStep: onAudioProgressStep,
-    onDurationChange: onAudioDurationChange,
-    onSeeked: onAudioSeeked,
-    onEnded: onAudioEnded
-  })) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: imageResolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: audioAlternativeMedia === null ? mediaRef : null,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
+    "data-screen-ready": ready,
+    children: [/*#__PURE__*/jsxs(Container, {
+      width: width,
+      height: height,
+      className: styles.content,
+      children: [/*#__PURE__*/jsx(Scroll, {
+        className: styles.scroll,
+        verticalAlign: "middle",
+        disabled: scrollingDisabled,
+        onScrolledTrigger: onScrolledTrigger,
+        onScrolledBottom: onScrolledBottom,
+        onScrolledNotBottom: onScrolledNotBottom,
+        withShadow: true,
+        children: /*#__PURE__*/jsxs(Layout, {
+          style: !isPlaceholder ? {
+            padding: spacing,
+            paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
+            paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
+          } : null,
+          children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+            style: {
+              paddingBottom: spacing
+            },
+            children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+          }) : null, /*#__PURE__*/jsx(ScreenElement, {
+            placeholder: "Title",
+            emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+              id: "BSTWf8",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Title"
+              }]
+            }),
+            emptyClassName: classNames([styles.empty, styles.emptyTitle]),
+            isEmpty: !hasTitle,
+            children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
+              className: styles.title
+            }, title)) : null
+          }), timelineElements]
+        })
+      }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+        ref: footerRef,
+        className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
+        style: {
+          transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+          paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+          paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+          paddingTop: spacing / 2,
+          paddingBottom: spacing / 2
+        },
+        children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+      }) : null]
+    }), audioAlternativeMedia !== null ? /*#__PURE__*/jsx(Audio, _objectSpread(_objectSpread({}, finalAudioAlternative), {}, {
+      paused: !audioPlaying,
+      mediaRef: mediaRef,
+      muted: muted,
+      className: styles.audio,
+      shouldLoad: mediaShouldLoad,
+      onReady: onAudioReady,
+      onPlay: onAudioPlay,
+      onPause: onAudioPause,
+      onTimeUpdate: onAudioTimeUpdate,
+      onProgressStep: onAudioProgressStep,
+      onDurationChange: onAudioDurationChange,
+      onSeeked: onAudioSeeked,
+      onEnded: onAudioEnded
+    })) : null, !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      background: background,
+      width: width,
+      height: height,
+      resolution: imageResolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: mediaShouldLoad,
+      mediaRef: audioAlternativeMedia === null ? mediaRef : null,
+      withoutVideo: isPreview,
+      className: styles.background
+    }) : null]
+  });
 }
 
 function TimelineIllustratedScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(Timeline, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(Timeline, _objectSpread(_objectSpread({}, props), {}, {
     illustrated: true
   }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.4.48",
+    "version": "0.4.50",
     "private": false,
     "description": "",
     "keywords": [
@@ -61,17 +61,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.48",
-        "@micromag/element-background": "^0.4.48",
-        "@micromag/element-container": "^0.4.48",
-        "@micromag/element-footer": "^0.4.48",
-        "@micromag/element-header": "^0.4.48",
-        "@micromag/element-heading": "^0.4.48",
-        "@micromag/element-layout": "^0.4.48",
-        "@micromag/element-scroll": "^0.4.48",
-        "@micromag/element-text": "^0.4.48",
-        "@micromag/element-visual": "^0.4.48",
-        "@micromag/transforms": "^0.4.48",
+        "@micromag/core": "^0.4.50",
+        "@micromag/element-background": "^0.4.50",
+        "@micromag/element-container": "^0.4.50",
+        "@micromag/element-footer": "^0.4.50",
+        "@micromag/element-header": "^0.4.50",
+        "@micromag/element-heading": "^0.4.50",
+        "@micromag/element-layout": "^0.4.50",
+        "@micromag/element-scroll": "^0.4.50",
+        "@micromag/element-text": "^0.4.50",
+        "@micromag/element-visual": "^0.4.50",
+        "@micromag/transforms": "^0.4.50",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +81,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "d6772865be1ee3f2d19288ebfbf4b9b6860f4cd7",
+    "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
     "types": "es/index.d.ts"
 }