@atlaskit/popup 1.23.0 → 1.23.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/popup
 
+## 1.23.2
+
+### Patch Changes
+
+- [#134766](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134766)
+  [`56e1c0d98f0c2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56e1c0d98f0c2) -
+  Fixed unnecessary closing of modal dialogs that opened from a 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

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,
@@ -115,7 +117,8 @@ function PopperWrapper(_ref) {
     shouldCloseOnTab: shouldCloseOnTab,
     triggerRef: triggerRef,
     autoFocus: autoFocus,
-    shouldDisableFocusTrap: shouldDisableFocusTrap
+    shouldDisableFocusTrap: shouldDisableFocusTrap,
+    shouldReturnFocus: shouldReturnFocus
   });
   (0, _useCloseManager.useCloseManager)({
     isOpen: isOpen,

package/dist/cjs/popup.js

@@ -58,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,
@@ -90,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,

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

@@ -60,17 +60,9 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         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;
-        }
+      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);
@@ -103,7 +95,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
           return;
         }
         if (key === 'Tab') {
-          var _document$activeEleme2;
+          var _document$activeEleme;
           // We have cases where we need to close the Popup on Tab press.
           // Example: DropdownMenu
           if (shouldCloseOnTab) {
@@ -113,7 +105,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
             closePopup(event);
             return;
           }
-          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+          if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
             return;
           }
           if (shouldDisableFocusTrap) {

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

@@ -16,7 +16,8 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
     triggerRef = _ref.triggerRef,
     autoFocus = _ref.autoFocus,
     shouldCloseOnTab = _ref.shouldCloseOnTab,
-    shouldDisableFocusTrap = _ref.shouldDisableFocusTrap;
+    shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
+    shouldReturnFocus = _ref.shouldReturnFocus;
   var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),
     requestFrame = _useAnimationFrame.requestFrame,
     cancelAllFrames = _useAnimationFrame.cancelAllFrames;
@@ -41,7 +42,7 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
       escapeDeactivates: true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
-      returnFocusOnDeactivate: true
+      returnFocusOnDeactivate: shouldReturnFocus
     };
     var focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
 
@@ -53,5 +54,5 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
       cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
 };

package/dist/es2019/popper-wrapper.js

@@ -81,6 +81,7 @@ function PopperWrapper({
   shouldRenderToParent,
   shouldFitContainer,
   shouldDisableFocusLock,
+  shouldReturnFocus = true,
   strategy,
   role,
   label,
@@ -100,7 +101,8 @@ function PopperWrapper({
     shouldCloseOnTab,
     triggerRef,
     autoFocus,
-    shouldDisableFocusTrap
+    shouldDisableFocusTrap,
+    shouldReturnFocus
   });
   useCloseManager({
     isOpen,

package/dist/es2019/popup.js

@@ -40,6 +40,7 @@ export const Popup = /*#__PURE__*/memo(({
   shouldRenderToParent = false,
   shouldFitContainer = false,
   shouldDisableFocusLock = false,
+  shouldReturnFocus = true,
   strategy,
   role,
   label,
@@ -70,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,

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

@@ -57,17 +57,9 @@ export const useCloseManager = ({
       if (!doesDomNodeExist) {
         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;
-        }
+      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);
@@ -102,7 +94,7 @@ export const useCloseManager = ({
           return;
         }
         if (key === 'Tab') {
-          var _document$activeEleme2;
+          var _document$activeEleme;
           // We have cases where we need to close the Popup on Tab press.
           // Example: DropdownMenu
           if (shouldCloseOnTab) {
@@ -112,7 +104,7 @@ export const useCloseManager = ({
             closePopup(event);
             return;
           }
-          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+          if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
             return;
           }
           if (shouldDisableFocusTrap) {

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

@@ -9,7 +9,8 @@ export const useFocusManager = ({
   triggerRef,
   autoFocus,
   shouldCloseOnTab,
-  shouldDisableFocusTrap
+  shouldDisableFocusTrap,
+  shouldReturnFocus
 }) => {
   const {
     requestFrame,
@@ -36,7 +37,7 @@ export const useFocusManager = ({
       escapeDeactivates: true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
-      returnFocusOnDeactivate: true
+      returnFocusOnDeactivate: shouldReturnFocus
     };
     const focusTrap = createFocusTrap(popupRef, trapConfig);
 
@@ -48,5 +49,5 @@ export const useFocusManager = ({
       cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
 };

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,
@@ -109,7 +111,8 @@ function PopperWrapper(_ref) {
     shouldCloseOnTab: shouldCloseOnTab,
     triggerRef: triggerRef,
     autoFocus: autoFocus,
-    shouldDisableFocusTrap: shouldDisableFocusTrap
+    shouldDisableFocusTrap: shouldDisableFocusTrap,
+    shouldReturnFocus: shouldReturnFocus
   });
   useCloseManager({
     isOpen: isOpen,

package/dist/esm/popup.js

@@ -50,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,
@@ -82,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,

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

@@ -52,17 +52,9 @@ export var useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         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;
-        }
+      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);
@@ -95,7 +87,7 @@ export var useCloseManager = function useCloseManager(_ref) {
           return;
         }
         if (key === 'Tab') {
-          var _document$activeEleme2;
+          var _document$activeEleme;
           // We have cases where we need to close the Popup on Tab press.
           // Example: DropdownMenu
           if (shouldCloseOnTab) {
@@ -105,7 +97,7 @@ export var useCloseManager = function useCloseManager(_ref) {
             closePopup(event);
             return;
           }
-          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+          if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
             return;
           }
           if (shouldDisableFocusTrap) {

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

@@ -9,7 +9,8 @@ export var useFocusManager = function useFocusManager(_ref) {
     triggerRef = _ref.triggerRef,
     autoFocus = _ref.autoFocus,
     shouldCloseOnTab = _ref.shouldCloseOnTab,
-    shouldDisableFocusTrap = _ref.shouldDisableFocusTrap;
+    shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
+    shouldReturnFocus = _ref.shouldReturnFocus;
   var _useAnimationFrame = useAnimationFrame(),
     requestFrame = _useAnimationFrame.requestFrame,
     cancelAllFrames = _useAnimationFrame.cancelAllFrames;
@@ -34,7 +35,7 @@ export var useFocusManager = function useFocusManager(_ref) {
       escapeDeactivates: true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
-      returnFocusOnDeactivate: true
+      returnFocusOnDeactivate: shouldReturnFocus
     };
     var focusTrap = createFocusTrap(popupRef, trapConfig);
 
@@ -46,5 +47,5 @@ export var useFocusManager = function useFocusManager(_ref) {
       cancelAllFrames();
       focusTrap.deactivate();
     };
-  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames]);
+  }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
 };

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

@@ -168,6 +168,11 @@ interface BaseProps {
      * 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`.
@@ -237,6 +242,7 @@ export type FocusManagerHook = {
     triggerRef: TriggerRef;
     autoFocus: boolean;
     shouldDisableFocusTrap: boolean;
+    shouldReturnFocus: boolean;
 };
 export type RepositionOnUpdateProps = PropsWithChildren<{
     update: PopperChildrenProps['update'];

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

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

@@ -171,6 +171,11 @@ interface BaseProps {
      * 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`.
@@ -240,6 +245,7 @@ export type FocusManagerHook = {
     triggerRef: TriggerRef;
     autoFocus: boolean;
     shouldDisableFocusTrap: boolean;
+    shouldReturnFocus: boolean;
 };
 export type RepositionOnUpdateProps = PropsWithChildren<{
     update: PopperChildrenProps['update'];

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, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, }: FocusManagerHook) => void;
+export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.23.0",
+	"version": "1.23.2",
 	"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",
@@ -64,8 +64,8 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^20.0.0",
-		"@atlaskit/icon": "^22.13.0",
+		"@atlaskit/button": "^20.1.0",
+		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/toggle": "^13.3.0",