@micromag/screen-keypad 0.3.829 → 0.3.830

package/es/index.js

@@ -12,7 +12,7 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
 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';
-import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromAlignment, getStyleFromBox } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromBox } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Button, { RichButton } from '@micromag/element-button';
 import CallToAction from '@micromag/element-call-to-action';
@@ -126,7 +126,6 @@ var KeypadScreen = function KeypadScreen(_ref) {
     subtitle = _ref.subtitle,
     layout = _ref.layout,
     spacing = _ref.spacing,
-    keypadSettings = _ref.keypadSettings,
     keypadLayout = _ref.keypadLayout,
     buttonStyles = _ref.buttonStyles,
     popupStyles = _ref.popupStyles,
@@ -190,50 +189,42 @@ var KeypadScreen = function KeypadScreen(_ref) {
   var mediaShouldLoad = !isPlaceholder && (current || preload);
   var isInteractivePreview = isEdit && screenState === null;
   var isNotInteractive = isEdit && screenState !== null;
-  var _ref3 = keypadSettings || {},
-    _ref3$layout = _ref3.layout,
-    oldLayout = _ref3$layout === void 0 ? null : _ref3$layout;
-  var _ref4 = keypadLayout || oldLayout || {},
-    _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; // Temp shim backwards compat
-
-  var _ref5 = buttonStyles || {},
+  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$labelBoxStyle = _ref4.labelBoxStyle,
+    buttonLabelBoxStyle = _ref4$labelBoxStyle === void 0 ? null : _ref4$labelBoxStyle,
+    _ref4$boxStyle = _ref4.boxStyle,
+    buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
+    _ref4$visualWidth = _ref4.visualWidth,
+    buttonVisualWidth = _ref4$visualWidth === void 0 ? null : _ref4$visualWidth;
+  var _ref5 = popupStyles || {},
     _ref5$layout = _ref5.layout,
-    buttonLayout = _ref5$layout === void 0 ? null : _ref5$layout,
-    _ref5$textStyle = _ref5.textStyle,
-    buttonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
-    _ref5$labelBoxStyle = _ref5.labelBoxStyle,
-    buttonLabelBoxStyle = _ref5$labelBoxStyle === void 0 ? null : _ref5$labelBoxStyle,
+    popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
+    _ref5$headingTextStyl = _ref5.headingTextStyle,
+    headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
+    _ref5$contentTextStyl = _ref5.contentTextStyle,
+    contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
+    _ref5$button = _ref5.button,
+    popupButtons = _ref5$button === void 0 ? null : _ref5$button,
     _ref5$boxStyle = _ref5.boxStyle,
-    buttonBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle,
-    _ref5$fillImage = _ref5.fillImage,
-    fillImage = _ref5$fillImage === void 0 ? false : _ref5$fillImage,
-    _ref5$visualWidth = _ref5.visualWidth,
-    buttonVisualWidth = _ref5$visualWidth === void 0 ? null : _ref5$visualWidth,
-    _ref5$alignment = _ref5.alignment,
-    buttonAlignment = _ref5$alignment === void 0 ? null : _ref5$alignment;
-  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,
+    popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
+  var _ref6 = popupButtons || {},
+    _ref6$buttonTextStyle = _ref6.buttonTextStyle,
+    popupButtonsTextStyle = _ref6$buttonTextStyle === void 0 ? null : _ref6$buttonTextStyle,
     _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;
+    popupButtonsBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
   var popupLayoutClassName = useMemo(function () {
     return popupLayout !== null ? camelCase(popupLayout) : '';
   }, [popupLayout]);
@@ -245,48 +236,48 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     popup = _useState4[0],
     setPopup = _useState4[1];
-  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,
-    _ref8$popupBoxStyle = _ref8.popupBoxStyle,
-    singlePopupBoxStyle = _ref8$popupBoxStyle === void 0 ? null : _ref8$popupBoxStyle;
+  var _ref7 = popup || {},
+    _ref7$heading = _ref7.heading,
+    popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
+    _ref7$content = _ref7.content,
+    popupContent = _ref7$content === void 0 ? null : _ref7$content,
+    _ref7$largeVisual = _ref7.largeVisual,
+    largeVisual = _ref7$largeVisual === void 0 ? null : _ref7$largeVisual,
+    _ref7$button = _ref7.button,
+    popupButton = _ref7$button === void 0 ? null : _ref7$button,
+    _ref7$popupBoxStyle = _ref7.popupBoxStyle,
+    singlePopupBoxStyle = _ref7$popupBoxStyle === void 0 ? null : _ref7$popupBoxStyle;
   var hasPopupHeading = isTextFilled(popupHeading);
-  var _ref9 = popupHeading || {},
-    _ref9$textStyle = _ref9.textStyle,
-    popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
+  var _ref8 = popupHeading || {},
+    _ref8$textStyle = _ref8.textStyle,
+    popupHeadingTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
   var hasPopupContent = isTextFilled(popupContent);
-  var _ref0 = popupContent || {},
-    _ref0$textStyle = _ref0.textStyle,
-    popupContentTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
-  var _ref1 = popupButton || {},
-    _ref1$label = _ref1.label,
-    buttonLabel = _ref1$label === void 0 ? null : _ref1$label,
-    _ref1$url = _ref1.url,
-    buttonUrl = _ref1$url === void 0 ? null : _ref1$url,
-    _ref1$inWebView = _ref1.inWebView,
-    popupInWebView = _ref1$inWebView === void 0 ? false : _ref1$inWebView,
-    _ref1$boxStyle = _ref1.boxStyle,
-    popupButtonBoxStyle = _ref1$boxStyle === void 0 ? null : _ref1$boxStyle;
+  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 onItemClick = useCallback(function (e, item, index) {
     e.stopPropagation();
     if (isNotInteractive) {
       return;
     }
-    var _ref10 = item || {},
-      _ref10$label = _ref10.label,
-      itemLabel = _ref10$label === void 0 ? null : _ref10$label,
-      _ref10$heading = _ref10.heading,
-      heading = _ref10$heading === void 0 ? null : _ref10$heading,
-      _ref10$inWebView = _ref10.inWebView,
-      inWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
-      _ref10$url = _ref10.url,
-      url = _ref10$url === void 0 ? null : _ref10$url;
+    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;
     if (inWebView && url !== null) {
       openWebView({
         url: url
@@ -295,9 +286,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
       setPopup(item);
       setShowPopup(true);
     }
-    var _ref11 = heading || {},
-      _ref11$body = _ref11.body,
-      headingBody = _ref11$body === void 0 ? null : _ref11$body;
+    var _ref10 = heading || {},
+      _ref10$body = _ref10.body,
+      headingBody = _ref10$body === void 0 ? null : _ref10$body;
     var finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
     trackScreenEvent('click_item', ["#".concat(index + 1), finalLabel || headingBody || ''].filter(function (it) {
       return !isEmpty(it);
@@ -334,21 +325,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     popupDragDirection = _useState6[0],
     setPopupDragDirection = _useState6[1];
-  var onPopupScrollHeightChange = useCallback(function (_ref12) {
-    var _ref12$scrolleeHeight = _ref12.scrolleeHeight,
-      scrolleeHeight = _ref12$scrolleeHeight === void 0 ? 0 : _ref12$scrolleeHeight;
+  var onPopupScrollHeightChange = useCallback(function (_ref11) {
+    var _ref11$scrolleeHeight = _ref11.scrolleeHeight,
+      scrolleeHeight = _ref11$scrolleeHeight === void 0 ? 0 : _ref11$scrolleeHeight;
     if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
       setPopupDragDirection('top');
     } else {
       setPopupDragDirection('bottom');
     }
   }, [height]);
-  var computePopupProgress = useCallback(function (_ref13) {
-    var dragActive = _ref13.active,
-      _ref13$movement = _slicedToArray(_ref13.movement, 2),
-      my = _ref13$movement[1],
-      _ref13$velocity = _slicedToArray(_ref13.velocity, 2),
-      vy = _ref13$velocity[1];
+  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 damper = 0.5;
     var windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
     var delta = windowHeight > 0 ? Math.abs(my) / windowHeight : 0;
@@ -444,39 +435,40 @@ var KeypadScreen = function KeypadScreen(_ref) {
   }, [showPopup, onCloseModal]);
   var gridItems = useMemo(function () {
     return (items === null || items.length === 0 ? placeholders : items).map(function (item, index) {
-      var _ref14 = item || {},
-        _ref14$id = _ref14.id,
-        id = _ref14$id === void 0 ? null : _ref14$id,
-        _ref14$label = _ref14.label,
-        itemLabel = _ref14$label === void 0 ? null : _ref14$label,
-        _ref14$visual = _ref14.visual,
-        visual = _ref14$visual === void 0 ? null : _ref14$visual,
-        _ref14$boxStyle = _ref14.boxStyle,
-        boxStyle = _ref14$boxStyle === void 0 ? null : _ref14$boxStyle,
-        _ref14$alignment = _ref14.alignment,
-        alignment = _ref14$alignment === void 0 ? null : _ref14$alignment,
-        _ref14$heading = _ref14.heading,
-        heading = _ref14$heading === void 0 ? null : _ref14$heading,
-        _ref14$content = _ref14.content,
-        content = _ref14$content === void 0 ? null : _ref14$content,
+      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,
-        url = _ref14$url === void 0 ? null : _ref14$url,
-        _ref14$inWebView = _ref14.inWebView,
-        inWebView = _ref14$inWebView === void 0 ? false : _ref14$inWebView,
-        _ref14$largeVisual = _ref14.largeVisual,
-        popupLargeVisual = _ref14$largeVisual === void 0 ? null : _ref14$largeVisual;
-      var _ref15 = visual || {},
-        _ref15$url = _ref15.url,
-        visualUrl = _ref15$url === void 0 ? null : _ref15$url;
-      var _ref16 = heading || {},
+        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,
-        headingBody = _ref16$body === void 0 ? null : _ref16$body;
-      var _ref17 = content || {},
-        _ref17$body = _ref17.body,
-        contentBody = _ref17$body === void 0 ? null : _ref17$body;
+        contentBody = _ref16$body === void 0 ? null : _ref16$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;
@@ -489,15 +481,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
         className: styles.item
       }, /*#__PURE__*/React.createElement(RichButton, {
         className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty({}, styles.isEmpty, itemIsEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
-        layout: fillImage ? 'no-label' : buttonLayout,
+        layout: buttonLayout || null,
         external: isExternalLink,
         href: isExternalLink ? url : null,
         focusable: current,
         onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
           return onItemClick(e, item, index);
-        } : null,
-        style: _objectSpread({}, getStyleFromAlignment(alignment || buttonAlignment, true, 'flex-start')),
-        textStyle: buttonTextStyle,
+        } : null
+        // style={{
+        //     ...getStyleFromAlignment(alignment, true, 'flex-start'),
+        // }}
+        ,
+        textStyle: _objectSpread(_objectSpread({}, buttonTextStyle), finalLabelTextStyle),
         buttonStyle: _objectSpread(_objectSpread({}, buttonBoxStyle), boxStyle),
         label: finalLabel,
         labelBoxStyle: buttonLabelBoxStyle,
@@ -507,7 +502,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
         textClassName: styles.buttonLabel
       }));
     });
-  }, [items, screenState, keypadSettings, buttonAlignment, buttonBoxStyle, buttonTextStyle, buttonLayout, isNotInteractive]);
+  }, [items, screenState, buttonBoxStyle, buttonTextStyle, buttonLayout, isNotInteractive]);
   useEffect(function () {
     if (screenState === 'popup' && isPlaceholder) {
       setPopup(placeholderPopupBoxStyles); // @note force placeholder

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.3.829",
+    "version": "0.3.830",
     "private": false,
     "description": "",
     "keywords": [
@@ -95,5 +95,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "35fb9241ce6f9580397150bd05115f9a6f4048c8"
+    "gitHead": "555e4b0001885f8caab9588ec7b83d350275f3ee"
 }