@atlaskit/popup 1.1.6 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/popup
 
+## 1.2.0
+
+### Minor Changes
+
+- [`c2dd770a743`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2dd770a743) - Add new prop which controls is outside click should be bound using capture
+
 ## 1.1.6
 
 ### Minor Changes

package/dist/cjs/PopperWrapper.js

@@ -65,7 +65,8 @@ function PopperWrapper(_ref) {
       PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-      triggerRef = _ref.triggerRef;
+      triggerRef = _ref.triggerRef,
+      shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -85,7 +86,8 @@ function PopperWrapper(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     popupRef: popupRef,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
   });
   var modifiers = (0, _react.useMemo)(function () {
     return [{

package/dist/cjs/Popup.js

@@ -44,7 +44,9 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
       _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex;
+      zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
+      _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
+      shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -85,6 +87,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     testId: testId,
     onClose: onClose,
     autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
   })));
 });

package/dist/cjs/useCloseManager.js

@@ -15,7 +15,8 @@ var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
       onClose = _ref.onClose,
       popupRef = _ref.popupRef,
-      triggerRef = _ref.triggerRef;
+      triggerRef = _ref.triggerRef,
+      capture = _ref.shouldUseCaptureOnOutsideClick;
   (0, _react.useEffect)(function () {
     if (!isOpen || !popupRef) {
       return noop;
@@ -61,13 +62,16 @@ var useCloseManager = function useCloseManager(_ref) {
     var unbind = (0, _bindEventListener.bindAll)(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
     {
       type: 'click',
-      listener: onClick
+      listener: onClick,
+      options: {
+        capture: capture
+      }
     }, {
       type: 'keydown',
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture]);
 };
 
 exports.useCloseManager = useCloseManager;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.1.6",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/es2019/PopperWrapper.js

@@ -41,7 +41,8 @@ function PopperWrapper({
   placement = 'auto',
   popupComponent: PopupContainer = DefaultPopupComponent,
   autoFocus = true,
-  triggerRef
+  triggerRef,
+  shouldUseCaptureOnOutsideClick
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -53,7 +54,8 @@ function PopperWrapper({
     isOpen,
     onClose,
     popupRef,
-    triggerRef
+    triggerRef,
+    shouldUseCaptureOnOutsideClick
   });
   const modifiers = useMemo(() => [{
     name: 'flip',

package/dist/es2019/Popup.js

@@ -21,7 +21,8 @@ export const Popup = /*#__PURE__*/memo(({
   fallbackPlacements,
   popupComponent: PopupContainer,
   autoFocus = true,
-  zIndex = defaultLayer
+  zIndex = defaultLayer,
+  shouldUseCaptureOnOutsideClick = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   return jsx(Manager, null, jsx(Reference, null, ({
@@ -59,6 +60,7 @@ export const Popup = /*#__PURE__*/memo(({
     testId: testId,
     onClose: onClose,
     autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
   })));
 });

package/dist/es2019/useCloseManager.js

@@ -7,7 +7,8 @@ export const useCloseManager = ({
   isOpen,
   onClose,
   popupRef,
-  triggerRef
+  triggerRef,
+  shouldUseCaptureOnOutsideClick: capture
 }) => {
   useEffect(() => {
     if (!isOpen || !popupRef) {
@@ -57,11 +58,14 @@ export const useCloseManager = ({
     const unbind = bindAll(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
     {
       type: 'click',
-      listener: onClick
+      listener: onClick,
+      options: {
+        capture
+      }
     }, {
       type: 'keydown',
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture]);
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.1.6",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/esm/PopperWrapper.js

@@ -47,7 +47,8 @@ function PopperWrapper(_ref) {
       PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-      triggerRef = _ref.triggerRef;
+      triggerRef = _ref.triggerRef,
+      shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -67,7 +68,8 @@ function PopperWrapper(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     popupRef: popupRef,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
   });
   var modifiers = useMemo(function () {
     return [{

package/dist/esm/Popup.js

@@ -28,7 +28,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
       _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex;
+      zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
+      _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
+      shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -69,6 +71,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     testId: testId,
     onClose: onClose,
     autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
   })));
 });

package/dist/esm/useCloseManager.js

@@ -7,7 +7,8 @@ export var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
       onClose = _ref.onClose,
       popupRef = _ref.popupRef,
-      triggerRef = _ref.triggerRef;
+      triggerRef = _ref.triggerRef,
+      capture = _ref.shouldUseCaptureOnOutsideClick;
   useEffect(function () {
     if (!isOpen || !popupRef) {
       return noop;
@@ -53,11 +54,14 @@ export var useCloseManager = function useCloseManager(_ref) {
     var unbind = bindAll(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
     {
       type: 'click',
-      listener: onClick
+      listener: onClick,
+      options: {
+        capture: capture
+      }
     }, {
       type: 'keydown',
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture]);
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.1.6",
+	"version": "1.2.0",
 	"sideEffects": false
 }

package/dist/types/PopperWrapper.d.ts

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

package/dist/types/types.d.ts

@@ -128,6 +128,11 @@ interface BaseProps {
      * Defaults to `true`.
      */
     autoFocus?: boolean;
+    /**
+     * Controls if the event which handles clicks outside the popup is be bound with
+     *  `capture: true`
+     */
+    shouldUseCaptureOnOutsideClick?: boolean;
 }
 export interface PopupProps extends BaseProps {
     /**
@@ -149,6 +154,7 @@ export interface PopperWrapperProps extends BaseProps {
 export declare type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
     popupRef: PopupRef;
     triggerRef: TriggerRef;
+    shouldUseCaptureOnOutsideClick?: boolean;
 };
 export declare type FocusManagerHook = {
     popupRef: PopupRef;

package/dist/types/useCloseManager.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "A portalled popup primitive that is tied to a trigger element.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"