@atlaskit/popup 1.24.1 → 1.25.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/popup
 
+## 1.25.0
+
+### Minor Changes
+
+- [#138688](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138688)
+  [`961d97994618c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/961d97994618c) -
+  Adds `shouldFitViewport` prop which will apply `max-width` and `max-height` to contain the
+  popper/popup within the viewport.
+
+### Patch Changes
+
+- [#138585](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138585)
+  [`b72c2c7f9a2fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b72c2c7f9a2fd) -
+  Support to close all layers when clicking outside under feature flag
+- Updated dependencies
+
+## 1.24.2
+
+### Patch Changes
+
+- [#136611](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136611)
+  [`9755fb019113f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9755fb019113f) -
+  Clean up emotion Globals usage
+
 ## 1.24.1
 
 ### Patch Changes

package/dist/cjs/compositional/popup.js

@@ -129,7 +129,8 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
     shouldRenderToParent = _ref4.shouldRenderToParent,
     _ref4$shouldDisableFo = _ref4.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref4$shouldDisableFo === void 0 ? false : _ref4$shouldDisableFo,
-    shouldFitContainer = _ref4.shouldFitContainer;
+    shouldFitContainer = _ref4.shouldFitContainer,
+    shouldFitViewport = _ref4.shouldFitViewport;
   useEnsureIsInsidePopup();
   var isOpen = (0, _react.useContext)(IsOpenContext);
   var id = (0, _react.useContext)(IdContext);
@@ -158,7 +159,8 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

package/dist/cjs/popper-wrapper.js

@@ -13,7 +13,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _layering = require("@atlaskit/layering");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -27,7 +26,6 @@ var _css;
  * @jsxRuntime classic
  * @jsx jsx
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var popupFullWidthStyles = (0, _react2.css)({
   width: '100%'
 });
@@ -49,15 +47,6 @@ var popupStyles = (0, _react2.css)((_css = {
 var popupOverflowStyles = (0, _react2.css)({
   overflow: 'auto'
 });
-
-// disables iframe pointer events while popup is open, except if iframe is nested inside popup
-// solves an issue of popup not being closed on iframe click
-var blockPointerEventsOnExternalIframeStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'iframe:not([data-ds--level] iframe)': {
-    pointerEvents: 'none'
-  }
-});
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
     shouldFitContainer = props.shouldFitContainer,
@@ -97,7 +86,8 @@ function PopperWrapper(_ref) {
     role = _ref.role,
     label = _ref.label,
     titleId = _ref.titleId,
-    modifiers = _ref.modifiers;
+    modifiers = _ref.modifiers,
+    shouldFitViewport = _ref.shouldFitViewport;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -148,7 +138,8 @@ function PopperWrapper(_ref) {
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
       style = _ref2.style,
@@ -181,9 +172,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, (0, _platformFeatureFlags.fg)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
-      styles: blockPointerEventsOnExternalIframeStyles
-    }), (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
+    }, (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
       update: update
     }, content({
       update: update,

package/dist/cjs/popup.js

@@ -65,7 +65,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     role = _ref.role,
     label = _ref.label,
     titleId = _ref.titleId,
-    modifiers = _ref.modifiers;
+    modifiers = _ref.modifiers,
+    shouldFitViewport = _ref.shouldFitViewport;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -100,7 +101,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     role: role,
     label: label,
     titleId: titleId,
-    modifiers: modifiers
+    modifiers: modifiers,
+    shouldFitViewport: shouldFitViewport
   }));
   var popupContent = (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;

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

@@ -36,7 +36,16 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     }
     var closePopup = function closePopup(event) {
       if (onClose) {
-        onClose(event);
+        if ((0, _platformFeatureFlags.fg)('sibling-dropdown-close-issue')) {
+          var _currentLevel = null;
+          if (event.target instanceof HTMLElement) {
+            var _event$target$closest;
+            _currentLevel = (_event$target$closest = event.target.closest("[data-ds--level]")) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
+          }
+          _currentLevel ? onClose(event, Number(_currentLevel)) : onClose(event);
+        } else {
+          onClose(event);
+        }
       }
       if (shouldDisableFocusTrap && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
@@ -61,8 +70,19 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
         return;
       }
       if (isLayerDisabled()) {
-        //if it is a disabled layer, we need to disable its click listener.
-        return;
+        //if it is a disabled layer, and we clicked inside a higher layer
+        //we will disable the click event
+        if ((0, _platformFeatureFlags.fg)('design-system-closed-all-when-click-outside')) {
+          if (target instanceof HTMLElement) {
+            var _target$closest;
+            var levelOfClickedLayer = (_target$closest = target.closest) === null || _target$closest === void 0 || (_target$closest = _target$closest.call(target, "[data-ds--level]")) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute('data-ds--level');
+            if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
+              return;
+            }
+          }
+        } else {
+          return;
+        }
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);

package/dist/es2019/compositional/popup.js

@@ -108,7 +108,8 @@ export const PopupContent = ({
   shouldUseCaptureOnOutsideClick = false,
   shouldRenderToParent,
   shouldDisableFocusLock = false,
-  shouldFitContainer
+  shouldFitContainer,
+  shouldFitViewport
 }) => {
   useEnsureIsInsidePopup();
   const isOpen = useContext(IsOpenContext);
@@ -138,7 +139,8 @@ export const PopupContent = ({
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

package/dist/es2019/popper-wrapper.js

@@ -4,11 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import { forwardRef, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, Global, jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -39,15 +36,6 @@ const popupStyles = css({
 const popupOverflowStyles = css({
   overflow: 'auto'
 });
-
-// disables iframe pointer events while popup is open, except if iframe is nested inside popup
-// solves an issue of popup not being closed on iframe click
-const blockPointerEventsOnExternalIframeStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'iframe:not([data-ds--level] iframe)': {
-    pointerEvents: 'none'
-  }
-});
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     shouldRenderToParent,
@@ -86,7 +74,8 @@ function PopperWrapper({
   role,
   label,
   titleId,
-  modifiers
+  modifiers,
+  shouldFitViewport
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -131,7 +120,8 @@ function PopperWrapper({
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }, ({
     ref,
     style,
@@ -165,9 +155,7 @@ function PopperWrapper({
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, fg('platform.design-system-team.iframe_gojiv') && jsx(Global, {
-      styles: blockPointerEventsOnExternalIframeStyles
-    }), jsx(RepositionOnUpdate, {
+    }, jsx(RepositionOnUpdate, {
       update: update
     }, content({
       update,

package/dist/es2019/popup.js

@@ -46,7 +46,8 @@ export const Popup = /*#__PURE__*/memo(({
   role,
   label,
   titleId,
-  modifiers
+  modifiers,
+  shouldFitViewport
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
@@ -79,7 +80,8 @@ export const Popup = /*#__PURE__*/memo(({
     role: role,
     label: label,
     titleId: titleId,
-    modifiers: modifiers
+    modifiers: modifiers,
+    shouldFitViewport: shouldFitViewport
   }));
   const popupContent = jsx(Manager, null, jsx(Reference, null, ({
     ref

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

@@ -31,7 +31,16 @@ export const useCloseManager = ({
     }
     const closePopup = event => {
       if (onClose) {
-        onClose(event);
+        if (fg('sibling-dropdown-close-issue')) {
+          let currentLevel = null;
+          if (event.target instanceof HTMLElement) {
+            var _event$target$closest;
+            currentLevel = (_event$target$closest = event.target.closest(`[data-ds--level]`)) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
+          }
+          currentLevel ? onClose(event, Number(currentLevel)) : onClose(event);
+        } else {
+          onClose(event);
+        }
       }
       if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
@@ -58,8 +67,19 @@ export const useCloseManager = ({
         return;
       }
       if (isLayerDisabled()) {
-        //if it is a disabled layer, we need to disable its click listener.
-        return;
+        //if it is a disabled layer, and we clicked inside a higher layer
+        //we will disable the click event
+        if (fg('design-system-closed-all-when-click-outside')) {
+          if (target instanceof HTMLElement) {
+            var _target$closest, _target$closest$call;
+            const levelOfClickedLayer = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : (_target$closest$call = _target$closest.call(target, `[data-ds--level]`)) === null || _target$closest$call === void 0 ? void 0 : _target$closest$call.getAttribute('data-ds--level');
+            if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
+              return;
+            }
+          }
+        } else {
+          return;
+        }
       }
       const isClickOnPopup = popupRef && popupRef.contains(target);
       const isClickOnTrigger = triggerRef && triggerRef.contains(target);

package/dist/esm/compositional/popup.js

@@ -119,7 +119,8 @@ export var PopupContent = function PopupContent(_ref4) {
     shouldRenderToParent = _ref4.shouldRenderToParent,
     _ref4$shouldDisableFo = _ref4.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref4$shouldDisableFo === void 0 ? false : _ref4$shouldDisableFo,
-    shouldFitContainer = _ref4.shouldFitContainer;
+    shouldFitContainer = _ref4.shouldFitContainer,
+    shouldFitViewport = _ref4.shouldFitViewport;
   useEnsureIsInsidePopup();
   var isOpen = useContext(IsOpenContext);
   var id = useContext(IdContext);
@@ -148,7 +149,8 @@ export var PopupContent = function PopupContent(_ref4) {
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

package/dist/esm/popper-wrapper.js

@@ -10,11 +10,8 @@ var _css;
  * @jsx jsx
  */
 import { forwardRef, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, Global, jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -43,15 +40,6 @@ var popupStyles = css((_css = {
 var popupOverflowStyles = css({
   overflow: 'auto'
 });
-
-// disables iframe pointer events while popup is open, except if iframe is nested inside popup
-// solves an issue of popup not being closed on iframe click
-var blockPointerEventsOnExternalIframeStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  'iframe:not([data-ds--level] iframe)': {
-    pointerEvents: 'none'
-  }
-});
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
     shouldFitContainer = props.shouldFitContainer,
@@ -91,7 +79,8 @@ function PopperWrapper(_ref) {
     role = _ref.role,
     label = _ref.label,
     titleId = _ref.titleId,
-    modifiers = _ref.modifiers;
+    modifiers = _ref.modifiers,
+    shouldFitViewport = _ref.shouldFitViewport;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -142,7 +131,8 @@ function PopperWrapper(_ref) {
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
       style = _ref2.style,
@@ -175,9 +165,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, fg('platform.design-system-team.iframe_gojiv') && jsx(Global, {
-      styles: blockPointerEventsOnExternalIframeStyles
-    }), jsx(RepositionOnUpdate, {
+    }, jsx(RepositionOnUpdate, {
       update: update
     }, content({
       update: update,

package/dist/esm/popup.js

@@ -57,7 +57,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     role = _ref.role,
     label = _ref.label,
     titleId = _ref.titleId,
-    modifiers = _ref.modifiers;
+    modifiers = _ref.modifiers,
+    shouldFitViewport = _ref.shouldFitViewport;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -92,7 +93,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     role: role,
     label: label,
     titleId: titleId,
-    modifiers: modifiers
+    modifiers: modifiers,
+    shouldFitViewport: shouldFitViewport
   }));
   var popupContent = jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var ref = _ref2.ref;

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

@@ -28,7 +28,16 @@ export var useCloseManager = function useCloseManager(_ref) {
     }
     var closePopup = function closePopup(event) {
       if (onClose) {
-        onClose(event);
+        if (fg('sibling-dropdown-close-issue')) {
+          var _currentLevel = null;
+          if (event.target instanceof HTMLElement) {
+            var _event$target$closest;
+            _currentLevel = (_event$target$closest = event.target.closest("[data-ds--level]")) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
+          }
+          _currentLevel ? onClose(event, Number(_currentLevel)) : onClose(event);
+        } else {
+          onClose(event);
+        }
       }
       if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
@@ -53,8 +62,19 @@ export var useCloseManager = function useCloseManager(_ref) {
         return;
       }
       if (isLayerDisabled()) {
-        //if it is a disabled layer, we need to disable its click listener.
-        return;
+        //if it is a disabled layer, and we clicked inside a higher layer
+        //we will disable the click event
+        if (fg('design-system-closed-all-when-click-outside')) {
+          if (target instanceof HTMLElement) {
+            var _target$closest;
+            var levelOfClickedLayer = (_target$closest = target.closest) === null || _target$closest === void 0 || (_target$closest = _target$closest.call(target, "[data-ds--level]")) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute('data-ds--level');
+            if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
+              return;
+            }
+          }
+        } else {
+          return;
+        }
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);

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

@@ -36,7 +36,7 @@ export type PopupTriggerProps = {
  * It must be a child of the Popup component.
  */
 export declare const PopupTrigger: ({ children }: PopupTriggerProps) => JSX.Element;
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
     children: (props: ContentProps) => React.ReactNode;
 };
 type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
@@ -55,5 +55,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, }: PopupContentProps) => JSX.Element | null;
+export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, }: PopupContentProps) => JSX.Element | null;
 export {};

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ 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, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ 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, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -5,6 +5,7 @@ export interface TriggerProps {
     'aria-controls'?: string;
     'aria-expanded': boolean;
     'aria-haspopup': boolean | 'dialog';
+    'data-ds--level'?: string;
 }
 export type PopupRef = HTMLDivElement | null;
 export type TriggerRef = HTMLElement | HTMLButtonElement | null;
@@ -133,7 +134,7 @@ interface BaseProps {
      * This happens either when clicking away from the popup or pressing the escape key.
      * You'll want to use this to set open state accordingly, and then pump it back into the `isOpen` prop.
      */
-    onClose?(event: Event | React.MouseEvent | React.KeyboardEvent): void;
+    onClose?(event: Event | React.MouseEvent | React.KeyboardEvent, currentLevel?: number | any): void;
     /**
      * The element that is shown when `isOpen` prop is `true`.
      * The result of the `content` prop will be placed as children here.
@@ -199,6 +200,11 @@ interface BaseProps {
      * for more details - https://popper.js.org/docs/v1/#modifiers
      */
     modifiers?: Partial<Modifier<string, object>>[];
+    /**
+     * Determines if the popup will have a `max-width` and `max-height` set to
+     * constrain it to the viewport.
+     */
+    shouldFitViewport?: boolean;
 }
 interface InternalPopupProps extends BaseProps {
     /**

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

@@ -36,7 +36,7 @@ export type PopupTriggerProps = {
  * It must be a child of the Popup component.
  */
 export declare const PopupTrigger: ({ children }: PopupTriggerProps) => JSX.Element;
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
     children: (props: ContentProps) => React.ReactNode;
 };
 type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
@@ -55,5 +55,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, }: PopupContentProps) => JSX.Element | null;
+export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, }: PopupContentProps) => JSX.Element | null;
 export {};

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ 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, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ 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, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

@@ -5,6 +5,7 @@ export interface TriggerProps {
     'aria-controls'?: string;
     'aria-expanded': boolean;
     'aria-haspopup': boolean | 'dialog';
+    'data-ds--level'?: string;
 }
 export type PopupRef = HTMLDivElement | null;
 export type TriggerRef = HTMLElement | HTMLButtonElement | null;
@@ -136,7 +137,7 @@ interface BaseProps {
      * This happens either when clicking away from the popup or pressing the escape key.
      * You'll want to use this to set open state accordingly, and then pump it back into the `isOpen` prop.
      */
-    onClose?(event: Event | React.MouseEvent | React.KeyboardEvent): void;
+    onClose?(event: Event | React.MouseEvent | React.KeyboardEvent, currentLevel?: number | any): void;
     /**
      * The element that is shown when `isOpen` prop is `true`.
      * The result of the `content` prop will be placed as children here.
@@ -202,6 +203,11 @@ interface BaseProps {
      * for more details - https://popper.js.org/docs/v1/#modifiers
      */
     modifiers?: Partial<Modifier<string, object>>[];
+    /**
+     * Determines if the popup will have a `max-width` and `max-height` set to
+     * constrain it to the viewport.
+     */
+    shouldFitViewport?: boolean;
 }
 interface InternalPopupProps extends BaseProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.24.1",
+	"version": "1.25.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popper": "^6.2.0",
+		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/portal": "^4.9.0",
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
@@ -60,10 +60,10 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
-		"@atlaskit/toggle": "^13.3.0",
+		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/dom": "^10.1.0",
@@ -103,14 +103,17 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.design-system-team.iframe_gojiv": {
-			"type": "boolean"
-		},
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
 		},
 		"platform-design-system-dsp-20476-dropdown-menu": {
 			"type": "boolean"
+		},
+		"design-system-closed-all-when-click-outside": {
+			"type": "boolean"
+		},
+		"sibling-dropdown-close-issue": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"