@micromag/screen-keypad 0.4.55 → 0.4.57

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, useState, useMemo, useCallback, useEffect } from 'react';
+import { useRef, useState, useMemo, useEffect, useCallback } 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';
@@ -227,6 +227,18 @@ function KeypadScreen(_ref) {
     popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
     _ref10$boxStyle = _ref10.boxStyle,
     popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
+
+  // Skips a render loop when opening a popup
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showNextPopup = _useState8[0],
+    setShowNextPopup = _useState8[1];
+  useEffect(function () {
+    if (showNextPopup) {
+      setShowNextPopup(false);
+      setShowPopup(true);
+    }
+  }, [showNextPopup, setShowPopup, setShowNextPopup]);
   var onItemClick = useCallback(function (e, item, index) {
     e.stopPropagation();
     if (isNotInteractive) {
@@ -247,7 +259,7 @@ function KeypadScreen(_ref) {
       });
     } else {
       setPopup(item);
-      setShowPopup(true);
+      setShowNextPopup(true);
     }
     var _ref12 = heading || {},
       _ref12$body = _ref12.body,
@@ -285,10 +297,10 @@ function KeypadScreen(_ref) {
       e.stopPropagation();
     }
   }, []);
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    popupDragDirection = _useState8[0],
-    setPopupDragDirection = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    popupDragDirection = _useState0[0],
+    setPopupDragDirection = _useState0[1];
   var onPopupScrollHeightChange = useCallback(function (_ref13) {
     var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
       scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
@@ -387,6 +399,7 @@ function KeypadScreen(_ref) {
   // Clear popup contents after close transition completes
   useEffect(function () {
     if (prevShowPopupRef.current && !showPopup && !popupTransitioning) {
+      console.log('clear popup');
       setPopup(null);
     }
     prevShowPopupRef.current = showPopup;
@@ -593,7 +606,7 @@ function KeypadScreen(_ref) {
             spacing: isPlaceholder ? 2 : columnSpacing,
             items: gridItems
           })]
-        }), popup !== null ? /*#__PURE__*/jsxs(Fragment, {
+        }), /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(animated.div, {
             className: classNames([styles.popupBackdrop]),
             style: {
@@ -703,7 +716,7 @@ function KeypadScreen(_ref) {
               })
             })
           }))]
-        }) : null]
+        }) ]
       }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
         ref: footerRef,
         className: styles.footer,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.4.55",
+    "version": "0.4.57",
     "private": false,
     "description": "",
     "keywords": [
@@ -94,6 +94,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9708f0016de0cf18dcd6a6aa5bc70d7f00b86d9f",
+    "gitHead": "fbe8859ecf20634ed5591afb432ff4869eb37352",
     "types": "es/index.d.ts"
 }