@atlaskit/popup 1.12.0 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/popup
 
+## 1.13.0
+
+### Minor Changes
+
+- [#70573](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70573) [`c8fa9cdd08e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c8fa9cdd08e4) - Accessibility changes. Add a new optional prop `shouldDisableFocusLock`. We are testing the ability to close the popup by pressing the Tab key when `shouldDisableFocusLock` is `true` and `shouldRenderToParent` is `true` behind a feature flag. This is necessary for the dropdown menu to work correctly. If this fix is successful it will be available in a later release.
+
 ## 1.12.0
 
 ### Minor Changes

package/dist/cjs/popper-wrapper.js

@@ -75,7 +75,8 @@ function PopperWrapper(_ref) {
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     triggerRef = _ref.triggerRef,
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
-    shouldRenderToParent = _ref.shouldRenderToParent;
+    shouldRenderToParent = _ref.shouldRenderToParent,
+    shouldDisableFocusLock = _ref.shouldDisableFocusLock;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -84,16 +85,22 @@ function PopperWrapper(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     initialFocusRef = _useState4[0],
     setInitialFocusRef = _useState4[1];
+
+  // We have cases when we need to prohibit focus locking
+  // e.g. in DropdownMenu
+  var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
   (0, _useFocusManager.useFocusManager)({
     initialFocusRef: initialFocusRef,
-    popupRef: popupRef
+    popupRef: popupRef,
+    shouldCloseOnTab: shouldCloseOnTab
   });
   (0, _useCloseManager.useCloseManager)({
     isOpen: isOpen,
     onClose: onClose,
     popupRef: popupRef,
     triggerRef: triggerRef,
-    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldCloseOnTab: shouldCloseOnTab
   });
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
     currentLevel = _UNSAFE_useLayering.currentLevel;

package/dist/cjs/popup.js

@@ -42,7 +42,9 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
-    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
+    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
+    _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
+    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -92,6 +94,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef
   }));
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {

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

@@ -14,7 +14,8 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     onClose = _ref.onClose,
     popupRef = _ref.popupRef,
     triggerRef = _ref.triggerRef,
-    capture = _ref.shouldUseCaptureOnOutsideClick;
+    capture = _ref.shouldUseCaptureOnOutsideClick,
+    shouldCloseOnTab = _ref.shouldCloseOnTab;
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
     isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
   (0, _react.useEffect)(function () {
@@ -51,7 +52,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
         return;
       }
       var key = event.key;
-      if (key === 'Escape' || key === 'Esc') {
+      if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
         closePopup(event);
       }
     };
@@ -66,5 +67,5 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
 };

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

@@ -10,9 +10,10 @@ var _focusTrap = _interopRequireDefault(require("focus-trap"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
   var initialFocusRef = _ref.initialFocusRef,
-    popupRef = _ref.popupRef;
+    popupRef = _ref.popupRef,
+    shouldCloseOnTab = _ref.shouldCloseOnTab;
   (0, _react.useEffect)(function () {
-    if (!popupRef) {
+    if (!popupRef || shouldCloseOnTab) {
       return _noop.default;
     }
     var trapConfig = {
@@ -37,5 +38,5 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
       }
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef]);
+  }, [popupRef, initialFocusRef, shouldCloseOnTab]);
 };

package/dist/es2019/popper-wrapper.js

@@ -64,20 +64,27 @@ function PopperWrapper({
   autoFocus = true,
   triggerRef,
   shouldUseCaptureOnOutsideClick,
-  shouldRenderToParent
+  shouldRenderToParent,
+  shouldDisableFocusLock
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
+
+  // We have cases when we need to prohibit focus locking
+  // e.g. in DropdownMenu
+  const shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
   useFocusManager({
     initialFocusRef,
-    popupRef
+    popupRef,
+    shouldCloseOnTab
   });
   useCloseManager({
     isOpen,
     onClose,
     popupRef,
     triggerRef,
-    shouldUseCaptureOnOutsideClick
+    shouldUseCaptureOnOutsideClick,
+    shouldCloseOnTab
   });
   const {
     currentLevel

package/dist/es2019/popup.js

@@ -26,7 +26,8 @@ export const Popup = /*#__PURE__*/memo(({
   autoFocus = true,
   zIndex = defaultLayer,
   shouldUseCaptureOnOutsideClick = false,
-  shouldRenderToParent = false
+  shouldRenderToParent = false,
+  shouldDisableFocusLock = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -70,6 +71,7 @@ export const Popup = /*#__PURE__*/memo(({
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef
   }));
   return jsx(Manager, null, jsx(Reference, null, ({

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

@@ -7,7 +7,8 @@ export const useCloseManager = ({
   onClose,
   popupRef,
   triggerRef,
-  shouldUseCaptureOnOutsideClick: capture
+  shouldUseCaptureOnOutsideClick: capture,
+  shouldCloseOnTab
 }) => {
   const {
     isLayerDisabled
@@ -50,7 +51,7 @@ export const useCloseManager = ({
       const {
         key
       } = event;
-      if (key === 'Escape' || key === 'Esc') {
+      if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
         closePopup(event);
       }
     };
@@ -65,5 +66,5 @@ export const useCloseManager = ({
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
 };

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

@@ -3,10 +3,11 @@ import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
 export const useFocusManager = ({
   initialFocusRef,
-  popupRef
+  popupRef,
+  shouldCloseOnTab
 }) => {
   useEffect(() => {
-    if (!popupRef) {
+    if (!popupRef || shouldCloseOnTab) {
       return noop;
     }
     const trapConfig = {
@@ -31,5 +32,5 @@ export const useFocusManager = ({
       }
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef]);
+  }, [popupRef, initialFocusRef, shouldCloseOnTab]);
 };

package/dist/esm/popper-wrapper.js

@@ -68,7 +68,8 @@ function PopperWrapper(_ref) {
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     triggerRef = _ref.triggerRef,
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
-    shouldRenderToParent = _ref.shouldRenderToParent;
+    shouldRenderToParent = _ref.shouldRenderToParent,
+    shouldDisableFocusLock = _ref.shouldDisableFocusLock;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -77,16 +78,22 @@ function PopperWrapper(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     initialFocusRef = _useState4[0],
     setInitialFocusRef = _useState4[1];
+
+  // We have cases when we need to prohibit focus locking
+  // e.g. in DropdownMenu
+  var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
   useFocusManager({
     initialFocusRef: initialFocusRef,
-    popupRef: popupRef
+    popupRef: popupRef,
+    shouldCloseOnTab: shouldCloseOnTab
   });
   useCloseManager({
     isOpen: isOpen,
     onClose: onClose,
     popupRef: popupRef,
     triggerRef: triggerRef,
-    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldCloseOnTab: shouldCloseOnTab
   });
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
     currentLevel = _UNSAFE_useLayering.currentLevel;

package/dist/esm/popup.js

@@ -34,7 +34,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
     shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
-    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
+    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
+    _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
+    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -84,6 +86,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef
   }));
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {

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

@@ -7,7 +7,8 @@ export var useCloseManager = function useCloseManager(_ref) {
     onClose = _ref.onClose,
     popupRef = _ref.popupRef,
     triggerRef = _ref.triggerRef,
-    capture = _ref.shouldUseCaptureOnOutsideClick;
+    capture = _ref.shouldUseCaptureOnOutsideClick,
+    shouldCloseOnTab = _ref.shouldCloseOnTab;
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
     isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
   useEffect(function () {
@@ -44,7 +45,7 @@ export var useCloseManager = function useCloseManager(_ref) {
         return;
       }
       var key = event.key;
-      if (key === 'Escape' || key === 'Esc') {
+      if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
         closePopup(event);
       }
     };
@@ -59,5 +60,5 @@ export var useCloseManager = function useCloseManager(_ref) {
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
 };

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

@@ -3,9 +3,10 @@ import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
 export var useFocusManager = function useFocusManager(_ref) {
   var initialFocusRef = _ref.initialFocusRef,
-    popupRef = _ref.popupRef;
+    popupRef = _ref.popupRef,
+    shouldCloseOnTab = _ref.shouldCloseOnTab;
   useEffect(function () {
-    if (!popupRef) {
+    if (!popupRef || shouldCloseOnTab) {
       return noop;
     }
     var trapConfig = {
@@ -30,5 +31,5 @@ export var useFocusManager = function useFocusManager(_ref) {
       }
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef]);
+  }, [popupRef, initialFocusRef, shouldCloseOnTab]);
 };

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -144,6 +144,11 @@ interface BaseProps {
      * Defaults to `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * Allows the Popup disable focus lock. Will only work when shouldRenderToParent is true.
+     * Defaults to `false`.
+     */
+    shouldDisableFocusLock?: boolean;
 }
 export interface PopupProps extends BaseProps {
     /**
@@ -166,10 +171,12 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
     popupRef: PopupRef;
     triggerRef: TriggerRef;
     shouldUseCaptureOnOutsideClick?: boolean;
+    shouldCloseOnTab?: boolean;
 };
 export type FocusManagerHook = {
     initialFocusRef: HTMLElement | null;
     popupRef: PopupRef;
+    shouldCloseOnTab?: boolean;
 };
 export type RepositionOnUpdateProps = {
     update: PopperChildrenProps['update'];

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

@@ -1,2 +1,2 @@
 import { CloseManagerHook } from './types';
-export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;
+export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;

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

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

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

@@ -147,6 +147,11 @@ interface BaseProps {
      * Defaults to `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * Allows the Popup disable focus lock. Will only work when shouldRenderToParent is true.
+     * Defaults to `false`.
+     */
+    shouldDisableFocusLock?: boolean;
 }
 export interface PopupProps extends BaseProps {
     /**
@@ -169,10 +174,12 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
     popupRef: PopupRef;
     triggerRef: TriggerRef;
     shouldUseCaptureOnOutsideClick?: boolean;
+    shouldCloseOnTab?: boolean;
 };
 export type FocusManagerHook = {
     initialFocusRef: HTMLElement | null;
     popupRef: PopupRef;
+    shouldCloseOnTab?: boolean;
 };
 export type RepositionOnUpdateProps = {
     update: PopperChildrenProps['update'];

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

@@ -1,2 +1,2 @@
 import { CloseManagerHook } from './types';
-export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;
+export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.35.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -58,8 +58,8 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^17.3.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/button": "^17.6.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",