@atlaskit/popup 4.3.14 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/popup
 
+## 4.4.0
+
+### Minor Changes
+
+- [`02c6e19e8ac81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02c6e19e8ac81) -
+  Popup will now stay open when a click starts inside the popup but then moves outside the popup.
+  The `onClose` callback will not be called in this case. This aligns it with the behaviour of Modal
+  Dialog.
+
+  This change is behind a feature flag.
+
+## 4.3.15
+
+### Patch Changes
+
+- [`f0662cd7a143e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0662cd7a143e) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
 ## 4.3.14
 
 ### Patch Changes

package/dist/cjs/popper-wrapper.js

@@ -32,7 +32,7 @@ var scrollableStyles = null;
 var blanketStyles = null;
 var modalStyles = null;
 var focusRingStyles = {
-  root: "_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y"
+  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,

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

@@ -30,6 +30,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
   var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),
     requestFrame = _useAnimationFrame.requestFrame,
     cancelAllFrames = _useAnimationFrame.cancelAllFrames;
+  var mouseDownTarget = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (!isOpen || !popupRef) {
       return _noop.default;
@@ -88,7 +89,8 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
-      if (!isClickOnPopup && !isClickOnTrigger) {
+      var didClickStartInsidePopup = popupRef && mouseDownTarget.current instanceof Node && popupRef.contains(mouseDownTarget.current);
+      if (!isClickOnPopup && !isClickOnTrigger && ((0, _platformFeatureFlags.fg)('popup-onclose-fix-mouse-down-inside-popup') ? !didClickStartInsidePopup : true)) {
         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')) {
@@ -96,6 +98,19 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
         }
       }
     };
+    var onMouseDown = function onMouseDown(event) {
+      /**
+       * Tracking the target of the mouse down event.
+       * This is used to prevent the popup from closing when the user mouses down inside the popup, but then
+       * moves the mouse outside the popup before releasing the mouse button.
+       *
+       * This is a common user interaction - users may have mistakenly clicked on something, or changed their mind,
+       * so they try to cancel their click by moving their mouse away from what they had moused down on.
+       *
+       * Blanket uses the same technique.
+       */
+      mouseDownTarget.current = event.target;
+    };
     var onKeyDown = function onKeyDown(event) {
       if ((0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
         var key = event.key,
@@ -192,6 +207,9 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
         }, {
           type: 'keydown',
           listener: onKeyDown
+        }, {
+          type: 'mousedown',
+          listener: onMouseDown
         }]);
       }, 0);
     } else {
@@ -204,6 +222,9 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       }, {
         type: 'keydown',
         listener: onKeyDown
+      }, {
+        type: 'mousedown',
+        listener: onMouseDown
       }]);
     }
 

package/dist/es2019/popper-wrapper.js

@@ -19,7 +19,7 @@ const scrollableStyles = null;
 const blanketStyles = null;
 const modalStyles = null;
 const focusRingStyles = {
-  root: "_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y"
+  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {

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

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-duplicate-imports
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { useLayering } from '@atlaskit/layering';
@@ -25,6 +25,7 @@ export const useCloseManager = ({
     requestFrame,
     cancelAllFrames
   } = useAnimationFrame();
+  const mouseDownTarget = useRef(null);
   useEffect(() => {
     if (!isOpen || !popupRef) {
       return noop;
@@ -85,7 +86,8 @@ export const useCloseManager = ({
       }
       const isClickOnPopup = popupRef && popupRef.contains(target);
       const isClickOnTrigger = triggerRef && triggerRef.contains(target);
-      if (!isClickOnPopup && !isClickOnTrigger) {
+      const didClickStartInsidePopup = popupRef && mouseDownTarget.current instanceof Node && popupRef.contains(mouseDownTarget.current);
+      if (!isClickOnPopup && !isClickOnTrigger && (fg('popup-onclose-fix-mouse-down-inside-popup') ? !didClickStartInsidePopup : true)) {
         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')) {
@@ -93,6 +95,19 @@ export const useCloseManager = ({
         }
       }
     };
+    const onMouseDown = event => {
+      /**
+       * Tracking the target of the mouse down event.
+       * This is used to prevent the popup from closing when the user mouses down inside the popup, but then
+       * moves the mouse outside the popup before releasing the mouse button.
+       *
+       * This is a common user interaction - users may have mistakenly clicked on something, or changed their mind,
+       * so they try to cancel their click by moving their mouse away from what they had moused down on.
+       *
+       * Blanket uses the same technique.
+       */
+      mouseDownTarget.current = event.target;
+    };
     const onKeyDown = event => {
       if (fg('platform_dst_popup-disable-focuslock')) {
         const {
@@ -193,6 +208,9 @@ export const useCloseManager = ({
         }, {
           type: 'keydown',
           listener: onKeyDown
+        }, {
+          type: 'mousedown',
+          listener: onMouseDown
         }]);
       }, 0);
     } else {
@@ -205,6 +223,9 @@ export const useCloseManager = ({
       }, {
         type: 'keydown',
         listener: onKeyDown
+      }, {
+        type: 'mousedown',
+        listener: onMouseDown
       }]);
     }
 

package/dist/esm/popper-wrapper.js

@@ -23,7 +23,7 @@ var scrollableStyles = null;
 var blanketStyles = null;
 var modalStyles = null;
 var focusRingStyles = {
-  root: "_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y"
+  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,

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

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-duplicate-imports
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { useLayering } from '@atlaskit/layering';
@@ -22,6 +22,7 @@ export var useCloseManager = function useCloseManager(_ref) {
   var _useAnimationFrame = useAnimationFrame(),
     requestFrame = _useAnimationFrame.requestFrame,
     cancelAllFrames = _useAnimationFrame.cancelAllFrames;
+  var mouseDownTarget = useRef(null);
   useEffect(function () {
     if (!isOpen || !popupRef) {
       return noop;
@@ -80,7 +81,8 @@ export var useCloseManager = function useCloseManager(_ref) {
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
-      if (!isClickOnPopup && !isClickOnTrigger) {
+      var didClickStartInsidePopup = popupRef && mouseDownTarget.current instanceof Node && popupRef.contains(mouseDownTarget.current);
+      if (!isClickOnPopup && !isClickOnTrigger && (fg('popup-onclose-fix-mouse-down-inside-popup') ? !didClickStartInsidePopup : true)) {
         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')) {
@@ -88,6 +90,19 @@ export var useCloseManager = function useCloseManager(_ref) {
         }
       }
     };
+    var onMouseDown = function onMouseDown(event) {
+      /**
+       * Tracking the target of the mouse down event.
+       * This is used to prevent the popup from closing when the user mouses down inside the popup, but then
+       * moves the mouse outside the popup before releasing the mouse button.
+       *
+       * This is a common user interaction - users may have mistakenly clicked on something, or changed their mind,
+       * so they try to cancel their click by moving their mouse away from what they had moused down on.
+       *
+       * Blanket uses the same technique.
+       */
+      mouseDownTarget.current = event.target;
+    };
     var onKeyDown = function onKeyDown(event) {
       if (fg('platform_dst_popup-disable-focuslock')) {
         var key = event.key,
@@ -184,6 +199,9 @@ export var useCloseManager = function useCloseManager(_ref) {
         }, {
           type: 'keydown',
           listener: onKeyDown
+        }, {
+          type: 'mousedown',
+          listener: onMouseDown
         }]);
       }, 0);
     } else {
@@ -196,6 +214,9 @@ export var useCloseManager = function useCloseManager(_ref) {
       }, {
         type: 'keydown',
         listener: onKeyDown
+      }, {
+        type: 'mousedown',
+        listener: onMouseDown
       }]);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.3.14",
+	"version": "4.4.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,8 +57,8 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/docs": "^11.0.0",
-		"@atlaskit/form": "^12.5.0",
+		"@atlaskit/docs": "^11.1.0",
+		"@atlaskit/form": "^12.6.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/link": "^3.2.0",
@@ -117,6 +117,9 @@
 		},
 		"popup-onclose-fix": {
 			"type": "boolean"
+		},
+		"popup-onclose-fix-mouse-down-inside-popup": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"