@atlaskit/dropdown-menu 14.1.1 → 14.1.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/dropdown-menu
 
+## 14.1.3
+
+### Patch Changes
+
+- [#148964](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148964)
+  [`a07dc3da50fa9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a07dc3da50fa9) -
+  "We are testing keyboard focus improvement behind a feature flag. This change does not force focus
+  to return to the Dropdown trigger if another interactive element is clicked outside of the menu.
+  If this fix is successful it will be available in a later release."
+- Updated dependencies
+
+## 14.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.1.1
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -185,10 +185,18 @@ var DropdownMenu = function DropdownMenu(_ref) {
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();
       });
     } else if (triggerRef.current) {
-      requestAnimationFrame(function () {
-        var _triggerRef$current;
-        (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
-      });
+      var _event$target$closest2, _event$target2;
+      // Don't focus the trigger if the click was outside of the menu
+      var isClickOutsideMenu = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && ((_event$target$closest2 = (_event$target2 = event.target).closest) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.call(_event$target2, '[role="menu"]')) === null;
+      var shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body &&
+      // except if clicking on the body
+      (0, _platformFeatureFlags.fg)('platform_design_system_team_dropdown_return_focus');
+      if (!shouldPreventFocus) {
+        requestAnimationFrame(function () {
+          var _triggerRef$current;
+          (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+        });
+      }
     }
     var newValue = false;
     setLocalIsOpen(newValue);

package/dist/es2019/dropdown-menu.js

@@ -154,10 +154,18 @@ const DropdownMenu = ({
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 ? void 0 : _itemRef$current3.focus();
       });
     } else if (triggerRef.current) {
-      requestAnimationFrame(() => {
-        var _triggerRef$current;
-        (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
-      });
+      var _event$target$closest2, _event$target2;
+      // Don't focus the trigger if the click was outside of the menu
+      const isClickOutsideMenu = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && ((_event$target$closest2 = (_event$target2 = event.target).closest) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.call(_event$target2, '[role="menu"]')) === null;
+      const shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body &&
+      // except if clicking on the body
+      fg('platform_design_system_team_dropdown_return_focus');
+      if (!shouldPreventFocus) {
+        requestAnimationFrame(() => {
+          var _triggerRef$current;
+          (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
+        });
+      }
     }
     const newValue = false;
     setLocalIsOpen(newValue);

package/dist/esm/dropdown-menu.js

@@ -176,10 +176,18 @@ var DropdownMenu = function DropdownMenu(_ref) {
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();
       });
     } else if (triggerRef.current) {
-      requestAnimationFrame(function () {
-        var _triggerRef$current;
-        (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
-      });
+      var _event$target$closest2, _event$target2;
+      // Don't focus the trigger if the click was outside of the menu
+      var isClickOutsideMenu = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && ((_event$target$closest2 = (_event$target2 = event.target).closest) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.call(_event$target2, '[role="menu"]')) === null;
+      var shouldPreventFocus = isClickOutsideMenu && document.activeElement !== document.body &&
+      // except if clicking on the body
+      fg('platform_design_system_team_dropdown_return_focus');
+      if (!shouldPreventFocus) {
+        requestAnimationFrame(function () {
+          var _triggerRef$current;
+          (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+        });
+      }
     }
     var newValue = false;
     setLocalIsOpen(newValue);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "14.1.1",
+	"version": "14.1.3",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,10 +30,10 @@
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/layering": "^2.1.0",
-		"@atlaskit/menu": "^4.0.0",
+		"@atlaskit/menu": "^5.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.1.0",
-		"@atlaskit/primitives": "^14.4.0",
+		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.8.0",
@@ -101,6 +101,9 @@
 		},
 		"dropdown-menu-disabled-navigation-fix": {
 			"type": "boolean"
+		},
+		"platform_design_system_team_dropdown_return_focus": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {