@atlaskit/popup 1.22.2 → 1.23.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/popup
 
+## 1.23.1
+
+### Patch Changes
+
+- [#133686](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133686)
+  [`462353527b0db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/462353527b0db) -
+  Expose shouldReturnFocus on Popup component to allow consumers to prevent trigger refocusing on
+  popup close
+
+## 1.23.0
+
+### Minor Changes
+
+- [#128022](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128022)
+  [`1495b8f9c9253`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1495b8f9c9253) -
+  [ux] We are testing new focus behavior in non-dialog popup instances behind a feature flag. With
+  that in place, all popup instances that don't have role="dialog" applied will have focus traps
+  disabled by default. If this fix is successful, it will be available in a later release.
+
 ## 1.22.2
 
 ### Patch Changes

package/dist/cjs/popper-wrapper.js

@@ -91,6 +91,8 @@ function PopperWrapper(_ref) {
     shouldRenderToParent = _ref.shouldRenderToParent,
     shouldFitContainer = _ref.shouldFitContainer,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
+    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
+    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
@@ -105,13 +107,18 @@ function PopperWrapper(_ref) {
     initialFocusRef = _useState4[0],
     setInitialFocusRef = _useState4[1];
 
-  // We have cases when we need to prohibit focus locking
-  // e.g. in DropdownMenu
+  // We have cases where we need to close the Popup on Tab press.
+  // Example: DropdownMenu
   var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
+  var shouldDisableFocusTrap = role !== 'dialog';
   (0, _useFocusManager.useFocusManager)({
     initialFocusRef: initialFocusRef,
     popupRef: popupRef,
-    shouldCloseOnTab: shouldCloseOnTab
+    shouldCloseOnTab: shouldCloseOnTab,
+    triggerRef: triggerRef,
+    autoFocus: autoFocus,
+    shouldDisableFocusTrap: shouldDisableFocusTrap,
+    shouldReturnFocus: shouldReturnFocus
   });
   (0, _useCloseManager.useCloseManager)({
     isOpen: isOpen,
@@ -119,7 +126,10 @@ function PopperWrapper(_ref) {
     popupRef: popupRef,
     triggerRef: triggerRef,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    shouldCloseOnTab: shouldCloseOnTab
+    shouldCloseOnTab: shouldCloseOnTab,
+    autoFocus: autoFocus,
+    shouldDisableFocusTrap: shouldDisableFocusTrap,
+    shouldRenderToParent: shouldRenderToParent
   });
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
     currentLevel = _UNSAFE_useLayering.currentLevel;

package/dist/cjs/popup.js

@@ -10,6 +10,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactUid = require("react-uid");
 var _layering = require("@atlaskit/layering");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _primitives = require("@atlaskit/primitives");
@@ -57,6 +58,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
+    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
+    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
@@ -89,6 +92,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
     shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,
+    shouldReturnFocus: shouldReturnFocus,
     triggerRef: triggerRef,
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
@@ -102,7 +106,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
-      'aria-haspopup': true
+      'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
   }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : (0, _react2.jsx)(_portal.default, {
     zIndex: zIndex

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

@@ -9,6 +9,9 @@ var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _layering = require("@atlaskit/layering");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _isElementInteractive = require("./utils/is-element-interactive");
+var _useAnimationFrame2 = require("./utils/use-animation-frame");
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 
 var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
@@ -16,11 +19,17 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     onClose = _ref.onClose,
     popupRef = _ref.popupRef,
     triggerRef = _ref.triggerRef,
+    autoFocus = _ref.autoFocus,
+    shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
     capture = _ref.shouldUseCaptureOnOutsideClick,
-    shouldCloseOnTab = _ref.shouldCloseOnTab;
+    shouldCloseOnTab = _ref.shouldCloseOnTab,
+    shouldRenderToParent = _ref.shouldRenderToParent;
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
     isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled,
     currentLevel = _UNSAFE_useLayering.currentLevel;
+  var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),
+    requestFrame = _useAnimationFrame.requestFrame,
+    cancelAllFrames = _useAnimationFrame.cancelAllFrames;
   (0, _react.useEffect)(function () {
     if (!isOpen || !popupRef) {
       return _noop.default;
@@ -29,6 +38,13 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       if (onClose) {
         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');
+        }
+      }
     };
 
     // This check is required for cases where components like
@@ -44,23 +60,98 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled()) {
-        //if it is a disabled layer, we need to disable its click listener.
-        return;
+      if ((0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
+        var _document$activeEleme;
+        if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
+          //if it is a disabled layer, we need to disable its click listener.
+          return;
+        }
+      } else {
+        if (isLayerDisabled()) {
+          //if it is a disabled layer, we need to disable its click listener.
+          return;
+        }
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
       if (!isClickOnPopup && !isClickOnTrigger) {
         closePopup(event);
+        // If there was an outside click on a non-interactive element, the focus should be on the trigger.
+        if (document.activeElement && !(0, _isElementInteractive.isInteractiveElement)(document.activeElement) && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
+          triggerRef === null || triggerRef === void 0 || triggerRef.focus();
+        }
       }
     };
     var onKeyDown = function onKeyDown(event) {
-      if (isLayerDisabled()) {
-        return;
-      }
-      var key = event.key;
-      if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
-        closePopup(event);
+      if ((0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
+        var key = event.key,
+          shiftKey = event.shiftKey;
+        if (shiftKey && key === 'Tab' && !shouldRenderToParent) {
+          if (isLayerDisabled()) {
+            return;
+          }
+          // We need to move the focus to the popup trigger when the popup is displayed in React.Portal.
+          requestFrame(function () {
+            var isPopupFocusOut = popupRef && !popupRef.contains(document.activeElement);
+            if (isPopupFocusOut) {
+              closePopup(event);
+              if (currentLevel === 1) {
+                triggerRef === null || triggerRef === void 0 || triggerRef.focus();
+              }
+            }
+          });
+          return;
+        }
+        if (key === 'Tab') {
+          var _document$activeEleme2;
+          // We have cases where we need to close the Popup on Tab press.
+          // Example: DropdownMenu
+          if (shouldCloseOnTab) {
+            if (isLayerDisabled()) {
+              return;
+            }
+            closePopup(event);
+            return;
+          }
+          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+            return;
+          }
+          if (shouldDisableFocusTrap) {
+            if (shouldRenderToParent) {
+              // We need to move the focus to the previous interactive element before popup trigger
+              requestFrame(function () {
+                var isPopupFocusOut = popupRef && !popupRef.contains(document.activeElement);
+                if (isPopupFocusOut) {
+                  closePopup(event);
+                }
+              });
+            } else {
+              requestFrame(function () {
+                if (!document.hasFocus()) {
+                  closePopup(event);
+                }
+              });
+            }
+            return;
+          }
+        }
+        if (isLayerDisabled()) {
+          return;
+        }
+        if (key === 'Escape' || key === 'Esc') {
+          if (triggerRef && autoFocus) {
+            triggerRef.focus();
+          }
+          closePopup(event);
+        }
+      } else {
+        if (isLayerDisabled()) {
+          return;
+        }
+        var _key = event.key;
+        if (_key === 'Escape' || _key === 'Esc' || shouldCloseOnTab && _key === 'Tab') {
+          closePopup(event);
+        }
       }
     };
     var unbind = (0, _bindEventListener.bindAll)(window, [{
@@ -82,15 +173,13 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
         if (isLayerDisabled() || !(document.activeElement instanceof HTMLIFrameElement)) {
           return;
         }
-        var wrapper = document.activeElement.closest('[data-ds--level]');
-        if (!wrapper || currentLevel > Number(wrapper.getAttribute('data-ds--level'))) {
-          closePopup(e);
-        }
+        closePopup(e);
       }
     });
     return function () {
+      cancelAllFrames();
       unbind();
       unbindBlur();
     };
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab, currentLevel]);
+  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
 };

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

@@ -8,35 +8,51 @@ exports.useFocusManager = void 0;
 var _react = require("react");
 var _focusTrap = _interopRequireDefault(require("focus-trap"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useAnimationFrame2 = require("./utils/use-animation-frame");
 var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
   var initialFocusRef = _ref.initialFocusRef,
     popupRef = _ref.popupRef,
-    shouldCloseOnTab = _ref.shouldCloseOnTab;
+    triggerRef = _ref.triggerRef,
+    autoFocus = _ref.autoFocus,
+    shouldCloseOnTab = _ref.shouldCloseOnTab,
+    shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
+    shouldReturnFocus = _ref.shouldReturnFocus;
+  var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),
+    requestFrame = _useAnimationFrame.requestFrame,
+    cancelAllFrames = _useAnimationFrame.cancelAllFrames;
   (0, _react.useEffect)(function () {
     if (!popupRef || shouldCloseOnTab) {
       return _noop.default;
     }
+    if (shouldDisableFocusTrap && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
+      // Plucking trigger & popup content container from the tab order so that
+      // when we Shift+Tab, the focus moves to the element before trigger
+      requestFrame(function () {
+        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
+        if (popupRef && autoFocus) {
+          popupRef.setAttribute('tabindex', '-1');
+        }
+        (initialFocusRef || popupRef).focus();
+      });
+      return _noop.default;
+    }
     var trapConfig = {
       clickOutsideDeactivates: true,
       escapeDeactivates: true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
-      returnFocusOnDeactivate: true
+      returnFocusOnDeactivate: shouldReturnFocus
     };
     var focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
-    var frameId = null;
 
-    // wait for the popup to reposition itself before we focus
-    frameId = requestAnimationFrame(function () {
-      frameId = null;
+    // Wait for the popup to reposition itself before we focus
+    requestFrame(function () {
       focusTrap.activate();
     });
     return function () {
-      if (frameId != null) {
-        cancelAnimationFrame(frameId);
-        frameId = null;
-      }
+      cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef, shouldCloseOnTab]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
 };

package/dist/cjs/utils/is-element-interactive.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInteractiveElement = void 0;
+var interactiveTags = ['button', 'a', 'input', 'select', 'textarea'];
+var isInteractiveElement = exports.isInteractiveElement = function isInteractiveElement(element) {
+  if (interactiveTags.includes(element.tagName.toLowerCase())) {
+    return true;
+  }
+  if (element.getAttribute('tabindex') !== null || element.hasAttribute('contenteditable')) {
+    return true;
+  }
+  return false;
+};

package/dist/cjs/utils/use-animation-frame.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimationFrame = void 0;
+var _react = require("react");
+var useAnimationFrame = exports.useAnimationFrame = function useAnimationFrame() {
+  var animationsRef = (0, _react.useRef)([]);
+  var requestFrame = (0, _react.useCallback)(function (callback) {
+    var id = requestAnimationFrame(callback);
+    animationsRef.current.push(id);
+    return id;
+  }, []);
+  var cancelFrame = (0, _react.useCallback)(function (id) {
+    cancelAnimationFrame(id);
+    animationsRef.current = animationsRef.current.filter(function (frameId) {
+      return frameId !== id;
+    });
+  }, []);
+  var cancelAllFrames = (0, _react.useCallback)(function () {
+    animationsRef.current.forEach(function (id) {
+      return cancelAnimationFrame(id);
+    });
+    animationsRef.current = [];
+  }, []);
+  return {
+    requestFrame: requestFrame,
+    cancelFrame: cancelFrame,
+    cancelAllFrames: cancelAllFrames
+  };
+};

package/dist/es2019/popper-wrapper.js

@@ -81,6 +81,7 @@ function PopperWrapper({
   shouldRenderToParent,
   shouldFitContainer,
   shouldDisableFocusLock,
+  shouldReturnFocus = true,
   strategy,
   role,
   label,
@@ -90,13 +91,18 @@ function PopperWrapper({
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
 
-  // We have cases when we need to prohibit focus locking
-  // e.g. in DropdownMenu
+  // We have cases where we need to close the Popup on Tab press.
+  // Example: DropdownMenu
   const shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
+  const shouldDisableFocusTrap = role !== 'dialog';
   useFocusManager({
     initialFocusRef,
     popupRef,
-    shouldCloseOnTab
+    shouldCloseOnTab,
+    triggerRef,
+    autoFocus,
+    shouldDisableFocusTrap,
+    shouldReturnFocus
   });
   useCloseManager({
     isOpen,
@@ -104,7 +110,10 @@ function PopperWrapper({
     popupRef,
     triggerRef,
     shouldUseCaptureOnOutsideClick,
-    shouldCloseOnTab
+    shouldCloseOnTab,
+    autoFocus,
+    shouldDisableFocusTrap,
+    shouldRenderToParent
   });
   const {
     currentLevel

package/dist/es2019/popup.js

@@ -9,6 +9,7 @@ import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { useUID } from 'react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { Box, xcss } from '@atlaskit/primitives';
@@ -39,6 +40,7 @@ export const Popup = /*#__PURE__*/memo(({
   shouldRenderToParent = false,
   shouldFitContainer = false,
   shouldDisableFocusLock = false,
+  shouldReturnFocus = true,
   strategy,
   role,
   label,
@@ -69,6 +71,7 @@ export const Popup = /*#__PURE__*/memo(({
     shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
     shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,
+    shouldReturnFocus: shouldReturnFocus,
     triggerRef: triggerRef,
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
@@ -83,7 +86,7 @@ export const Popup = /*#__PURE__*/memo(({
       ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
-      'aria-haspopup': true
+      'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
   }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : jsx(Portal, {
     zIndex: zIndex

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

@@ -3,18 +3,28 @@ import { useEffect } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isInteractiveElement } from './utils/is-element-interactive';
+import { useAnimationFrame } from './utils/use-animation-frame';
 export const useCloseManager = ({
   isOpen,
   onClose,
   popupRef,
   triggerRef,
+  autoFocus,
+  shouldDisableFocusTrap,
   shouldUseCaptureOnOutsideClick: capture,
-  shouldCloseOnTab
+  shouldCloseOnTab,
+  shouldRenderToParent
 }) => {
   const {
     isLayerDisabled,
     currentLevel
   } = UNSAFE_useLayering();
+  const {
+    requestFrame,
+    cancelAllFrames
+  } = useAnimationFrame();
   useEffect(() => {
     if (!isOpen || !popupRef) {
       return noop;
@@ -23,6 +33,13 @@ export const useCloseManager = ({
       if (onClose) {
         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');
+        }
+      }
     };
 
     // This check is required for cases where components like
@@ -40,25 +57,102 @@ export const useCloseManager = ({
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled()) {
-        //if it is a disabled layer, we need to disable its click listener.
-        return;
+      if (fg('platform_dst_popup-disable-focuslock')) {
+        var _document$activeEleme;
+        if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
+          //if it is a disabled layer, we need to disable its click listener.
+          return;
+        }
+      } else {
+        if (isLayerDisabled()) {
+          //if it is a disabled layer, we need to disable its click listener.
+          return;
+        }
       }
       const isClickOnPopup = popupRef && popupRef.contains(target);
       const isClickOnTrigger = triggerRef && triggerRef.contains(target);
       if (!isClickOnPopup && !isClickOnTrigger) {
         closePopup(event);
+        // If there was an outside click on a non-interactive element, the focus should be on the trigger.
+        if (document.activeElement && !isInteractiveElement(document.activeElement) && fg('platform_dst_popup-disable-focuslock')) {
+          triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus();
+        }
       }
     };
     const onKeyDown = event => {
-      if (isLayerDisabled()) {
-        return;
-      }
-      const {
-        key
-      } = event;
-      if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
-        closePopup(event);
+      if (fg('platform_dst_popup-disable-focuslock')) {
+        const {
+          key,
+          shiftKey
+        } = event;
+        if (shiftKey && key === 'Tab' && !shouldRenderToParent) {
+          if (isLayerDisabled()) {
+            return;
+          }
+          // We need to move the focus to the popup trigger when the popup is displayed in React.Portal.
+          requestFrame(() => {
+            const isPopupFocusOut = popupRef && !popupRef.contains(document.activeElement);
+            if (isPopupFocusOut) {
+              closePopup(event);
+              if (currentLevel === 1) {
+                triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus();
+              }
+            }
+          });
+          return;
+        }
+        if (key === 'Tab') {
+          var _document$activeEleme2;
+          // We have cases where we need to close the Popup on Tab press.
+          // Example: DropdownMenu
+          if (shouldCloseOnTab) {
+            if (isLayerDisabled()) {
+              return;
+            }
+            closePopup(event);
+            return;
+          }
+          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+            return;
+          }
+          if (shouldDisableFocusTrap) {
+            if (shouldRenderToParent) {
+              // We need to move the focus to the previous interactive element before popup trigger
+              requestFrame(() => {
+                const isPopupFocusOut = popupRef && !popupRef.contains(document.activeElement);
+                if (isPopupFocusOut) {
+                  closePopup(event);
+                }
+              });
+            } else {
+              requestFrame(() => {
+                if (!document.hasFocus()) {
+                  closePopup(event);
+                }
+              });
+            }
+            return;
+          }
+        }
+        if (isLayerDisabled()) {
+          return;
+        }
+        if (key === 'Escape' || key === 'Esc') {
+          if (triggerRef && autoFocus) {
+            triggerRef.focus();
+          }
+          closePopup(event);
+        }
+      } else {
+        if (isLayerDisabled()) {
+          return;
+        }
+        const {
+          key
+        } = event;
+        if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
+          closePopup(event);
+        }
       }
     };
     const unbind = bindAll(window, [{
@@ -80,15 +174,13 @@ export const useCloseManager = ({
         if (isLayerDisabled() || !(document.activeElement instanceof HTMLIFrameElement)) {
           return;
         }
-        const wrapper = document.activeElement.closest('[data-ds--level]');
-        if (!wrapper || currentLevel > Number(wrapper.getAttribute('data-ds--level'))) {
-          closePopup(e);
-        }
+        closePopup(e);
       }
     });
     return () => {
+      cancelAllFrames();
       unbind();
       unbindBlur();
     };
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab, currentLevel]);
+  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
 };

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

@@ -1,36 +1,53 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnimationFrame } from './utils/use-animation-frame';
 export const useFocusManager = ({
   initialFocusRef,
   popupRef,
-  shouldCloseOnTab
+  triggerRef,
+  autoFocus,
+  shouldCloseOnTab,
+  shouldDisableFocusTrap,
+  shouldReturnFocus
 }) => {
+  const {
+    requestFrame,
+    cancelAllFrames
+  } = useAnimationFrame();
   useEffect(() => {
     if (!popupRef || shouldCloseOnTab) {
       return noop;
     }
+    if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
+      // Plucking trigger & popup content container from the tab order so that
+      // when we Shift+Tab, the focus moves to the element before trigger
+      requestFrame(() => {
+        triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '-1');
+        if (popupRef && autoFocus) {
+          popupRef.setAttribute('tabindex', '-1');
+        }
+        (initialFocusRef || popupRef).focus();
+      });
+      return noop;
+    }
     const trapConfig = {
       clickOutsideDeactivates: true,
       escapeDeactivates: true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
-      returnFocusOnDeactivate: true
+      returnFocusOnDeactivate: shouldReturnFocus
     };
     const focusTrap = createFocusTrap(popupRef, trapConfig);
-    let frameId = null;
 
-    // wait for the popup to reposition itself before we focus
-    frameId = requestAnimationFrame(() => {
-      frameId = null;
+    // Wait for the popup to reposition itself before we focus
+    requestFrame(() => {
       focusTrap.activate();
     });
     return () => {
-      if (frameId != null) {
-        cancelAnimationFrame(frameId);
-        frameId = null;
-      }
+      cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef, shouldCloseOnTab]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
 };

package/dist/es2019/utils/is-element-interactive.js

@@ -0,0 +1,10 @@
+const interactiveTags = ['button', 'a', 'input', 'select', 'textarea'];
+export const isInteractiveElement = element => {
+  if (interactiveTags.includes(element.tagName.toLowerCase())) {
+    return true;
+  }
+  if (element.getAttribute('tabindex') !== null || element.hasAttribute('contenteditable')) {
+    return true;
+  }
+  return false;
+};

package/dist/es2019/utils/use-animation-frame.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from 'react';
+export const useAnimationFrame = () => {
+  const animationsRef = useRef([]);
+  const requestFrame = useCallback(callback => {
+    const id = requestAnimationFrame(callback);
+    animationsRef.current.push(id);
+    return id;
+  }, []);
+  const cancelFrame = useCallback(id => {
+    cancelAnimationFrame(id);
+    animationsRef.current = animationsRef.current.filter(frameId => frameId !== id);
+  }, []);
+  const cancelAllFrames = useCallback(() => {
+    animationsRef.current.forEach(id => cancelAnimationFrame(id));
+    animationsRef.current = [];
+  }, []);
+  return {
+    requestFrame,
+    cancelFrame,
+    cancelAllFrames
+  };
+};

package/dist/esm/popper-wrapper.js

@@ -85,6 +85,8 @@ function PopperWrapper(_ref) {
     shouldRenderToParent = _ref.shouldRenderToParent,
     shouldFitContainer = _ref.shouldFitContainer,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
+    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
+    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
@@ -99,13 +101,18 @@ function PopperWrapper(_ref) {
     initialFocusRef = _useState4[0],
     setInitialFocusRef = _useState4[1];
 
-  // We have cases when we need to prohibit focus locking
-  // e.g. in DropdownMenu
+  // We have cases where we need to close the Popup on Tab press.
+  // Example: DropdownMenu
   var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
+  var shouldDisableFocusTrap = role !== 'dialog';
   useFocusManager({
     initialFocusRef: initialFocusRef,
     popupRef: popupRef,
-    shouldCloseOnTab: shouldCloseOnTab
+    shouldCloseOnTab: shouldCloseOnTab,
+    triggerRef: triggerRef,
+    autoFocus: autoFocus,
+    shouldDisableFocusTrap: shouldDisableFocusTrap,
+    shouldReturnFocus: shouldReturnFocus
   });
   useCloseManager({
     isOpen: isOpen,
@@ -113,7 +120,10 @@ function PopperWrapper(_ref) {
     popupRef: popupRef,
     triggerRef: triggerRef,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    shouldCloseOnTab: shouldCloseOnTab
+    shouldCloseOnTab: shouldCloseOnTab,
+    autoFocus: autoFocus,
+    shouldDisableFocusTrap: shouldDisableFocusTrap,
+    shouldRenderToParent: shouldRenderToParent
   });
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
     currentLevel = _UNSAFE_useLayering.currentLevel;

package/dist/esm/popup.js

@@ -10,6 +10,7 @@ import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { useUID } from 'react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { Box, xcss } from '@atlaskit/primitives';
@@ -49,6 +50,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
+    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
+    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
@@ -81,6 +84,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
     shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,
+    shouldReturnFocus: shouldReturnFocus,
     triggerRef: triggerRef,
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
@@ -94,7 +98,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
       ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
-      'aria-haspopup': true
+      'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
   }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : jsx(Portal, {
     zIndex: zIndex

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

@@ -3,16 +3,25 @@ import { useEffect } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isInteractiveElement } from './utils/is-element-interactive';
+import { useAnimationFrame } from './utils/use-animation-frame';
 export var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     popupRef = _ref.popupRef,
     triggerRef = _ref.triggerRef,
+    autoFocus = _ref.autoFocus,
+    shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
     capture = _ref.shouldUseCaptureOnOutsideClick,
-    shouldCloseOnTab = _ref.shouldCloseOnTab;
+    shouldCloseOnTab = _ref.shouldCloseOnTab,
+    shouldRenderToParent = _ref.shouldRenderToParent;
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
     isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled,
     currentLevel = _UNSAFE_useLayering.currentLevel;
+  var _useAnimationFrame = useAnimationFrame(),
+    requestFrame = _useAnimationFrame.requestFrame,
+    cancelAllFrames = _useAnimationFrame.cancelAllFrames;
   useEffect(function () {
     if (!isOpen || !popupRef) {
       return noop;
@@ -21,6 +30,13 @@ export var useCloseManager = function useCloseManager(_ref) {
       if (onClose) {
         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');
+        }
+      }
     };
 
     // This check is required for cases where components like
@@ -36,23 +52,98 @@ export var useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled()) {
-        //if it is a disabled layer, we need to disable its click listener.
-        return;
+      if (fg('platform_dst_popup-disable-focuslock')) {
+        var _document$activeEleme;
+        if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
+          //if it is a disabled layer, we need to disable its click listener.
+          return;
+        }
+      } else {
+        if (isLayerDisabled()) {
+          //if it is a disabled layer, we need to disable its click listener.
+          return;
+        }
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
       if (!isClickOnPopup && !isClickOnTrigger) {
         closePopup(event);
+        // If there was an outside click on a non-interactive element, the focus should be on the trigger.
+        if (document.activeElement && !isInteractiveElement(document.activeElement) && fg('platform_dst_popup-disable-focuslock')) {
+          triggerRef === null || triggerRef === void 0 || triggerRef.focus();
+        }
       }
     };
     var onKeyDown = function onKeyDown(event) {
-      if (isLayerDisabled()) {
-        return;
-      }
-      var key = event.key;
-      if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
-        closePopup(event);
+      if (fg('platform_dst_popup-disable-focuslock')) {
+        var key = event.key,
+          shiftKey = event.shiftKey;
+        if (shiftKey && key === 'Tab' && !shouldRenderToParent) {
+          if (isLayerDisabled()) {
+            return;
+          }
+          // We need to move the focus to the popup trigger when the popup is displayed in React.Portal.
+          requestFrame(function () {
+            var isPopupFocusOut = popupRef && !popupRef.contains(document.activeElement);
+            if (isPopupFocusOut) {
+              closePopup(event);
+              if (currentLevel === 1) {
+                triggerRef === null || triggerRef === void 0 || triggerRef.focus();
+              }
+            }
+          });
+          return;
+        }
+        if (key === 'Tab') {
+          var _document$activeEleme2;
+          // We have cases where we need to close the Popup on Tab press.
+          // Example: DropdownMenu
+          if (shouldCloseOnTab) {
+            if (isLayerDisabled()) {
+              return;
+            }
+            closePopup(event);
+            return;
+          }
+          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+            return;
+          }
+          if (shouldDisableFocusTrap) {
+            if (shouldRenderToParent) {
+              // We need to move the focus to the previous interactive element before popup trigger
+              requestFrame(function () {
+                var isPopupFocusOut = popupRef && !popupRef.contains(document.activeElement);
+                if (isPopupFocusOut) {
+                  closePopup(event);
+                }
+              });
+            } else {
+              requestFrame(function () {
+                if (!document.hasFocus()) {
+                  closePopup(event);
+                }
+              });
+            }
+            return;
+          }
+        }
+        if (isLayerDisabled()) {
+          return;
+        }
+        if (key === 'Escape' || key === 'Esc') {
+          if (triggerRef && autoFocus) {
+            triggerRef.focus();
+          }
+          closePopup(event);
+        }
+      } else {
+        if (isLayerDisabled()) {
+          return;
+        }
+        var _key = event.key;
+        if (_key === 'Escape' || _key === 'Esc' || shouldCloseOnTab && _key === 'Tab') {
+          closePopup(event);
+        }
       }
     };
     var unbind = bindAll(window, [{
@@ -74,15 +165,13 @@ export var useCloseManager = function useCloseManager(_ref) {
         if (isLayerDisabled() || !(document.activeElement instanceof HTMLIFrameElement)) {
           return;
         }
-        var wrapper = document.activeElement.closest('[data-ds--level]');
-        if (!wrapper || currentLevel > Number(wrapper.getAttribute('data-ds--level'))) {
-          closePopup(e);
-        }
+        closePopup(e);
       }
     });
     return function () {
+      cancelAllFrames();
       unbind();
       unbindBlur();
     };
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab, currentLevel]);
+  }, [isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, capture, isLayerDisabled, shouldCloseOnTab, currentLevel, shouldRenderToParent, requestFrame, cancelAllFrames]);
 };

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

@@ -1,35 +1,51 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnimationFrame } from './utils/use-animation-frame';
 export var useFocusManager = function useFocusManager(_ref) {
   var initialFocusRef = _ref.initialFocusRef,
     popupRef = _ref.popupRef,
-    shouldCloseOnTab = _ref.shouldCloseOnTab;
+    triggerRef = _ref.triggerRef,
+    autoFocus = _ref.autoFocus,
+    shouldCloseOnTab = _ref.shouldCloseOnTab,
+    shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
+    shouldReturnFocus = _ref.shouldReturnFocus;
+  var _useAnimationFrame = useAnimationFrame(),
+    requestFrame = _useAnimationFrame.requestFrame,
+    cancelAllFrames = _useAnimationFrame.cancelAllFrames;
   useEffect(function () {
     if (!popupRef || shouldCloseOnTab) {
       return noop;
     }
+    if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
+      // Plucking trigger & popup content container from the tab order so that
+      // when we Shift+Tab, the focus moves to the element before trigger
+      requestFrame(function () {
+        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
+        if (popupRef && autoFocus) {
+          popupRef.setAttribute('tabindex', '-1');
+        }
+        (initialFocusRef || popupRef).focus();
+      });
+      return noop;
+    }
     var trapConfig = {
       clickOutsideDeactivates: true,
       escapeDeactivates: true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
-      returnFocusOnDeactivate: true
+      returnFocusOnDeactivate: shouldReturnFocus
     };
     var focusTrap = createFocusTrap(popupRef, trapConfig);
-    var frameId = null;
 
-    // wait for the popup to reposition itself before we focus
-    frameId = requestAnimationFrame(function () {
-      frameId = null;
+    // Wait for the popup to reposition itself before we focus
+    requestFrame(function () {
       focusTrap.activate();
     });
     return function () {
-      if (frameId != null) {
-        cancelAnimationFrame(frameId);
-        frameId = null;
-      }
+      cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef, shouldCloseOnTab]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
 };

package/dist/esm/utils/is-element-interactive.js

@@ -0,0 +1,10 @@
+var interactiveTags = ['button', 'a', 'input', 'select', 'textarea'];
+export var isInteractiveElement = function isInteractiveElement(element) {
+  if (interactiveTags.includes(element.tagName.toLowerCase())) {
+    return true;
+  }
+  if (element.getAttribute('tabindex') !== null || element.hasAttribute('contenteditable')) {
+    return true;
+  }
+  return false;
+};

package/dist/esm/utils/use-animation-frame.js

@@ -0,0 +1,26 @@
+import { useCallback, useRef } from 'react';
+export var useAnimationFrame = function useAnimationFrame() {
+  var animationsRef = useRef([]);
+  var requestFrame = useCallback(function (callback) {
+    var id = requestAnimationFrame(callback);
+    animationsRef.current.push(id);
+    return id;
+  }, []);
+  var cancelFrame = useCallback(function (id) {
+    cancelAnimationFrame(id);
+    animationsRef.current = animationsRef.current.filter(function (frameId) {
+      return frameId !== id;
+    });
+  }, []);
+  var cancelAllFrames = useCallback(function () {
+    animationsRef.current.forEach(function (id) {
+      return cancelAnimationFrame(id);
+    });
+    animationsRef.current = [];
+  }, []);
+  return {
+    requestFrame: requestFrame,
+    cancelFrame: cancelFrame,
+    cancelAllFrames: cancelAllFrames
+  };
+};

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, 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, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -4,7 +4,7 @@ export interface TriggerProps {
     ref: Ref<any>;
     'aria-controls'?: string;
     'aria-expanded': boolean;
-    'aria-haspopup': boolean;
+    'aria-haspopup': boolean | 'dialog';
 }
 export type PopupRef = HTMLDivElement | null;
 export type TriggerRef = HTMLElement | HTMLButtonElement | null;
@@ -164,10 +164,15 @@ interface BaseProps {
      */
     shouldFitContainer?: boolean;
     /**
-     * This allows the popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
+     * This makes the popup close on Tab key press. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
      */
     shouldDisableFocusLock?: boolean;
+    /**
+     * This determines whether the popup trigger will be focused when the popup content closes.
+     * The default is `true`.
+     */
+    shouldReturnFocus?: boolean;
     /**
      * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
      * The default is `fixed`.
@@ -226,11 +231,18 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
     triggerRef: TriggerRef;
     shouldUseCaptureOnOutsideClick?: boolean;
     shouldCloseOnTab?: boolean;
+    shouldDisableFocusTrap: boolean;
+    shouldRenderToParent?: boolean;
+    autoFocus: boolean;
 };
 export type FocusManagerHook = {
     initialFocusRef: HTMLElement | null;
     popupRef: PopupRef;
     shouldCloseOnTab?: boolean;
+    triggerRef: TriggerRef;
+    autoFocus: boolean;
+    shouldDisableFocusTrap: boolean;
+    shouldReturnFocus: boolean;
 };
 export type RepositionOnUpdateProps = PropsWithChildren<{
     update: PopperChildrenProps['update'];

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, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;
+export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, shouldRenderToParent, }: CloseManagerHook) => void;

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

@@ -1,2 +1,2 @@
 import { type FocusManagerHook } from './types';
-export declare const useFocusManager: ({ initialFocusRef, popupRef, shouldCloseOnTab, }: FocusManagerHook) => void;
+export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;

package/dist/types/utils/is-element-interactive.d.ts

@@ -0,0 +1 @@
+export declare const isInteractiveElement: (element: HTMLElement) => boolean;

package/dist/types/utils/use-animation-frame.d.ts

@@ -0,0 +1,5 @@
+export declare const useAnimationFrame: () => {
+    requestFrame: (callback: () => void) => number;
+    cancelFrame: (id: number) => void;
+    cancelAllFrames: () => void;
+};

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, 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, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

@@ -4,7 +4,7 @@ export interface TriggerProps {
     ref: Ref<any>;
     'aria-controls'?: string;
     'aria-expanded': boolean;
-    'aria-haspopup': boolean;
+    'aria-haspopup': boolean | 'dialog';
 }
 export type PopupRef = HTMLDivElement | null;
 export type TriggerRef = HTMLElement | HTMLButtonElement | null;
@@ -167,10 +167,15 @@ interface BaseProps {
      */
     shouldFitContainer?: boolean;
     /**
-     * This allows the popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
+     * This makes the popup close on Tab key press. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
      */
     shouldDisableFocusLock?: boolean;
+    /**
+     * This determines whether the popup trigger will be focused when the popup content closes.
+     * The default is `true`.
+     */
+    shouldReturnFocus?: boolean;
     /**
      * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
      * The default is `fixed`.
@@ -229,11 +234,18 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
     triggerRef: TriggerRef;
     shouldUseCaptureOnOutsideClick?: boolean;
     shouldCloseOnTab?: boolean;
+    shouldDisableFocusTrap: boolean;
+    shouldRenderToParent?: boolean;
+    autoFocus: boolean;
 };
 export type FocusManagerHook = {
     initialFocusRef: HTMLElement | null;
     popupRef: PopupRef;
     shouldCloseOnTab?: boolean;
+    triggerRef: TriggerRef;
+    autoFocus: boolean;
+    shouldDisableFocusTrap: boolean;
+    shouldReturnFocus: boolean;
 };
 export type RepositionOnUpdateProps = PropsWithChildren<{
     update: PopperChildrenProps['update'];

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, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;
+export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, autoFocus, shouldDisableFocusTrap, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, shouldRenderToParent, }: CloseManagerHook) => void;

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

@@ -1,2 +1,2 @@
 import { type FocusManagerHook } from './types';
-export declare const useFocusManager: ({ initialFocusRef, popupRef, shouldCloseOnTab, }: FocusManagerHook) => void;
+export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;

package/dist/types-ts4.5/utils/is-element-interactive.d.ts

@@ -0,0 +1 @@
+export declare const isInteractiveElement: (element: HTMLElement) => boolean;

package/dist/types-ts4.5/utils/use-animation-frame.d.ts

@@ -0,0 +1,5 @@
+export declare const useAnimationFrame: () => {
+    requestFrame: (callback: () => void) => number;
+    cancelFrame: (id: number) => void;
+    cancelAllFrames: () => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.22.2",
+	"version": "1.23.1",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,14 +40,14 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.2.0",
 		"@atlaskit/portal": "^4.9.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -62,9 +62,10 @@
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
+		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^19.2.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/button": "^20.1.0",
+		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/toggle": "^13.3.0",
@@ -109,6 +110,9 @@
 	"platform-feature-flags": {
 		"platform.design-system-team.iframe_gojiv": {
 			"type": "boolean"
+		},
+		"platform_dst_popup-disable-focuslock": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"