@atlaskit/popup 1.30.1 → 1.30.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [#180699](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/180699)
+  [`ba9603c950de1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba9603c950de1) -
+  Clicking outside should close all popups
+
 ## 1.30.1
 
 ### Patch Changes

package/dist/cjs/popper-wrapper.js

@@ -23,7 +23,6 @@ var _repositionOnUpdate = require("./reposition-on-update");
 var _useCloseManager = require("./use-close-manager");
 var _useFocusManager = require("./use-focus-manager");
 var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "xcss"];
-var _css;
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -31,7 +30,7 @@ var _css;
 var fullWidthStyles = (0, _react2.css)({
   width: '100%'
 });
-var rootStyles = (0, _react2.css)((_css = {
+var rootStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   display: 'block',
   boxSizing: 'border-box',
   zIndex: _constants.layers.layer(),
@@ -42,9 +41,9 @@ var rootStyles = (0, _react2.css)((_css = {
   // Otherwise, when rendering into the parent (not using a portal),
   // the text color can be inherited from the parent.
   color: "var(--ds-text, #172B4D)"
-}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, '&:focus', {
+}, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), '&:focus', {
   outline: 'none'
-}), _css));
+}));
 var scrollableStyles = (0, _react2.css)({
   overflow: 'auto'
 });

package/dist/cjs/popup.js

@@ -125,7 +125,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var popupContent = (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
-      ref: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-20476-dropdown-menu') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
+      ref: !(0, _platformFeatureFlags.fg)('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock') ? 'dialog' : true

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()) {
@@ -76,19 +77,17 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
           if (target instanceof HTMLElement) {
             var _target$closest;
             var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
-            if (!layeredElement) {
-              // if no layered element, we disable the click event of disabled layers.
-              return;
-            }
-            var closeType = layeredElement.getAttribute('[data-ds--close--type]');
-            if (closeType === 'single') {
-              // if the close type is single, we won't close other disabled layers when clicking outside
-              return;
-            }
-            var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
-            if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
-              // won't trigger onClick event when we click in a higher layer.
-              return;
+            if (layeredElement) {
+              var closeType = layeredElement.getAttribute('[data-ds--close--type]');
+              if (closeType === 'single') {
+                // if the close type is single, we won't close other disabled layers when clicking outside
+                return;
+              }
+              var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
+              if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
+                // won't trigger onClick event when we click in a higher layer.
+                return;
+              }
             }
           }
         } else {
@@ -177,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,
@@ -200,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/cjs/use-get-memoized-merged-trigger-ref-new.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
+ * Implemented behind ff `platform-design-system-popup-ref`
  * @returns Function to set trigger ref
  */
 var useGetMemoizedMergedTriggerRefNew = exports.useGetMemoizedMergedTriggerRefNew = function useGetMemoizedMergedTriggerRefNew() {

package/dist/es2019/popup.js

@@ -105,7 +105,7 @@ export const Popup = /*#__PURE__*/memo(({
     ref
   }) => {
     return trigger({
-      ref: !fg('platform-design-system-dsp-20476-dropdown-menu') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
+      ref: !fg('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true

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()) {
@@ -73,19 +74,17 @@ export const useCloseManager = ({
           if (target instanceof HTMLElement) {
             var _target$closest;
             const layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, `[data-ds--level]`);
-            if (!layeredElement) {
-              // if no layered element, we disable the click event of disabled layers.
-              return;
-            }
-            const closeType = layeredElement.getAttribute('[data-ds--close--type]');
-            if (closeType === 'single') {
-              // if the close type is single, we won't close other disabled layers when clicking outside
-              return;
-            }
-            const levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
-            if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
-              // won't trigger onClick event when we click in a higher layer.
-              return;
+            if (layeredElement) {
+              const closeType = layeredElement.getAttribute('[data-ds--close--type]');
+              if (closeType === 'single') {
+                // if the close type is single, we won't close other disabled layers when clicking outside
+                return;
+              }
+              const levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
+              if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
+                // won't trigger onClick event when we click in a higher layer.
+                return;
+              }
             }
           }
         } else {
@@ -178,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,
@@ -201,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/es2019/use-get-memoized-merged-trigger-ref-new.js

@@ -3,7 +3,7 @@ import memoizeOne from 'memoize-one';
 
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
+ * Implemented behind ff `platform-design-system-popup-ref`
  * @returns Function to set trigger ref
  */
 export const useGetMemoizedMergedTriggerRefNew = () => {

package/dist/esm/popper-wrapper.js

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "xcss"];
-var _css;
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -24,7 +23,7 @@ import { useFocusManager } from './use-focus-manager';
 var fullWidthStyles = css({
   width: '100%'
 });
-var rootStyles = css((_css = {
+var rootStyles = css(_defineProperty(_defineProperty({
   display: 'block',
   boxSizing: 'border-box',
   zIndex: layers.layer(),
@@ -35,9 +34,9 @@ var rootStyles = css((_css = {
   // Otherwise, when rendering into the parent (not using a portal),
   // the text color can be inherited from the parent.
   color: "var(--ds-text, #172B4D)"
-}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, '&:focus', {
+}, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), '&:focus', {
   outline: 'none'
-}), _css));
+}));
 var scrollableStyles = css({
   overflow: 'auto'
 });

package/dist/esm/popup.js

@@ -117,7 +117,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
   var popupContent = jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
-      ref: !fg('platform-design-system-dsp-20476-dropdown-menu') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
+      ref: !fg('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true

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()) {
@@ -68,19 +69,17 @@ export var useCloseManager = function useCloseManager(_ref) {
           if (target instanceof HTMLElement) {
             var _target$closest;
             var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
-            if (!layeredElement) {
-              // if no layered element, we disable the click event of disabled layers.
-              return;
-            }
-            var closeType = layeredElement.getAttribute('[data-ds--close--type]');
-            if (closeType === 'single') {
-              // if the close type is single, we won't close other disabled layers when clicking outside
-              return;
-            }
-            var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
-            if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
-              // won't trigger onClick event when we click in a higher layer.
-              return;
+            if (layeredElement) {
+              var closeType = layeredElement.getAttribute('[data-ds--close--type]');
+              if (closeType === 'single') {
+                // if the close type is single, we won't close other disabled layers when clicking outside
+                return;
+              }
+              var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
+              if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
+                // won't trigger onClick event when we click in a higher layer.
+                return;
+              }
             }
           }
         } else {
@@ -169,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,
@@ -192,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/dist/esm/use-get-memoized-merged-trigger-ref-new.js

@@ -4,7 +4,7 @@ import memoizeOne from 'memoize-one';
 
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
+ * Implemented behind ff `platform-design-system-popup-ref`
  * @returns Function to set trigger ref
  */
 export var useGetMemoizedMergedTriggerRefNew = function useGetMemoizedMergedTriggerRefNew() {

package/dist/types/use-get-memoized-merged-trigger-ref-new.d.ts

@@ -1,7 +1,7 @@
 import { type Dispatch, type SetStateAction } from 'react';
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
+ * Implemented behind ff `platform-design-system-popup-ref`
  * @returns Function to set trigger ref
  */
 export declare const useGetMemoizedMergedTriggerRefNew: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;

package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref-new.d.ts

@@ -1,7 +1,7 @@
 import { type Dispatch, type SetStateAction } from 'react';
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
+ * Implemented behind ff `platform-design-system-popup-ref`
  * @returns Function to set trigger ref
  */
 export declare const useGetMemoizedMergedTriggerRefNew: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.30.1",
+	"version": "1.30.3",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,10 +44,10 @@
 		"@atlaskit/layering": "^1.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
-		"@atlaskit/portal": "^4.9.0",
+		"@atlaskit/portal": "^4.10.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tokens": "^2.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -67,7 +67,7 @@
 		"@atlaskit/icon": "^23.1.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.7.0",
-		"@atlaskit/toggle": "^13.4.0",
+		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@compiled/react": "^0.18.1",
@@ -112,7 +112,7 @@
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
 		},
-		"platform-design-system-dsp-20476-dropdown-menu": {
+		"platform-design-system-popup-ref": {
 			"type": "boolean"
 		},
 		"design-system-closed-all-when-click-outside": {
@@ -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/"