@micromag/screen-keypad 0.4.52 → 0.4.55

package/es/index.js

@@ -6,7 +6,7 @@ import { animated } from '@react-spring/web';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
-import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { Close, ScreenElement } from '@micromag/core/components';
 import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
@@ -134,6 +134,10 @@ function KeypadScreen(_ref) {
     footerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
     footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    popupDragDisabled = _useState2[0],
+    setPopupDragDisabled = _useState2[1];
   var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
   var mediaShouldLoad = !isPlaceholder && (current || preload);
   var isInteractivePreview = isEdit && screenState === null;
@@ -177,14 +181,15 @@ function KeypadScreen(_ref) {
   var popupLayoutClassName = useMemo(function () {
     return popupLayout !== null ? camelCase(popupLayout) : '';
   }, [popupLayout]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showPopup = _useState2[0],
-    setShowPopup = _useState2[1];
-  var _useState3 = useState(null),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    popup = _useState4[0],
-    setPopup = _useState4[1];
+    showPopup = _useState4[0],
+    setShowPopup = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    popup = _useState6[0],
+    setPopup = _useState6[1];
+  var prevShowPopupRef = useRef(showPopup);
   var _ref7 = popup || {},
     _ref7$heading = _ref7.heading,
     popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
@@ -196,37 +201,46 @@ function KeypadScreen(_ref) {
     popupButton = _ref7$button === void 0 ? null : _ref7$button,
     _ref7$popupBoxStyle = _ref7.popupBoxStyle,
     singlePopupBoxStyle = _ref7$popupBoxStyle === void 0 ? null : _ref7$popupBoxStyle;
+  var _ref8 = largeVisual || {},
+    _ref8$metadata = _ref8.metadata,
+    metadata = _ref8$metadata === void 0 ? null : _ref8$metadata;
+  var _ref9 = metadata || {},
+    _ref9$width = _ref9.width,
+    largeVisualWidth = _ref9$width === void 0 ? 0 : _ref9$width,
+    _ref9$height = _ref9.height,
+    largeVisualHeight = _ref9$height === void 0 ? 0 : _ref9$height;
+  var largeVisualRatio = largeVisualWidth > 0 && largeVisualHeight > 0 ? largeVisualWidth / largeVisualHeight : null;
   var hasPopupHeading = isTextFilled(popupHeading);
-  var _ref8 = popupHeading || {},
-    _ref8$textStyle = _ref8.textStyle,
-    popupHeadingTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
+  var _ref0 = popupHeading || {},
+    _ref0$textStyle = _ref0.textStyle,
+    popupHeadingTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
   var hasPopupContent = isTextFilled(popupContent);
-  var _ref9 = popupContent || {},
-    _ref9$textStyle = _ref9.textStyle,
-    popupContentTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
-  var _ref0 = popupButton || {},
-    _ref0$label = _ref0.label,
-    buttonLabel = _ref0$label === void 0 ? null : _ref0$label,
-    _ref0$url = _ref0.url,
-    buttonUrl = _ref0$url === void 0 ? null : _ref0$url,
-    _ref0$inWebView = _ref0.inWebView,
-    popupInWebView = _ref0$inWebView === void 0 ? false : _ref0$inWebView,
-    _ref0$boxStyle = _ref0.boxStyle,
-    popupButtonBoxStyle = _ref0$boxStyle === void 0 ? null : _ref0$boxStyle;
+  var _ref1 = popupContent || {},
+    _ref1$textStyle = _ref1.textStyle,
+    popupContentTextStyle = _ref1$textStyle === void 0 ? null : _ref1$textStyle;
+  var _ref10 = popupButton || {},
+    _ref10$label = _ref10.label,
+    buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
+    _ref10$url = _ref10.url,
+    buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
+    _ref10$inWebView = _ref10.inWebView,
+    popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
+    _ref10$boxStyle = _ref10.boxStyle,
+    popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
   var onItemClick = useCallback(function (e, item, index) {
     e.stopPropagation();
     if (isNotInteractive) {
       return;
     }
-    var _ref1 = item || {},
-      _ref1$label = _ref1.label,
-      itemLabel = _ref1$label === void 0 ? null : _ref1$label,
-      _ref1$heading = _ref1.heading,
-      heading = _ref1$heading === void 0 ? null : _ref1$heading,
-      _ref1$inWebView = _ref1.inWebView,
-      inWebView = _ref1$inWebView === void 0 ? false : _ref1$inWebView,
-      _ref1$url = _ref1.url,
-      url = _ref1$url === void 0 ? null : _ref1$url;
+    var _ref11 = item || {},
+      _ref11$label = _ref11.label,
+      itemLabel = _ref11$label === void 0 ? null : _ref11$label,
+      _ref11$heading = _ref11.heading,
+      heading = _ref11$heading === void 0 ? null : _ref11$heading,
+      _ref11$inWebView = _ref11.inWebView,
+      inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
+      _ref11$url = _ref11.url,
+      url = _ref11$url === void 0 ? null : _ref11$url;
     if (inWebView && url !== null) {
       openWebView({
         url: url
@@ -235,9 +249,9 @@ function KeypadScreen(_ref) {
       setPopup(item);
       setShowPopup(true);
     }
-    var _ref10 = heading || {},
-      _ref10$body = _ref10.body,
-      headingBody = _ref10$body === void 0 ? null : _ref10$body;
+    var _ref12 = heading || {},
+      _ref12$body = _ref12.body,
+      headingBody = _ref12$body === void 0 ? null : _ref12$body;
     var finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
     trackScreenEvent('click_item', ["#".concat(index + 1), finalLabel || headingBody || ''].filter(function (it) {
       return !isEmpty(it);
@@ -271,25 +285,25 @@ function KeypadScreen(_ref) {
       e.stopPropagation();
     }
   }, []);
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    popupDragDirection = _useState6[0],
-    setPopupDragDirection = _useState6[1];
-  var onPopupScrollHeightChange = useCallback(function (_ref11) {
-    var _ref11$scrolleeHeight = _ref11.scrolleeHeight,
-      scrolleeHeight = _ref11$scrolleeHeight === void 0 ? 0 : _ref11$scrolleeHeight;
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    popupDragDirection = _useState8[0],
+    setPopupDragDirection = _useState8[1];
+  var onPopupScrollHeightChange = useCallback(function (_ref13) {
+    var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
+      scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
     if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
       setPopupDragDirection('top');
     } else {
       setPopupDragDirection('bottom');
     }
   }, [height]);
-  var computePopupProgress = useCallback(function (_ref12) {
-    var dragActive = _ref12.active,
-      _ref12$movement = _slicedToArray(_ref12.movement, 2),
-      my = _ref12$movement[1],
-      _ref12$velocity = _slicedToArray(_ref12.velocity, 2),
-      vy = _ref12$velocity[1];
+  var computePopupProgress = useCallback(function (_ref14) {
+    var dragActive = _ref14.active,
+      _ref14$movement = _slicedToArray(_ref14.movement, 2),
+      my = _ref14$movement[1],
+      _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
+      vy = _ref14$velocity[1];
     var damper = 0.5;
     var windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
     var delta = windowHeight > 0 ? Math.abs(my) / windowHeight : 0;
@@ -329,10 +343,6 @@ function KeypadScreen(_ref) {
       document.removeEventListener('mouseup', handleClickOutside);
     };
   }, [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup]);
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    popupDragDisabled = _useState8[0],
-    setPopupDragDisabled = _useState8[1];
   var onPopupScrollBottom = useCallback(function () {
     setPopupDragDisabled(false);
   }, [setPopupDragDisabled]);
@@ -351,10 +361,12 @@ function KeypadScreen(_ref) {
   var onTap = useCallback(function () {
     onCloseModal(showPopup);
   }, [onCloseModal, showPopup]);
+  var onResolve = useCallback(function () {}, []);
   var _useDragProgress = useDragProgress({
       disabled: !isView || popupDragDisabled,
       progress: showPopup ? 0 : 1,
       computeProgress: computePopupProgress,
+      onResolve: onResolve,
       springParams: {
         config: {
           tension: 300,
@@ -369,7 +381,16 @@ function KeypadScreen(_ref) {
       onTap: onTap
     }),
     bindPopupDrag = _useDragProgress.bind,
-    popupSpring = _useDragProgress.progress;
+    popupSpring = _useDragProgress.progress,
+    popupTransitioning = _useDragProgress.transitioning;
+
+  // Clear popup contents after close transition completes
+  useEffect(function () {
+    if (prevShowPopupRef.current && !showPopup && !popupTransitioning) {
+      setPopup(null);
+    }
+    prevShowPopupRef.current = showPopup;
+  }, [showPopup, popupTransitioning]);
   useEffect(function () {
     var keyup = function keyup(e) {
       if (e.key === 'Escape') {
@@ -385,43 +406,43 @@ function KeypadScreen(_ref) {
   }, [showPopup, onCloseModal]);
   var gridItems = useMemo(function () {
     return (items === null || items.length === 0 ? placeholders : items).map(function (item, index) {
-      var _ref13 = item || {},
-        _ref13$id = _ref13.id,
-        id = _ref13$id === void 0 ? null : _ref13$id,
-        _ref13$label = _ref13.label,
-        itemLabel = _ref13$label === void 0 ? null : _ref13$label,
-        _ref13$visual = _ref13.visual,
-        visual = _ref13$visual === void 0 ? null : _ref13$visual,
-        _ref13$boxStyle = _ref13.boxStyle,
-        boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
-        _ref13$heading = _ref13.heading,
-        heading = _ref13$heading === void 0 ? null : _ref13$heading,
-        _ref13$content = _ref13.content,
-        content = _ref13$content === void 0 ? null : _ref13$content,
-        _ref13$url = _ref13.url,
-        url = _ref13$url === void 0 ? null : _ref13$url,
-        _ref13$inWebView = _ref13.inWebView,
-        inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
-        _ref13$largeVisual = _ref13.largeVisual,
-        popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
-      var _ref14 = visual || {},
-        _ref14$url = _ref14.url,
-        visualUrl = _ref14$url === void 0 ? null : _ref14$url;
-      var _ref15 = heading || {},
-        _ref15$body = _ref15.body,
-        headingBody = _ref15$body === void 0 ? null : _ref15$body;
-      var _ref16 = content || {},
-        _ref16$body = _ref16.body,
-        contentBody = _ref16$body === void 0 ? null : _ref16$body;
+      var _ref15 = item || {},
+        _ref15$id = _ref15.id,
+        id = _ref15$id === void 0 ? null : _ref15$id,
+        _ref15$label = _ref15.label,
+        itemLabel = _ref15$label === void 0 ? null : _ref15$label,
+        _ref15$visual = _ref15.visual,
+        visual = _ref15$visual === void 0 ? null : _ref15$visual,
+        _ref15$boxStyle = _ref15.boxStyle,
+        boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
+        _ref15$heading = _ref15.heading,
+        heading = _ref15$heading === void 0 ? null : _ref15$heading,
+        _ref15$content = _ref15.content,
+        content = _ref15$content === void 0 ? null : _ref15$content,
+        _ref15$url = _ref15.url,
+        url = _ref15$url === void 0 ? null : _ref15$url,
+        _ref15$inWebView = _ref15.inWebView,
+        inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
+        _ref15$largeVisual = _ref15.largeVisual,
+        popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
+      var _ref16 = visual || {},
+        _ref16$url = _ref16.url,
+        visualUrl = _ref16$url === void 0 ? null : _ref16$url;
+      var _ref17 = heading || {},
+        _ref17$body = _ref17.body,
+        headingBody = _ref17$body === void 0 ? null : _ref17$body;
+      var _ref18 = content || {},
+        _ref18$body = _ref18.body,
+        contentBody = _ref18$body === void 0 ? null : _ref18$body;
       var finalLabel = isString(itemLabel) ? {
         body: itemLabel
       } : itemLabel || {};
-      var _ref17 = finalLabel || {},
-        _ref17$textStyle = _ref17.textStyle,
-        finalLabelTextStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
-      var _ref18 = finalLabel || {},
-        _ref18$body = _ref18.body,
-        finalBody = _ref18$body === void 0 ? null : _ref18$body;
+      var _ref19 = finalLabel || {},
+        _ref19$textStyle = _ref19.textStyle,
+        finalLabelTextStyle = _ref19$textStyle === void 0 ? null : _ref19$textStyle;
+      var _ref20 = finalLabel || {},
+        _ref20$body = _ref20.body,
+        finalBody = _ref20$body === void 0 ? null : _ref20$body;
       var key = finalBody || visualUrl || id;
       var itemIsEmpty = finalBody === null && visual === null;
       var isExternalLink = url !== null && !inWebView;
@@ -462,17 +483,17 @@ function KeypadScreen(_ref) {
       setPopup(null);
       setShowPopup(false);
     }
-    if (screenState !== null && screenState.includes('popup')) {
+    if (screenState != null && screenState.includes('popup')) {
       var index = screenState.split('.').pop();
       var found = items[index];
       setPopup(found);
       setShowPopup(true);
     }
-    if (screenState === null && !isView) {
+    if (screenState == null && !isView) {
       setPopup(null);
       setShowPopup(false);
     }
-  }, [screenState, items, isView, showPopup, setPopup, setShowPopup]);
+  }, [screenState, items, isView]);
   return /*#__PURE__*/jsxs("div", {
     ref: containerRef,
     className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
@@ -519,7 +540,8 @@ function KeypadScreen(_ref) {
           verticalAlign: layout,
           width: width,
           style: !isPlaceholder ? {
-            padding: spacing,
+            paddingLeft: spacing,
+            paddingRight: spacing,
             paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
             paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
           } : null,
@@ -652,7 +674,9 @@ function KeypadScreen(_ref) {
                     videoClassName: styles.popupVisualVideo,
                     media: largeVisual,
                     resolution: resolution,
-                    width: "100%"
+                    ratio: largeVisualRatio,
+                    width: "100%",
+                    height: "auto"
                   }) : null
                 }), /*#__PURE__*/jsx(ScreenElement, {
                   placeholder: "button",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.4.52",
+    "version": "0.4.55",
     "private": false,
     "description": "",
     "keywords": [
@@ -66,22 +66,22 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.52",
-        "@micromag/element-background": "^0.4.52",
-        "@micromag/element-button": "^0.4.52",
-        "@micromag/element-call-to-action": "^0.4.52",
-        "@micromag/element-container": "^0.4.52",
-        "@micromag/element-footer": "^0.4.52",
-        "@micromag/element-grid": "^0.4.52",
-        "@micromag/element-header": "^0.4.52",
-        "@micromag/element-heading": "^0.4.52",
-        "@micromag/element-keypad": "^0.4.52",
-        "@micromag/element-layout": "^0.4.52",
-        "@micromag/element-scroll": "^0.4.52",
-        "@micromag/element-text": "^0.4.52",
-        "@micromag/element-urbania-author": "^0.4.52",
-        "@micromag/element-visual": "^0.4.52",
-        "@micromag/transforms": "^0.4.52",
+        "@micromag/core": "^0.4.55",
+        "@micromag/element-background": "^0.4.55",
+        "@micromag/element-button": "^0.4.55",
+        "@micromag/element-call-to-action": "^0.4.55",
+        "@micromag/element-container": "^0.4.55",
+        "@micromag/element-footer": "^0.4.55",
+        "@micromag/element-grid": "^0.4.55",
+        "@micromag/element-header": "^0.4.55",
+        "@micromag/element-heading": "^0.4.55",
+        "@micromag/element-keypad": "^0.4.55",
+        "@micromag/element-layout": "^0.4.55",
+        "@micromag/element-scroll": "^0.4.55",
+        "@micromag/element-text": "^0.4.55",
+        "@micromag/element-urbania-author": "^0.4.55",
+        "@micromag/element-visual": "^0.4.55",
+        "@micromag/transforms": "^0.4.55",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
@@ -94,6 +94,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "7e9283049e6904a73ed2c8ac47b2e45465823656",
+    "gitHead": "9708f0016de0cf18dcd6a6aa5bc70d7f00b86d9f",
     "types": "es/index.d.ts"
 }