@atlaskit/popup 1.24.2 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/popup
 
+## 1.26.0
+
+### Minor Changes
+
+- [#142538](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142538)
+  [`3979d0196514a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3979d0196514a) -
+  [ux] We are testing focus ring for popup wrapper `onKeyDown`. Changes are implemented behind
+  feature flag. If this fix is successful, it will be available in a later release.
+
+## 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

package/dist/cjs/compositional/popup.js

@@ -18,7 +18,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
 var _useGetMemoizedMergedTriggerRef = require("../use-get-memoized-merged-trigger-ref");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
 var IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var TriggerRefContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -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

@@ -12,7 +12,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 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");
@@ -86,7 +88,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],
@@ -137,13 +140,14 @@ function PopperWrapper(_ref) {
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    return (0, _react2.jsx)(PopupContainer, {
+    var popupContainer = (0, _react2.jsx)(PopupContainer, {
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -178,6 +182,7 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
+    return !initialFocusRef && (0, _platformFeatureFlags.fg)('platform-design-system-apply-popup-wrapper-focus') ? (0, _react2.jsx)(_focusRing.default, null, popupContainer) : popupContainer;
   });
 }
 

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/reposition-on-update.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RepositionOnUpdate = void 0;
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdate(_ref) {
   var children = _ref.children,

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

@@ -36,14 +36,25 @@ 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.
-        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(function () {
+          triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 
@@ -61,8 +72,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

@@ -5,7 +5,9 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
 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';
@@ -74,7 +76,8 @@ function PopperWrapper({
   role,
   label,
   titleId,
-  modifiers
+  modifiers,
+  shouldFitViewport
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -119,14 +122,15 @@ function PopperWrapper({
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }, ({
     ref,
     style,
     placement,
     update
   }) => {
-    return jsx(PopupContainer, {
+    const popupContainer = jsx(PopupContainer, {
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -161,6 +165,7 @@ function PopperWrapper({
       onClose,
       setInitialFocusRef
     })));
+    return !initialFocusRef && fg('platform-design-system-apply-popup-wrapper-focus') ? jsx(FocusRing, null, popupContainer) : popupContainer;
   });
 }
 

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,14 +31,25 @@ 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.
-        triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(() => {
+          triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 
@@ -58,8 +69,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

@@ -11,7 +11,9 @@ var _css;
  */
 import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
 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';
@@ -79,7 +81,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],
@@ -130,13 +133,14 @@ function PopperWrapper(_ref) {
     placement: placement,
     offset: offset,
     modifiers: mergedModifiers,
-    strategy: strategy
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    return jsx(PopupContainer, {
+    var popupContainer = jsx(PopupContainer, {
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -171,6 +175,7 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
+    return !initialFocusRef && fg('platform-design-system-apply-popup-wrapper-focus') ? jsx(FocusRing, null, popupContainer) : popupContainer;
   });
 }
 

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,14 +28,25 @@ 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.
-        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(function () {
+          triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 
@@ -53,8 +64,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.2",
+	"version": "1.26.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,13 +37,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/focus-ring": "^1.6.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",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.60.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -60,10 +61,10 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.18.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",
@@ -108,6 +109,15 @@
 		},
 		"platform-design-system-dsp-20476-dropdown-menu": {
 			"type": "boolean"
+		},
+		"design-system-closed-all-when-click-outside": {
+			"type": "boolean"
+		},
+		"sibling-dropdown-close-issue": {
+			"type": "boolean"
+		},
+		"platform-design-system-apply-popup-wrapper-focus": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"