@atlaskit/popup 4.3.15 → 4.4.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/popup
 
+## 4.4.1
+
+### Patch Changes
+
+- [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
+## 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

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/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/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/offerings.json

@@ -0,0 +1,34 @@
+[
+	{
+		"name": "Popup",
+		"package": "@atlaskit/popup",
+		"import": {
+			"name": "Popup",
+			"package": "@atlaskit/popup",
+			"type": "default"
+		},
+		"keywords": ["popup", "overlay", "floating", "content", "trigger"],
+		"categories": ["overlay"],
+		"shortDescription": "A component for displaying popup content relative to a trigger element.",
+		"status": "general-availability",
+		"accessibilityGuidelines": [
+			"Provide appropriate focus management",
+			"Use clear trigger labels",
+			"Ensure keyboard navigation support",
+			"Provide escape key dismissal"
+		],
+		"usageGuidelines": [
+			"Use for contextual content that appears on demand",
+			"Position appropriately relative to trigger",
+			"Consider dismissal behavior",
+			"Use appropriate content sizing"
+		],
+		"contentGuidelines": [
+			"Keep popup content focused and relevant",
+			"Use clear, concise content",
+			"Provide appropriate actions when needed",
+			"Consider content hierarchy"
+		],
+		"examples": ["./examples/ai/popup.tsx"]
+	}
+]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.3.15",
+	"version": "4.4.1",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,10 +57,10 @@
 		"@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.7.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/section-message": "^8.7.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/"