@atlaskit/popup 1.22.1 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/popup
 
+## 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
+
+- Updated dependencies
+
 ## 1.22.1
 
 ### Patch Changes

package/dist/cjs/popper-wrapper.js

@@ -105,13 +105,17 @@ 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
   });
   (0, _useCloseManager.useCloseManager)({
     isOpen: isOpen,
@@ -119,7 +123,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");
@@ -102,7 +103,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,14 +8,34 @@ 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;
+  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,
@@ -24,19 +44,14 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
       returnFocusOnDeactivate: true
     };
     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]);
 };

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

@@ -90,13 +90,17 @@ 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
   });
   useCloseManager({
     isOpen,
@@ -104,7 +108,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';
@@ -83,7 +84,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,15 +1,36 @@
 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
 }) => {
+  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,
@@ -18,19 +39,14 @@ export const useFocusManager = ({
       returnFocusOnDeactivate: true
     };
     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]);
 };

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

@@ -99,13 +99,17 @@ 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
   });
   useCloseManager({
     isOpen: isOpen,
@@ -113,7 +117,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';
@@ -94,7 +95,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,14 +1,34 @@
 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;
+  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,
@@ -17,19 +37,14 @@ export var useFocusManager = function useFocusManager(_ref) {
       returnFocusOnDeactivate: true
     };
     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]);
 };

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/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,7 +164,7 @@ 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;
@@ -226,11 +226,17 @@ 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;
 };
 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, }: 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/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,7 +167,7 @@ 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;
@@ -229,11 +229,17 @@ 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;
 };
 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, }: 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.1",
+	"version": "1.23.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,7 +46,7 @@
 		"@atlaskit/popper": "^6.2.0",
 		"@atlaskit/portal": "^4.9.0",
 		"@atlaskit/primitives": "^12.0.0",
-		"@atlaskit/theme": "^12.12.0",
+		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.58.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -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.0.0",
+		"@atlaskit/icon": "^22.13.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/"