@micromag/screen-keypad 0.3.362 → 0.3.370

package/es/index.js

@@ -6,13 +6,13 @@ import { animated } from '@react-spring/web';
 import camelCase from 'camelcase';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { PlaceholderImage, PlaceholderText, ScreenElement, PlaceholderButton } from '@micromag/core/components';
-import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext } from '@micromag/core/contexts';
+import { ScreenElement, PlaceholderButton } 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';
 import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
-import Background, { Background as Background$1 } from '@micromag/element-background';
+import Background from '@micromag/element-background';
 import Button from '@micromag/element-button';
 import CallToAction from '@micromag/element-call-to-action';
 import Container from '@micromag/element-container';
@@ -25,7 +25,7 @@ import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"popupButton":"micromag-screen-keypad-popupButton","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","contentBottom":"micromag-screen-keypad-contentBottom","popupCTA":"micromag-screen-keypad-popupCTA","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
+var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
 
 var placeholders = [{
   id: '1'
@@ -96,6 +96,7 @@ var propTypes = {
     visual: PropTypes$1.visualElement,
     boxStyle: PropTypes$1.boxStyle
   })),
+  title: PropTypes$1.headingElement,
   layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
   spacing: PropTypes.number,
   keypadSettings: PropTypes.shape({
@@ -126,6 +127,7 @@ var propTypes = {
 };
 var defaultProps = {
   items: null,
+  title: null,
   layout: null,
   spacing: 20,
   keypadSettings: null,
@@ -139,8 +141,9 @@ var defaultProps = {
   className: null
 };
 var KeypadScreen = function KeypadScreen(_ref) {
-  var _ref18;
+  var _ref20;
   var items = _ref.items,
+    title = _ref.title,
     layout = _ref.layout,
     spacing = _ref.spacing,
     keypadSettings = _ref.keypadSettings,
@@ -152,6 +155,8 @@ var KeypadScreen = function KeypadScreen(_ref) {
     current = _ref.current,
     active = _ref.active,
     className = _ref.className;
+  var containerRef = useRef(null);
+  var popupInnerRef = useRef(null);
   var trackScreenEvent = useTrackScreenEvent('keypad');
   var _usePlaybackContext = usePlaybackContext(),
     muted = _usePlaybackContext.muted;
@@ -167,6 +172,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
     viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
   var _useViewerWebView = useViewerWebView(),
     openWebView = _useViewerWebView.open;
+  var _useViewerInteraction = useViewerInteraction(),
+    enableInteraction = _useViewerInteraction.enableInteraction,
+    disableInteraction = _useViewerInteraction.disableInteraction;
   var _useScreenRenderConte = useScreenRenderContext(),
     isView = _useScreenRenderConte.isView,
     isPreview = _useScreenRenderConte.isPreview,
@@ -180,6 +188,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
     openWebView: openWebView,
     isPreview: isPreview
   });
+  var hasTitle = isTextFilled(title);
+  var _ref2 = title || {},
+    _ref2$textStyle = _ref2.textStyle,
+    titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
   var _useDimensionObserver = useDimensionObserver(),
     headerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
@@ -191,36 +203,41 @@ var KeypadScreen = function KeypadScreen(_ref) {
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = !isPlaceholder && (current || active);
   var isInteractivePreview = isEdit && screenState === null;
-  var _ref2 = keypadSettings || {},
-    _ref2$layout = _ref2.layout,
-    keypadLayout = _ref2$layout === void 0 ? null : _ref2$layout;
-  var _ref3 = keypadLayout || {},
-    _ref3$columnAlign = _ref3.columnAlign,
-    columnAlign = _ref3$columnAlign === void 0 ? null : _ref3$columnAlign,
-    _ref3$columns = _ref3.columns,
-    columns = _ref3$columns === void 0 ? null : _ref3$columns,
-    _ref3$spacing = _ref3.spacing,
-    columnSpacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
-    _ref3$withSquareItems = _ref3.withSquareItems,
-    withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
-  var _ref4 = buttonStyles || {},
-    _ref4$layout = _ref4.layout,
-    buttonLayout = _ref4$layout === void 0 ? null : _ref4$layout,
-    _ref4$textStyle = _ref4.textStyle,
-    buttonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
-    _ref4$boxStyle = _ref4.boxStyle,
-    buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle;
-  var _ref5 = popupStyles || {},
+  var _ref3 = keypadSettings || {},
+    _ref3$layout = _ref3.layout,
+    keypadLayout = _ref3$layout === void 0 ? null : _ref3$layout;
+  var _ref4 = keypadLayout || {},
+    _ref4$columnAlign = _ref4.columnAlign,
+    columnAlign = _ref4$columnAlign === void 0 ? null : _ref4$columnAlign,
+    _ref4$columns = _ref4.columns,
+    columns = _ref4$columns === void 0 ? null : _ref4$columns,
+    _ref4$spacing = _ref4.spacing,
+    columnSpacing = _ref4$spacing === void 0 ? null : _ref4$spacing,
+    _ref4$withSquareItems = _ref4.withSquareItems,
+    withSquareItems = _ref4$withSquareItems === void 0 ? false : _ref4$withSquareItems;
+  var _ref5 = buttonStyles || {},
     _ref5$layout = _ref5.layout,
-    popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
-    _ref5$backdrop = _ref5.backdrop,
-    popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
-    _ref5$headingTextStyl = _ref5.headingTextStyle,
-    headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
-    _ref5$contentTextStyl = _ref5.contentTextStyle,
-    contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
+    buttonLayout = _ref5$layout === void 0 ? null : _ref5$layout,
+    _ref5$textStyle = _ref5.textStyle,
+    buttonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
     _ref5$boxStyle = _ref5.boxStyle,
-    popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
+    buttonBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
+  var _ref6 = popupStyles || {},
+    _ref6$layout = _ref6.layout,
+    popupLayout = _ref6$layout === void 0 ? null : _ref6$layout,
+    _ref6$headingTextStyl = _ref6.headingTextStyle,
+    headingTextStyle = _ref6$headingTextStyl === void 0 ? null : _ref6$headingTextStyl,
+    _ref6$contentTextStyl = _ref6.contentTextStyle,
+    contentTextStyle = _ref6$contentTextStyl === void 0 ? null : _ref6$contentTextStyl,
+    _ref6$button = _ref6.button,
+    popupButtons = _ref6$button === void 0 ? null : _ref6$button,
+    _ref6$boxStyle = _ref6.boxStyle,
+    popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
+  var _ref7 = popupButtons || {},
+    _ref7$buttonTextStyle = _ref7.buttonTextStyle,
+    popupButtonsTextStyle = _ref7$buttonTextStyle === void 0 ? null : _ref7$buttonTextStyle,
+    _ref7$boxStyle = _ref7.boxStyle,
+    popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
   var popupLayoutClassName = useMemo(function () {
     return popupLayout !== null ? camelCase(popupLayout) : '';
   }, [popupLayout]);
@@ -232,45 +249,40 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     popup = _useState4[0],
     setPopup = _useState4[1];
-  var _ref6 = popup || {},
-    _ref6$heading = _ref6.heading,
-    popupHeading = _ref6$heading === void 0 ? null : _ref6$heading,
-    _ref6$content = _ref6.content,
-    popupContent = _ref6$content === void 0 ? null : _ref6$content,
-    _ref6$largeVisual = _ref6.largeVisual,
-    largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual,
-    _ref6$button = _ref6.button,
-    popupButton = _ref6$button === void 0 ? null : _ref6$button;
+  var _ref8 = popup || {},
+    _ref8$heading = _ref8.heading,
+    popupHeading = _ref8$heading === void 0 ? null : _ref8$heading,
+    _ref8$content = _ref8.content,
+    popupContent = _ref8$content === void 0 ? null : _ref8$content,
+    _ref8$largeVisual = _ref8.largeVisual,
+    largeVisual = _ref8$largeVisual === void 0 ? null : _ref8$largeVisual,
+    _ref8$button = _ref8.button,
+    popupButton = _ref8$button === void 0 ? null : _ref8$button;
   var hasPopupHeading = isTextFilled(popupHeading);
-  var _ref7 = popupHeading || {},
-    _ref7$textStyle = _ref7.textStyle,
-    popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
+  var _ref9 = popupHeading || {},
+    _ref9$textStyle = _ref9.textStyle,
+    popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
   var hasPopupContent = isTextFilled(popupContent);
-  var _ref8 = popupContent || {},
-    _ref8$textStyle = _ref8.textStyle,
-    popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
-  var _ref9 = popupBackdrop || {},
-    _ref9$color = _ref9.color,
-    backdropColor = _ref9$color === void 0 ? null : _ref9$color,
-    _ref9$image = _ref9.image,
-    backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
-  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 _ref10 = popupContent || {},
+    _ref10$textStyle = _ref10.textStyle,
+    popupContentTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
+  var _ref11 = popupButton || {},
+    _ref11$label = _ref11.label,
+    buttonLabel = _ref11$label === void 0 ? null : _ref11$label,
+    _ref11$url = _ref11.url,
+    buttonUrl = _ref11$url === void 0 ? null : _ref11$url,
+    _ref11$inWebView = _ref11.inWebView,
+    popupInWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
+    _ref11$boxStyle = _ref11.boxStyle,
+    popupButtonBoxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle;
   var onItemClick = useCallback(function (e, item) {
-    var _ref11 = item || {},
-      _ref11$inWebView = _ref11.inWebView,
-      inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
-      _ref11$url = _ref11.url,
-      url = _ref11$url === void 0 ? null : _ref11$url;
     e.stopPropagation();
     trackScreenEvent('click_item', item);
+    var _ref12 = item || {},
+      _ref12$inWebView = _ref12.inWebView,
+      inWebView = _ref12$inWebView === void 0 ? false : _ref12$inWebView,
+      _ref12$url = _ref12.url,
+      url = _ref12$url === void 0 ? null : _ref12$url;
     if (inWebView && url !== null) {
       openWebView({
         url: url
@@ -278,33 +290,80 @@ var KeypadScreen = function KeypadScreen(_ref) {
       return;
     }
     setPopup(item);
-    setShowPopup(1);
-  }, [setPopup, trackScreenEvent]);
+    setShowPopup(true);
+  }, [disableInteraction, setPopup, trackScreenEvent]);
   var onCloseModal = useCallback(function () {
-    setShowPopup(0);
+    setShowPopup(false);
     trackScreenEvent('close_modal');
-  }, [setShowPopup]);
-  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];
+  }, [enableInteraction, setShowPopup, trackScreenEvent]);
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    popupDragDirection = _useState6[0],
+    setPopupDragDirection = _useState6[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 (_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 p = Math.max(0, my) / window.innerHeight;
-    var progress = p * damper;
-    var reachedThreshold = vy > 0.3 || Math.abs(p) > 0.3;
+    var delta = Math.abs(my) / window.innerHeight;
+    var reachedThreshold = vy > 1 || delta > 0.3;
+    var progress = 0;
+    if (popupDragDirection === 'top' && my < 0) {
+      progress = delta * damper * -1;
+    } else if (popupDragDirection === 'bottom' && my > 0) {
+      progress = delta * damper;
+    }
     if (!dragActive) {
       if (reachedThreshold) {
         onCloseModal();
+        return 1;
+      }
+      return 0;
+    }
+    return progress;
+  }, [onCloseModal, popupDragDirection]);
+  useEffect(function () {
+    if (showPopup) {
+      disableInteraction();
+    } else {
+      enableInteraction();
+    }
+  }, [showPopup]);
+  useEffect(function () {
+    function handleClickOutside(event) {
+      if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(event.target) && containerRef.current && containerRef.current.contains(event.target) && !isInteractivePreview && !isEdit && showPopup) {
+        onCloseModal();
       }
-      return reachedThreshold ? 0 : 1;
     }
-    return 1 - progress;
-  }, [onCloseModal]);
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', 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]);
+  var onPopupScrollNotBottom = useCallback(function () {
+    setPopupDragDisabled(true);
+  }, [setPopupDragDisabled]);
   var _useDragProgress = useDragProgress({
-      disabled: !isView,
-      progress: showPopup ? 1 : 0,
+      disabled: !isView || popupDragDisabled,
+      progress: showPopup ? 0 : 1,
       computeProgress: computePopupProgress,
       springParams: {
         config: {
@@ -318,7 +377,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
   useEffect(function () {
     var keyup = function keyup(e) {
       if (e.key === 'Escape') {
-        if (showPopup === 1) {
+        if (showPopup) {
           onCloseModal();
         }
       }
@@ -330,37 +389,37 @@ var KeypadScreen = function KeypadScreen(_ref) {
   }, [showPopup, onCloseModal]);
   var gridItems = useMemo(function () {
     return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
-      var _ref17;
-      var _ref13 = item || {},
-        _ref13$id = _ref13.id,
-        id = _ref13$id === void 0 ? null : _ref13$id,
-        _ref13$label = _ref13.label,
-        label = _ref13$label === void 0 ? null : _ref13$label,
-        _ref13$visual = _ref13.visual,
-        visual = _ref13$visual === void 0 ? null : _ref13$visual,
-        _ref13$textStyle = _ref13.textStyle,
-        textStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
-        _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 _ref19;
+      var _ref15 = item || {},
+        _ref15$id = _ref15.id,
+        id = _ref15$id === void 0 ? null : _ref15$id,
+        _ref15$label = _ref15.label,
+        label = _ref15$label === void 0 ? null : _ref15$label,
+        _ref15$visual = _ref15.visual,
+        visual = _ref15$visual === void 0 ? null : _ref15$visual,
+        _ref15$textStyle = _ref15.textStyle,
+        textStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle,
+        _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 key = label || visualUrl || id;
       var isEmpty = label === null && visual === null;
       var isExternalLink = url !== null && !inWebView;
@@ -369,18 +428,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
         key: key,
         className: styles.item
       }, /*#__PURE__*/React.createElement(Button, {
-        className: classNames([styles.button, (_ref17 = {}, _defineProperty(_ref17, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref17, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref17, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref17, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref17, styles.isEmpty, isEmpty), _defineProperty(_ref17, styles.isLink, url !== null), _defineProperty(_ref17, styles.disableHover, isPopupEmpty && url === null), _ref17)]),
+        className: classNames([styles.button, (_ref19 = {}, _defineProperty(_ref19, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref19, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref19, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref19, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref19, styles.isEmpty, isEmpty), _defineProperty(_ref19, styles.isLink, url !== null), _defineProperty(_ref19, styles.disableHover, isPopupEmpty && url === null), _ref19)]),
         style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
         external: isExternalLink,
         href: isExternalLink ? url : null,
-        onClick: !isPopupEmpty || !isExternalLink ? function (e) {
+        onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
           return onItemClick(e, item);
         } : null
-      }, isEmpty && (isInteractivePreview || isPreview) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PlaceholderImage, {
-        className: styles.imagePlaceholder
-      }), /*#__PURE__*/React.createElement(PlaceholderText, {
-        lines: 2
-      })) : /*#__PURE__*/React.createElement(React.Fragment, null, visual !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement(ScreenElement, {
+      }, /*#__PURE__*/React.createElement(ScreenElement, {
         emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
           id: "Qanvis",
           defaultMessage: [{
@@ -390,12 +445,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
         }),
         emptyClassName: classNames([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
         isEmpty: visual === null
-      }, /*#__PURE__*/React.createElement(Visual, {
+      }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
         className: styles.buttonVisual,
         imageClassName: styles.thumbnail,
         media: visual,
         width: "auto"
-      })) : null, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement(ScreenElement, {
+      }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
         placeholder: /*#__PURE__*/React.createElement(PlaceholderButton, null),
         emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
           id: "Zbu5Uk",
@@ -406,33 +461,34 @@ var KeypadScreen = function KeypadScreen(_ref) {
         }),
         emptyClassName: classNames([styles.empty, styles.emptyButtonLabel]),
         isEmpty: label === null
-      }, /*#__PURE__*/React.createElement("div", {
+      }, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement("div", {
         className: styles.buttonLabel
-      }, label)) : null)));
+      }, label) : null)));
     });
   }, [items, screenState, keypadSettings]);
   useEffect(function () {
     if (screenState === 'popup' && isPlaceholder) {
       setPopup(placeholderPopupBoxStyles); // @note force placeholder
-      setShowPopup(1);
+      setShowPopup(true);
     }
     if (screenState === 'keypad') {
       setPopup(null);
-      setShowPopup(0);
+      setShowPopup(false);
     }
     if (screenState !== null && screenState.includes('popup')) {
       var index = screenState.split('.').pop();
       var found = items[index];
-      setShowPopup(1);
       setPopup(found);
+      setShowPopup(true);
     }
     if (screenState === null) {
-      setShowPopup(0);
       setPopup(null);
+      setShowPopup(false);
     }
   }, [screenState, items]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref18 = {}, _defineProperty(_ref18, className, className !== null), _defineProperty(_ref18, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref18, styles.withSquareItems, withSquareItems), _ref18)]),
+    ref: containerRef,
+    className: classNames([styles.container, (_ref20 = {}, _defineProperty(_ref20, className, className !== null), _defineProperty(_ref20, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref20, styles.withSquareItems, withSquareItems), _ref20)]),
     "data-screen-ready": true
   }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
@@ -452,10 +508,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
     width: width,
     height: height,
     verticalAlign: layout,
-    disabled: isPreview || isPlaceholder || isEdit || showPopup !== 0
+    withArrow: !showPopup,
+    disabled: isPreview || isPlaceholder || showPopup
   }, /*#__PURE__*/React.createElement(Layout, {
     className: styles.layout,
     verticalAlign: layout,
+    width: width,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
@@ -471,7 +529,22 @@ var KeypadScreen = function KeypadScreen(_ref) {
       paddingBottom: spacing,
       transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Keypad$1, {
+  }, /*#__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.emptyHeading]),
+    isEmpty: !hasTitle
+  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
+    className: styles.title
+  }, title, {
+    textStyle: _objectSpread(_objectSpread({}, headingTextStyle), getStyleFromText(titleTextStyle))
+  })) : null), /*#__PURE__*/React.createElement(Keypad$1, {
     className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
     align: columnAlign,
     columns: isPlaceholder ? 3 : columns,
@@ -487,52 +560,40 @@ var KeypadScreen = function KeypadScreen(_ref) {
       paddingBottom: spacing / 2,
       paddingTop: spacing
     }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), /*#__PURE__*/React.createElement(animated.div, {
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), popup !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(animated.div, {
     className: classNames([styles.popupBackdrop]),
     style: {
       opacity: popupSpring.to(function (p) {
-        return p;
+        return 1 - Math.abs(p);
       })
     }
-  }, /*#__PURE__*/React.createElement(Background$1, {
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    media: backdropMedia,
-    color: backdropColor,
-    muted: true
-  })), /*#__PURE__*/React.createElement(animated.div, Object.assign({
+  }), /*#__PURE__*/React.createElement(animated.div, Object.assign({
     className: styles.popup,
     style: {
       transform: popupSpring.to(function (p) {
-        return "translateY(".concat(100 * (1 - (p < 0.2 ? 0.1 * p + p : p)), "%)");
+        return "translateY(".concat(100 * p
+        // 100 * (1 - (p < 0.2 && p > -0.2 ? 0.1 * p + p : p))
+        , "%) scale(").concat(1 - Math.abs(p * 0.5), ")");
       }),
       pointerEvents: popupSpring.to(function (p) {
-        return p < 0.1 ? 'none' : 'auto';
+        return Math.abs(p) > 0.5 ? 'none' : 'auto';
       })
     }
-  }, bindPopupDrag(), {
-    onClick: function onClick() {
-      if (onCloseModal !== null) {
-        onCloseModal();
-      }
-    }
-  }), /*#__PURE__*/React.createElement(Scroll, {
-    disabled: isPreview || isPlaceholder || isEdit,
+  }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, {
+    disabled: isPreview || isPlaceholder,
     verticalAlign: "middle",
     withArrow: false,
+    scrollPosition: !showPopup ? 1 : null,
+    onScrolledBottom: onPopupScrollBottom,
+    onScrolledNotBottom: onPopupScrollNotBottom,
+    onScrollHeightChange: onPopupScrollHeightChange,
+    className: styles.popupScroll,
     withShadow: true
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles.popupButton
   }, /*#__PURE__*/React.createElement("div", {
+    ref: popupInnerRef,
     className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
     style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.popupWrapper
   }, /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: "popupHeading",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "IE7U/Q",
       defaultMessage: [{
@@ -559,9 +620,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
     isEmpty: !hasPopupContent
   }, hasPopupContent ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.popupContent
+    // @TODO: There's a styles clash here, check if there's more elsewhere
   }, popupContent, {
     textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
-  })) : null), largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
+  })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
     placeholder: "image",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "z4Pr+g",
@@ -572,11 +634,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
     }),
     emptyClassName: classNames([styles.empty, styles.emptyVisual]),
     isEmpty: largeVisual === null
-  }, /*#__PURE__*/React.createElement(Visual, {
+  }, largeVisual !== null ? /*#__PURE__*/React.createElement(Visual, {
     className: styles.popupVisual,
     media: largeVisual,
     width: "100%"
-  })) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+  }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
     placeholder: "button",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "N7Kj8z",
@@ -585,18 +647,22 @@ var KeypadScreen = function KeypadScreen(_ref) {
         "value": "Button"
       }]
     }),
-    emptyClassName: classNames([styles.empty]),
+    emptyClassName: classNames([styles.empty, styles.emptyCTA]),
     isEmpty: popupButton === null
   }, popupButton !== null ? /*#__PURE__*/React.createElement(CallToAction, {
     className: styles.popupCTA,
-    label: buttonLabel,
+    label: _objectSpread(_objectSpread({}, popupButtonsTextStyle), buttonLabel),
     url: buttonUrl,
     inWebView: popupInWebView,
     openWebView: openWebView,
     type: "click",
-    boxStyle: popupButtonBoxStyle,
-    style: _objectSpread({}, getStyleFromBox(popupButtonBoxStyle))
-  }) : null)))))))));
+    boxStyle: _objectSpread(_objectSpread({}, popupButtonsBoxStyle), popupButtonBoxStyle)
+    // style={{
+    //     ...getStyleFromText(popupButtonsTextStyle),
+    //     ...getStyleFromBox(popupButtonsBoxStyle),
+    //     ...getStyleFromBox(popupButtonBoxStyle),
+    // }}
+  }) : null))))) : null)));
 };
 KeypadScreen.propTypes = propTypes;
 KeypadScreen.defaultProps = defaultProps;
@@ -701,7 +767,6 @@ var definition = [{
       fields: [{
         name: 'layout',
         type: 'button-layout',
-        isHorizontal: true,
         label: defineMessage({
           id: "OPxJx/",
           defaultMessage: [{
@@ -778,23 +843,44 @@ var definition = [{
           }]
         })
       }, {
-        name: 'boxStyle',
-        type: 'box-style-form',
+        name: 'button',
+        type: 'fields',
         label: defineMessage({
-          id: "p1pghO",
+          id: "i6bmbD",
           defaultMessage: [{
             "type": 0,
-            "value": "Box style"
+            "value": "Button"
           }]
-        })
+        }),
+        fields: [{
+          name: 'buttonTextStyle',
+          type: 'text-style-form',
+          label: defineMessage({
+            id: "p5RHzq",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Button text style"
+            }]
+          })
+        }, {
+          name: 'buttonStyle',
+          type: 'box-style-form',
+          label: defineMessage({
+            id: "nno1Pq",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Button style"
+            }]
+          })
+        }]
       }, {
-        name: 'backdrop',
-        type: 'background',
+        name: 'boxStyle',
+        type: 'box-style-form',
         label: defineMessage({
-          id: "cDj1mZ",
+          id: "p1pghO",
           defaultMessage: [{
             "type": 0,
-            "value": "Background"
+            "value": "Box style"
           }]
         })
       }]
@@ -854,6 +940,19 @@ var definition = [{
     }]
   }],
   fields: [{
+    name: 'title',
+    type: 'heading-element',
+    theme: {
+      textStyle: 'heading1'
+    },
+    label: defineMessage({
+      id: "N25iDO",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
     name: 'background',
     type: 'background',
     label: defineMessage({