@atlaskit/dropdown-menu 12.24.1 → 12.25.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/dropdown-menu
 
+## 12.25.0
+
+### Minor Changes
+
+- [#105222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105222)
+  [`f62a0d9ada12e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f62a0d9ada12e) -
+  Fixes a bug with the Dropdown Menu not returning focus to the returnFocusRef element, when
+  rendered in a portal. This change is no longer behind a feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.24.1
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -259,7 +259,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     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,
+    returnFocusRef === undefined,
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,

package/dist/es2019/dropdown-menu.js

@@ -229,7 +229,7 @@ const DropdownMenu = ({
     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,
+    returnFocusRef === undefined,
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,

package/dist/esm/dropdown-menu.js

@@ -250,7 +250,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     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,
+    returnFocusRef === undefined,
     onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.24.1",
+	"version": "12.25.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.3.0",
+		"@atlaskit/icon": "^23.4.0",
 		"@atlaskit/layering": "^1.0.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -36,7 +36,7 @@
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"
@@ -49,7 +49,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/app-provider": "^1.5.0",
+		"@atlaskit/app-provider": "^1.6.0",
 		"@atlaskit/modal-dialog": "^12.19.0",
 		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/visual-regression": "*",
@@ -98,9 +98,6 @@
 		"fix-dropdown-close-outside-iframe": {
 			"type": "boolean",
 			"referenceOnly": true
-		},
-		"platform_dst_dropdown_return_focus_fix": {
-			"type": "boolean"
 		}
 	},
 	"techstack": {

package/__perf__/default.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '../src';
-
-const DropdownMenuDefaultExample = () => (
-	<DropdownMenu trigger="Cities in Australia">
-		<DropdownItemGroup>
-			<DropdownItem>Sydney</DropdownItem>
-			<DropdownItem>Melbourne</DropdownItem>
-			<DropdownItem>Adelaide</DropdownItem>
-			<DropdownItem>Perth</DropdownItem>
-			<DropdownItem>Brisbane</DropdownItem>
-			<DropdownItem>Canberra</DropdownItem>
-			<DropdownItem>Hobart</DropdownItem>
-			<DropdownItem>Darwin</DropdownItem>
-		</DropdownItemGroup>
-	</DropdownMenu>
-);
-
-export default DropdownMenuDefaultExample;

package/__perf__/dropdown-menu.tsx

@@ -1,186 +0,0 @@
-import React from 'react';
-
-import { fireEvent, screen, waitFor } from '@testing-library/dom';
-import type { InteractionTaskArgs, PublicInteractionTask } from 'storybook-addon-performance';
-import invariant from 'tiny-invariant';
-
-import DropdownMenu, {
-	DropdownItem,
-	DropdownItemCheckbox,
-	DropdownItemCheckboxGroup,
-	DropdownItemGroup,
-	DropdownItemRadio,
-	DropdownItemRadioGroup,
-} from '../src';
-
-const DropdownMenuPerformance = () => (
-	<DropdownMenu trigger="Page actions" testId="dropdown-menu">
-		<DropdownItemGroup>
-			<DropdownItem>Edit</DropdownItem>
-			<DropdownItem>Copy</DropdownItem>
-			<DropdownItem>Delete</DropdownItem>
-		</DropdownItemGroup>
-		<DropdownItemCheckboxGroup id="flags" title="Flags">
-			<DropdownItemCheckbox id="tokens">Tokens</DropdownItemCheckbox>
-			<DropdownItemCheckbox id="dark-mode">Dark mode</DropdownItemCheckbox>
-		</DropdownItemCheckboxGroup>
-		<DropdownItemRadioGroup id="font-size" title="Font size">
-			<DropdownItemRadio id="smaller">Smaller</DropdownItemRadio>
-			<DropdownItemRadio id="default" defaultSelected>
-				Default
-			</DropdownItemRadio>
-			<DropdownItemRadio id="larger">Larger</DropdownItemRadio>
-		</DropdownItemRadioGroup>
-	</DropdownMenu>
-);
-
-const getTrigger = (container: HTMLElement): HTMLElement => {
-	const trigger: HTMLElement | null = container.querySelector(
-		'[data-testid="dropdown-menu--trigger"]',
-	);
-	if (trigger === null) {
-		throw new Error('Could not find the dropdown menu trigger');
-	}
-	return trigger;
-};
-
-const interactionTasks: PublicInteractionTask[] = [
-	{
-		name: 'Display dropdown',
-		description: 'Click to open the dropdown menu',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const trigger = getTrigger(container);
-
-			await controls.time(async () => {
-				fireEvent.click(trigger);
-				await screen.findByText('Edit');
-			});
-		},
-	},
-	{
-		name: 'Hide dropdown (trigger)',
-		description: 'Click the trigger to hide the dropdown menu',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const trigger = getTrigger(container);
-			fireEvent.click(trigger);
-
-			await screen.findByText('Edit');
-			await controls.time(async () => {
-				fireEvent.click(trigger);
-				await waitFor(() => invariant(screen.queryByText('Edit') === null));
-			});
-		},
-	},
-	{
-		name: 'Hide dropdown (escape)',
-		description: 'Press escape to hide the dropdown menu',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const trigger = getTrigger(container);
-			fireEvent.click(trigger);
-
-			await screen.findByText('Edit');
-			await controls.time(async () => {
-				fireEvent.keyDown(container, { key: 'Escape', code: 'Escape' });
-				await waitFor(() => invariant(screen.queryByText('Edit') === null));
-			});
-		},
-	},
-	{
-		name: 'Hide dropdown (outside click)',
-		description: 'Click outside to hide the dropdown menu',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const trigger = getTrigger(container);
-			fireEvent.click(trigger);
-
-			await screen.findByText('Edit');
-			await controls.time(async () => {
-				fireEvent.click(container);
-				await waitFor(() => invariant(screen.queryByText('Edit') === null));
-			});
-		},
-	},
-	{
-		name: 'Select item',
-		description: 'Click menu item to select it',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const trigger = getTrigger(container);
-			fireEvent.click(trigger);
-
-			const label = await screen.findByText('Edit');
-			await controls.time(async () => {
-				label.click();
-			});
-		},
-	},
-	{
-		/**
-		 * NOTE:
-		 * This test has an unhandled error on CI, but runs fine locally.
-		 * It doesn't stop the pipeline, but its results aren't reported.
-		 */
-		name: 'Select checkbox',
-		description: 'Click a checkbox menu item to select it',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const trigger = getTrigger(container);
-			fireEvent.click(trigger);
-
-			const label = await screen.findByText('Tokens');
-			const checkbox: HTMLElement | null = label.closest('[role="checkbox"]');
-			if (checkbox === null) {
-				throw new Error('Could not find the checkbox');
-			}
-
-			await controls.time(async () => {
-				checkbox.click();
-				await waitFor(
-					() => {
-						const ariaChecked = checkbox.getAttribute('aria-checked');
-						invariant(ariaChecked === 'true', `Checkbox should be checked (is "${ariaChecked}")`);
-					},
-					{ timeout: 5000 },
-				);
-			});
-		},
-	},
-	{
-		/**
-		 * NOTE:
-		 * This test has an unhandled error on CI, but runs fine locally.
-		 * It doesn't stop the pipeline, but its results aren't reported.
-		 */
-		name: 'Select radio',
-		description: 'Click a radio menu item to select it',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const trigger = getTrigger(container);
-			fireEvent.click(trigger);
-
-			const label = await screen.findByText('Smaller');
-			const radio: HTMLElement | null = label.closest('[role="radio"]');
-			if (radio === null) {
-				throw new Error('Could not find the radio');
-			}
-
-			await controls.time(async () => {
-				radio.click();
-				await waitFor(
-					() => {
-						const ariaChecked = radio.getAttribute('aria-checked');
-						invariant(ariaChecked === 'true', `Radio should be checked (is "${ariaChecked}")`);
-					},
-					{ timeout: 5000 },
-				);
-			});
-		},
-	},
-];
-
-DropdownMenuPerformance.story = {
-	name: 'Dropdown menu',
-	parameters: {
-		performance: {
-			interactions: interactionTasks,
-		},
-	},
-};
-
-export default DropdownMenuPerformance;