@atlaskit/popup 1.30.2 → 1.30.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/popup
 
+## 1.30.3
+
+### Patch Changes
+
+- [#181817](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/181817)
+  [`6876e5688ed14`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6876e5688ed14) -
+  Dropdown open in iframe should be closed when clicking outside of the iframe
+
 ## 1.30.2
 
 ### Patch Changes

package/dist/cjs/use-close-manager.js

@@ -34,6 +34,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     if (!isOpen || !popupRef) {
       return _noop.default;
     }
+    var inIframe = window && window.self !== window.top && (0, _platformFeatureFlags.fg)('fix-dropdown-close-outside-iframe');
     var closePopup = function closePopup(event) {
       if (onClose) {
         if ((0, _platformFeatureFlags.fg)('sibling-dropdown-close-issue')) {
@@ -68,7 +69,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     var onClick = function onClick(event) {
       var target = event.target;
       var doesDomNodeExist = document.body.contains(target);
-      if (!doesDomNodeExist) {
+      if (!doesDomNodeExist && !inIframe) {
         return;
       }
       if (isLayerDisabled()) {
@@ -175,6 +176,18 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
         }
       }
     };
+    var parentUnbind;
+    // if the popup is inside iframe, we want to listen to click events outside iframe,
+    // to close the popup correctly in the iframe.
+    if (inIframe && isOpen) {
+      parentUnbind = (0, _bindEventListener.bind)(window.parent.window, {
+        type: 'click',
+        listener: onClick,
+        options: {
+          capture: capture
+        }
+      });
+    }
     var unbind = (0, _bindEventListener.bindAll)(window, [{
       type: 'click',
       listener: onClick,
@@ -198,8 +211,10 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       }
     });
     return function () {
+      var _parentUnbind;
       cancelAllFrames();
       unbind();
+      (_parentUnbind = parentUnbind) === null || _parentUnbind === void 0 || _parentUnbind();
       unbindBlur();
     };
   }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);

package/dist/es2019/use-close-manager.js

@@ -29,6 +29,7 @@ export const useCloseManager = ({
     if (!isOpen || !popupRef) {
       return noop;
     }
+    const inIframe = window && window.self !== window.top && fg('fix-dropdown-close-outside-iframe');
     const closePopup = event => {
       if (onClose) {
         if (fg('sibling-dropdown-close-issue')) {
@@ -65,7 +66,7 @@ export const useCloseManager = ({
         target
       } = event;
       const doesDomNodeExist = document.body.contains(target);
-      if (!doesDomNodeExist) {
+      if (!doesDomNodeExist && !inIframe) {
         return;
       }
       if (isLayerDisabled()) {
@@ -176,6 +177,18 @@ export const useCloseManager = ({
         }
       }
     };
+    let parentUnbind;
+    // if the popup is inside iframe, we want to listen to click events outside iframe,
+    // to close the popup correctly in the iframe.
+    if (inIframe && isOpen) {
+      parentUnbind = bind(window.parent.window, {
+        type: 'click',
+        listener: onClick,
+        options: {
+          capture
+        }
+      });
+    }
     const unbind = bindAll(window, [{
       type: 'click',
       listener: onClick,
@@ -199,8 +212,10 @@ export const useCloseManager = ({
       }
     });
     return () => {
+      var _parentUnbind;
       cancelAllFrames();
       unbind();
+      (_parentUnbind = parentUnbind) === null || _parentUnbind === void 0 ? void 0 : _parentUnbind();
       unbindBlur();
     };
   }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);

package/dist/esm/use-close-manager.js

@@ -26,6 +26,7 @@ export var useCloseManager = function useCloseManager(_ref) {
     if (!isOpen || !popupRef) {
       return noop;
     }
+    var inIframe = window && window.self !== window.top && fg('fix-dropdown-close-outside-iframe');
     var closePopup = function closePopup(event) {
       if (onClose) {
         if (fg('sibling-dropdown-close-issue')) {
@@ -60,7 +61,7 @@ export var useCloseManager = function useCloseManager(_ref) {
     var onClick = function onClick(event) {
       var target = event.target;
       var doesDomNodeExist = document.body.contains(target);
-      if (!doesDomNodeExist) {
+      if (!doesDomNodeExist && !inIframe) {
         return;
       }
       if (isLayerDisabled()) {
@@ -167,6 +168,18 @@ export var useCloseManager = function useCloseManager(_ref) {
         }
       }
     };
+    var parentUnbind;
+    // if the popup is inside iframe, we want to listen to click events outside iframe,
+    // to close the popup correctly in the iframe.
+    if (inIframe && isOpen) {
+      parentUnbind = bind(window.parent.window, {
+        type: 'click',
+        listener: onClick,
+        options: {
+          capture: capture
+        }
+      });
+    }
     var unbind = bindAll(window, [{
       type: 'click',
       listener: onClick,
@@ -190,8 +203,10 @@ export var useCloseManager = function useCloseManager(_ref) {
       }
     });
     return function () {
+      var _parentUnbind;
       cancelAllFrames();
       unbind();
+      (_parentUnbind = parentUnbind) === null || _parentUnbind === void 0 || _parentUnbind();
       unbindBlur();
     };
   }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.30.2",
+	"version": "1.30.3",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -123,6 +123,9 @@
 		},
 		"platform-design-system-apply-popup-wrapper-focus": {
 			"type": "boolean"
+		},
+		"fix-dropdown-close-outside-iframe": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"