@atlaskit/dropdown-menu 12.23.4 → 12.24.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/dropdown-menu
 
+## 12.24.0
+
+### Minor Changes
+
+- [#101351](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101351)
+  [`53e2c361fad77`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/53e2c361fad77) -
+  Fixes a bug with the Dropdown Menu not returning focus to the returnFocusRef element, when
+  rendered in a portal. This fix is behind a feature flag.
+
 ## 12.23.4
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -24,7 +24,6 @@ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
 var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wrapper"));
-var _dropdownMenuContext = require("./internal/context/dropdown-menu-context");
 var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
 var _useGeneratedId = _interopRequireWildcard(require("./internal/utils/use-generated-id"));
@@ -253,14 +252,14 @@ var DropdownMenu = function DropdownMenu(_ref) {
     shouldRenderToParent: shouldRenderToParent,
     strategy: strategy
   };
-  return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuContext.DropdownMenuProvider, {
-    value: {
-      returnFocusRef: triggerRef
-    }
-  }, /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
+    shouldReturnFocus:
+    // If returnFocusRef is provided, we **don't** want to return focus to the trigger.
+    // Otherwise, Popup will focus on the dropdown trigger after the `returnFocusRef` element is focused.
+    (0, _platformFeatureFlags.fg)('platform_dst_dropdown_return_focus_fix') ? returnFocusRef === undefined : undefined,
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
@@ -321,6 +320,6 @@ var DropdownMenu = function DropdownMenu(_ref) {
         testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }
-  }))));
+  })));
 };
 var _default = exports.default = DropdownMenu;

package/dist/es2019/dropdown-menu.js

@@ -14,7 +14,6 @@ import Popup from '@atlaskit/popup';
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
-import { DropdownMenuProvider } from './internal/context/dropdown-menu-context';
 import SelectionStore from './internal/context/selection-store';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 import useGeneratedId, { PREFIX } from './internal/utils/use-generated-id';
@@ -223,14 +222,14 @@ const DropdownMenu = ({
     shouldRenderToParent,
     strategy
   };
-  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(DropdownMenuProvider, {
-    value: {
-      returnFocusRef: triggerRef
-    }
-  }, /*#__PURE__*/React.createElement(Popup, _extends({
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, _extends({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
+    shouldReturnFocus:
+    // If returnFocusRef is provided, we **don't** want to return focus to the trigger.
+    // Otherwise, Popup will focus on the dropdown trigger after the `returnFocusRef` element is focused.
+    fg('platform_dst_dropdown_return_focus_fix') ? returnFocusRef === undefined : undefined,
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
@@ -293,6 +292,6 @@ const DropdownMenu = ({
       autoFocus: autoFocus,
       testId: testId && `${testId}--menu-wrapper`
     }, children))
-  }))));
+  })));
 };
 export default DropdownMenu;

package/dist/esm/dropdown-menu.js

@@ -20,7 +20,6 @@ import Popup from '@atlaskit/popup';
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
-import { DropdownMenuProvider } from './internal/context/dropdown-menu-context';
 import SelectionStore from './internal/context/selection-store';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 import useGeneratedId, { PREFIX } from './internal/utils/use-generated-id';
@@ -244,14 +243,14 @@ var DropdownMenu = function DropdownMenu(_ref) {
     shouldRenderToParent: shouldRenderToParent,
     strategy: strategy
   };
-  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(DropdownMenuProvider, {
-    value: {
-      returnFocusRef: triggerRef
-    }
-  }, /*#__PURE__*/React.createElement(Popup, _extends({
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, _extends({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
+    shouldReturnFocus:
+    // If returnFocusRef is provided, we **don't** want to return focus to the trigger.
+    // Otherwise, Popup will focus on the dropdown trigger after the `returnFocusRef` element is focused.
+    fg('platform_dst_dropdown_return_focus_fix') ? returnFocusRef === undefined : undefined,
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
@@ -312,6 +311,6 @@ var DropdownMenu = function DropdownMenu(_ref) {
         testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }
-  }))));
+  })));
 };
 export default DropdownMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.23.4",
+	"version": "12.24.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^3.3.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/icon": "^23.2.0",
 		"@atlaskit/layering": "^1.0.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -50,7 +50,7 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/app-provider": "^1.4.0",
-		"@atlaskit/modal-dialog": "^12.18.0",
+		"@atlaskit/modal-dialog": "^12.19.0",
 		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
@@ -98,6 +98,9 @@
 		"fix-dropdown-close-outside-iframe": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_dst_dropdown_return_focus_fix": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {

package/dist/cjs/internal/context/dropdown-menu-context.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropdownMenuProvider = void 0;
-var _react = require("react");
-var DropdownMenuContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
-/**
- * __Dropdown menu provider__
- *
- * A dropdown menu provider {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
-var DropdownMenuProvider = exports.DropdownMenuProvider = DropdownMenuContext.Provider;

package/dist/es2019/internal/context/dropdown-menu-context.js

@@ -1,15 +0,0 @@
-import { createContext } from 'react';
-const DropdownMenuContext = /*#__PURE__*/createContext(undefined);
-
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
-/**
- * __Dropdown menu provider__
- *
- * A dropdown menu provider {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
-export const DropdownMenuProvider = DropdownMenuContext.Provider;

package/dist/esm/internal/context/dropdown-menu-context.js

@@ -1,15 +0,0 @@
-import { createContext } from 'react';
-var DropdownMenuContext = /*#__PURE__*/createContext(undefined);
-
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
-/**
- * __Dropdown menu provider__
- *
- * A dropdown menu provider {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
-export var DropdownMenuProvider = DropdownMenuContext.Provider;

package/dist/types/internal/context/dropdown-menu-context.d.ts

@@ -1,16 +0,0 @@
-import { type RefObject } from 'react';
-interface DropdownMenuContext {
-    returnFocusRef: RefObject<HTMLElement> | null;
-}
-declare const DropdownMenuContext: import("react").Context<DropdownMenuContext | undefined>;
-/**
- * __Dropdown menu provider__
- *
- * A dropdown menu provider {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
-export declare const DropdownMenuProvider: import("react").Provider<DropdownMenuContext | undefined>;
-export {};

package/dist/types-ts4.5/internal/context/dropdown-menu-context.d.ts

@@ -1,16 +0,0 @@
-import { type RefObject } from 'react';
-interface DropdownMenuContext {
-    returnFocusRef: RefObject<HTMLElement> | null;
-}
-declare const DropdownMenuContext: import("react").Context<DropdownMenuContext | undefined>;
-/**
- * __Dropdown menu provider__
- *
- * A dropdown menu provider {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
-export declare const DropdownMenuProvider: import("react").Provider<DropdownMenuContext | undefined>;
-export {};