@micromag/screen-keypad 0.4.52 → 0.4.54

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,14 @@ 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 _ref7 = popup || {},
     _ref7$heading = _ref7.heading,
     popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
@@ -271,10 +275,10 @@ function KeypadScreen(_ref) {
       e.stopPropagation();
     }
   }, []);
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    popupDragDirection = _useState6[0],
-    setPopupDragDirection = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    popupDragDirection = _useState8[0],
+    setPopupDragDirection = _useState8[1];
   var onPopupScrollHeightChange = useCallback(function (_ref11) {
     var _ref11$scrolleeHeight = _ref11.scrolleeHeight,
       scrolleeHeight = _ref11$scrolleeHeight === void 0 ? 0 : _ref11$scrolleeHeight;
@@ -329,10 +333,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 +351,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 +371,15 @@ function KeypadScreen(_ref) {
       onTap: onTap
     }),
     bindPopupDrag = _useDragProgress.bind,
-    popupSpring = _useDragProgress.progress;
+    popupSpring = _useDragProgress.progress,
+    popupTransitioning = _useDragProgress.transitioning;
+
+  // Clear popup
+  useEffect(function () {
+    if (!showPopup && !popupTransitioning && popup !== null) {
+      setPopup(null);
+    }
+  }, [showPopup, popupTransitioning, popup]);
   useEffect(function () {
     var keyup = function keyup(e) {
       if (e.key === 'Escape') {
@@ -462,17 +472,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 +529,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,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.4.52",
+    "version": "0.4.54",
     "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.54",
+        "@micromag/element-background": "^0.4.54",
+        "@micromag/element-button": "^0.4.54",
+        "@micromag/element-call-to-action": "^0.4.54",
+        "@micromag/element-container": "^0.4.54",
+        "@micromag/element-footer": "^0.4.54",
+        "@micromag/element-grid": "^0.4.54",
+        "@micromag/element-header": "^0.4.54",
+        "@micromag/element-heading": "^0.4.54",
+        "@micromag/element-keypad": "^0.4.54",
+        "@micromag/element-layout": "^0.4.54",
+        "@micromag/element-scroll": "^0.4.54",
+        "@micromag/element-text": "^0.4.54",
+        "@micromag/element-urbania-author": "^0.4.54",
+        "@micromag/element-visual": "^0.4.54",
+        "@micromag/transforms": "^0.4.54",
         "@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": "b7aacdebb4a5c2179a58d21ab2aaea5bcdc43d69",
     "types": "es/index.d.ts"
 }