@atlaskit/popup 4.22.0 → 4.23.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/popup
 
+## 4.23.0
+
+### Minor Changes
+
+- [`f6ef9f1fc7454`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6ef9f1fc7454) -
+  Add an optional close-event ignore predicate to popup and dropdown menu so consumers can treat
+  external overlays as part of popup interactions.
+
+## 4.22.1
+
+### Patch Changes
+
+- [`ae5198c2f44ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae5198c2f44ed) -
+  Fix @atlaskit/popup containing a portal-rendered child overlay (Drawer, Modal, etc.) now correctly
+  ignores clicks inside that overlay
+
 ## 4.22.0
 
 ### Minor Changes

package/dist/cjs/compositional/popup-content.js

@@ -57,6 +57,7 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref) {
     zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
     _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
+    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     inShouldRenderToParent = _ref.shouldRenderToParent,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
@@ -147,6 +148,7 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref) {
     autoFocus: autoFocus,
     shouldFitContainer: shouldFitContainer,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,

package/dist/cjs/popper-wrapper.js

@@ -127,6 +127,7 @@ function PopperWrapper(_ref) {
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     triggerRef = _ref.triggerRef,
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     shouldRenderToParent = _ref.shouldRenderToParent,
     shouldFitContainer = _ref.shouldFitContainer,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
@@ -167,6 +168,7 @@ function PopperWrapper(_ref) {
     popupRef: popupRef,
     triggerRef: triggerRef,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
     shouldCloseOnTab: shouldCloseOnTab,
     autoFocus: autoFocus,
     shouldDisableFocusTrap: shouldDisableFocusTrap,

package/dist/cjs/popup.js

@@ -57,6 +57,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
     zIndex = _props$zIndex === void 0 ? defaultLayer : _props$zIndex,
     _props$shouldUseCaptu = props.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _props$shouldUseCaptu === void 0 ? false : _props$shouldUseCaptu,
+    shouldIgnoreCloseEvent = props.shouldIgnoreCloseEvent,
     _props$shouldRenderTo = props.shouldRenderToParent,
     inShouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
     _props$shouldFitConta = props.shouldFitContainer,
@@ -135,6 +136,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
     shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
     shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,

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

@@ -22,6 +22,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     autoFocus = _ref.autoFocus,
     shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
     capture = _ref.shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     shouldCloseOnTab = _ref.shouldCloseOnTab,
     shouldRenderToParent = _ref.shouldRenderToParent;
   var _useLayering = (0, _layering.useLayering)(),
@@ -36,6 +37,9 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       return _noop.default;
     }
     var closePopup = function closePopup(event) {
+      if (shouldIgnoreCloseEvent !== null && shouldIgnoreCloseEvent !== void 0 && shouldIgnoreCloseEvent(event) && (0, _platformFeatureFlags.fg)('cc_blocks_changeboarding')) {
+        return;
+      }
       if (onClose) {
         var _currentLevel = null;
         if (event.target instanceof HTMLElement) {
@@ -68,23 +72,45 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled()) {
+      if ((0, _platformFeatureFlags.fg)('jsmgrowth_popup_fix')) {
         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) {
-            var closeType = layeredElement.getAttribute('[data-ds--close--type]');
-            if (closeType === 'single') {
+            var closeType = layeredElement.getAttribute('data-ds--close--type');
+            if (closeType === 'single' && isLayerDisabled()) {
               // 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.
+              // Don't close this popup when the click landed inside a higher-level layer
+              // (e.g. a Drawer or Modal that portals to <body>). Such nodes are not DOM
+              // descendants of popupRef, so the contains() checks below would wrongly
+              // classify them as "outside" clicks and close the popup prematurely.
               return;
             }
           }
         }
+      } else {
+        if (isLayerDisabled()) {
+          if (target instanceof HTMLElement) {
+            var _target$closest2;
+            var _layeredElement = (_target$closest2 = target.closest) === null || _target$closest2 === void 0 ? void 0 : _target$closest2.call(target, "[data-ds--level]");
+            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;
+              }
+            }
+          }
+        }
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
@@ -245,5 +271,5 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       cancelAllFrames();
       unbindBlur();
     };
-  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
+  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, shouldIgnoreCloseEvent, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
 };

package/dist/es2019/compositional/popup-content.js

@@ -41,6 +41,7 @@ export const PopupContent = ({
   autoFocus = true,
   zIndex = defaultLayer,
   shouldUseCaptureOnOutsideClick = false,
+  shouldIgnoreCloseEvent,
   shouldRenderToParent: inShouldRenderToParent,
   shouldDisableFocusLock = false,
   shouldFitContainer,
@@ -131,6 +132,7 @@ export const PopupContent = ({
     autoFocus: autoFocus,
     shouldFitContainer: shouldFitContainer,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,

package/dist/es2019/popper-wrapper.js

@@ -111,6 +111,7 @@ function PopperWrapper({
   autoFocus = true,
   triggerRef,
   shouldUseCaptureOnOutsideClick,
+  shouldIgnoreCloseEvent,
   shouldRenderToParent,
   shouldFitContainer,
   shouldDisableFocusLock,
@@ -144,6 +145,7 @@ function PopperWrapper({
     popupRef,
     triggerRef,
     shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent,
     shouldCloseOnTab,
     autoFocus,
     shouldDisableFocusTrap,

package/dist/es2019/popup.js

@@ -41,6 +41,7 @@ export const Popup = /*#__PURE__*/memo(props => {
     autoFocus = true,
     zIndex = defaultLayer,
     shouldUseCaptureOnOutsideClick = false,
+    shouldIgnoreCloseEvent,
     shouldRenderToParent: inShouldRenderToParent = false,
     shouldFitContainer = false,
     shouldDisableFocusLock = false,
@@ -114,6 +115,7 @@ export const Popup = /*#__PURE__*/memo(props => {
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
     shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
     shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,

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

@@ -14,6 +14,7 @@ export const useCloseManager = ({
   autoFocus,
   shouldDisableFocusTrap,
   shouldUseCaptureOnOutsideClick: capture,
+  shouldIgnoreCloseEvent,
   shouldCloseOnTab,
   shouldRenderToParent
 }) => {
@@ -31,6 +32,9 @@ export const useCloseManager = ({
       return noop;
     }
     const closePopup = event => {
+      if (shouldIgnoreCloseEvent !== null && shouldIgnoreCloseEvent !== void 0 && shouldIgnoreCloseEvent(event) && fg('cc_blocks_changeboarding')) {
+        return;
+      }
       if (onClose) {
         let currentLevel = null;
         if (event.target instanceof HTMLElement) {
@@ -65,23 +69,45 @@ export const useCloseManager = ({
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled()) {
+      if (fg('jsmgrowth_popup_fix')) {
         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) {
-            const closeType = layeredElement.getAttribute('[data-ds--close--type]');
-            if (closeType === 'single') {
+            const closeType = layeredElement.getAttribute('data-ds--close--type');
+            if (closeType === 'single' && isLayerDisabled()) {
               // 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.
+              // Don't close this popup when the click landed inside a higher-level layer
+              // (e.g. a Drawer or Modal that portals to <body>). Such nodes are not DOM
+              // descendants of popupRef, so the contains() checks below would wrongly
+              // classify them as "outside" clicks and close the popup prematurely.
               return;
             }
           }
         }
+      } else {
+        if (isLayerDisabled()) {
+          if (target instanceof HTMLElement) {
+            var _target$closest2;
+            const layeredElement = (_target$closest2 = target.closest) === null || _target$closest2 === void 0 ? void 0 : _target$closest2.call(target, `[data-ds--level]`);
+            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;
+              }
+            }
+          }
+        }
       }
       const isClickOnPopup = popupRef && popupRef.contains(target);
       const isClickOnTrigger = triggerRef && triggerRef.contains(target);
@@ -244,5 +270,5 @@ export const useCloseManager = ({
       cancelAllFrames();
       unbindBlur();
     };
-  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
+  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, shouldIgnoreCloseEvent, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
 };

package/dist/esm/compositional/popup-content.js

@@ -48,6 +48,7 @@ export var PopupContent = function PopupContent(_ref) {
     zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
     _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
+    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     inShouldRenderToParent = _ref.shouldRenderToParent,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
@@ -138,6 +139,7 @@ export var PopupContent = function PopupContent(_ref) {
     autoFocus: autoFocus,
     shouldFitContainer: shouldFitContainer,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,

package/dist/esm/popper-wrapper.js

@@ -118,6 +118,7 @@ function PopperWrapper(_ref) {
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     triggerRef = _ref.triggerRef,
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     shouldRenderToParent = _ref.shouldRenderToParent,
     shouldFitContainer = _ref.shouldFitContainer,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
@@ -158,6 +159,7 @@ function PopperWrapper(_ref) {
     popupRef: popupRef,
     triggerRef: triggerRef,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
     shouldCloseOnTab: shouldCloseOnTab,
     autoFocus: autoFocus,
     shouldDisableFocusTrap: shouldDisableFocusTrap,

package/dist/esm/popup.js

@@ -49,6 +49,7 @@ export var Popup = /*#__PURE__*/memo(function (props) {
     zIndex = _props$zIndex === void 0 ? defaultLayer : _props$zIndex,
     _props$shouldUseCaptu = props.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _props$shouldUseCaptu === void 0 ? false : _props$shouldUseCaptu,
+    shouldIgnoreCloseEvent = props.shouldIgnoreCloseEvent,
     _props$shouldRenderTo = props.shouldRenderToParent,
     inShouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
     _props$shouldFitConta = props.shouldFitContainer,
@@ -127,6 +128,7 @@ export var Popup = /*#__PURE__*/memo(function (props) {
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
     shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
     shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,

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

@@ -14,6 +14,7 @@ export var useCloseManager = function useCloseManager(_ref) {
     autoFocus = _ref.autoFocus,
     shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
     capture = _ref.shouldUseCaptureOnOutsideClick,
+    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     shouldCloseOnTab = _ref.shouldCloseOnTab,
     shouldRenderToParent = _ref.shouldRenderToParent;
   var _useLayering = useLayering(),
@@ -28,6 +29,9 @@ export var useCloseManager = function useCloseManager(_ref) {
       return noop;
     }
     var closePopup = function closePopup(event) {
+      if (shouldIgnoreCloseEvent !== null && shouldIgnoreCloseEvent !== void 0 && shouldIgnoreCloseEvent(event) && fg('cc_blocks_changeboarding')) {
+        return;
+      }
       if (onClose) {
         var _currentLevel = null;
         if (event.target instanceof HTMLElement) {
@@ -60,23 +64,45 @@ export var useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled()) {
+      if (fg('jsmgrowth_popup_fix')) {
         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) {
-            var closeType = layeredElement.getAttribute('[data-ds--close--type]');
-            if (closeType === 'single') {
+            var closeType = layeredElement.getAttribute('data-ds--close--type');
+            if (closeType === 'single' && isLayerDisabled()) {
               // 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.
+              // Don't close this popup when the click landed inside a higher-level layer
+              // (e.g. a Drawer or Modal that portals to <body>). Such nodes are not DOM
+              // descendants of popupRef, so the contains() checks below would wrongly
+              // classify them as "outside" clicks and close the popup prematurely.
               return;
             }
           }
         }
+      } else {
+        if (isLayerDisabled()) {
+          if (target instanceof HTMLElement) {
+            var _target$closest2;
+            var _layeredElement = (_target$closest2 = target.closest) === null || _target$closest2 === void 0 ? void 0 : _target$closest2.call(target, "[data-ds--level]");
+            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;
+              }
+            }
+          }
+        }
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
@@ -237,5 +263,5 @@ export var useCloseManager = function useCloseManager(_ref) {
       cancelAllFrames();
       unbindBlur();
     };
-  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
+  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, shouldIgnoreCloseEvent, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
 };

package/dist/types/compositional/popup-content.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ContentProps, type PopupProps as LegacyPopupProps } from '../types';
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'label' | 'titleId'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldIgnoreCloseEvent' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'label' | 'titleId'> & {
     children: (props: ContentProps) => React.ReactNode;
     /**
      * ___Use with caution___
@@ -31,5 +31,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, label, titleId, }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldIgnoreCloseEvent, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, label, titleId, }: PopupContentProps) => React.JSX.Element | null;
 export {};

package/dist/types/popper-wrapper.d.ts

@@ -1,3 +1,3 @@
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, zIndex, }: PopperWrapperProps): JSX.Element;
+declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldIgnoreCloseEvent, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, zIndex, }: PopperWrapperProps): JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -227,6 +227,11 @@ interface BaseProps {
      *  `capture: true`.
      */
     shouldUseCaptureOnOutsideClick?: boolean;
+    /**
+     * Allows consumers to ignore specific close events, for example when an external overlay
+     * should be treated as part of the popup interaction.
+     */
+    shouldIgnoreCloseEvent?: (event: Event | React.MouseEvent | React.KeyboardEvent) => boolean;
     /**
      * The root element where the popup should be rendered.
      * Defaults to `false`.
@@ -324,7 +329,7 @@ export interface PopperWrapperProps extends BaseProps {
     zIndex?: number;
     triggerRef: TriggerRef;
 }
-export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
+export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose' | 'shouldIgnoreCloseEvent'> & {
     popupRef: PopupRef;
     triggerRef: TriggerRef;
     shouldUseCaptureOnOutsideClick?: boolean;

package/dist/types/use-close-manager.d.ts

@@ -1,2 +1,2 @@
 import { type CloseManagerHook } from './types';
-export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, shouldRenderToParent, }: CloseManagerHook) => void;
+export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, shouldUseCaptureOnOutsideClick: capture, shouldIgnoreCloseEvent, shouldCloseOnTab, shouldRenderToParent, }: CloseManagerHook) => void;

package/dist/types-ts4.5/compositional/popup-content.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ContentProps, type PopupProps as LegacyPopupProps } from '../types';
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'label' | 'titleId'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldIgnoreCloseEvent' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'label' | 'titleId'> & {
     children: (props: ContentProps) => React.ReactNode;
     /**
      * ___Use with caution___
@@ -31,5 +31,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, label, titleId, }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldIgnoreCloseEvent, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, label, titleId, }: PopupContentProps) => React.JSX.Element | null;
 export {};

package/dist/types-ts4.5/popper-wrapper.d.ts

@@ -1,3 +1,3 @@
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, zIndex, }: PopperWrapperProps): JSX.Element;
+declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldIgnoreCloseEvent, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, zIndex, }: PopperWrapperProps): JSX.Element;
 export default PopperWrapper;

package/dist/types-ts4.5/types.d.ts

@@ -230,6 +230,11 @@ interface BaseProps {
      *  `capture: true`.
      */
     shouldUseCaptureOnOutsideClick?: boolean;
+    /**
+     * Allows consumers to ignore specific close events, for example when an external overlay
+     * should be treated as part of the popup interaction.
+     */
+    shouldIgnoreCloseEvent?: (event: Event | React.MouseEvent | React.KeyboardEvent) => boolean;
     /**
      * The root element where the popup should be rendered.
      * Defaults to `false`.
@@ -327,7 +332,7 @@ export interface PopperWrapperProps extends BaseProps {
     zIndex?: number;
     triggerRef: TriggerRef;
 }
-export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
+export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose' | 'shouldIgnoreCloseEvent'> & {
     popupRef: PopupRef;
     triggerRef: TriggerRef;
     shouldUseCaptureOnOutsideClick?: boolean;

package/dist/types-ts4.5/use-close-manager.d.ts

@@ -1,2 +1,2 @@
 import { type CloseManagerHook } from './types';
-export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, shouldRenderToParent, }: CloseManagerHook) => void;
+export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, shouldUseCaptureOnOutsideClick: capture, shouldIgnoreCloseEvent, shouldCloseOnTab, shouldRenderToParent, }: CloseManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.22.0",
+	"version": "4.23.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/tokens": "^13.1.0",
 		"@atlaskit/top-layer": "^0.12.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -69,12 +69,12 @@
 		"@atlaskit/docs": "^11.8.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^35.1.0",
+		"@atlaskit/icon": "^35.3.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/modal-dialog": "^15.2.0",
 		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/toggle": "^16.0.0",
+		"@atlaskit/toggle": "^16.1.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
@@ -114,6 +114,12 @@
 		}
 	},
 	"platform-feature-flags": {
+		"cc_blocks_changeboarding": {
+			"type": "boolean"
+		},
+		"jsmgrowth_popup_fix": {
+			"type": "boolean"
+		},
 		"platform-dst-top-layer": {
 			"type": "boolean"
 		},