@atlaskit/menu 2.13.8 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 2.14.0
+
+### Minor Changes
+
+- [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
+  [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
+  Update `React` from v16 to v18
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.13.8
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "2.13.8",
+	"version": "2.14.0",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,14 +41,14 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^1.5.0",
-		"@atlaskit/ds-lib": "^3.3.0",
-		"@atlaskit/focus-ring": "^2.0.0",
-		"@atlaskit/interaction-context": "^2.4.0",
+		"@atlaskit/app-provider": "^1.8.0",
+		"@atlaskit/ds-lib": "^3.5.0",
+		"@atlaskit/focus-ring": "^2.1.0",
+		"@atlaskit/interaction-context": "^2.6.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.3.0",
-		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/theme": "^14.1.0",
+		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -64,7 +64,7 @@
 		"@atlassian/feature-flags-test-utils": "*",
 		"@emotion/jest": "^11.8.0",
 		"@testing-library/dom": "^10.1.0",
-		"@testing-library/react": "^12.1.5",
+		"@testing-library/react": "^13.4.0",
 		"ast-types": "^0.13.3",
 		"bind-event-listener": "^3.0.0",
 		"jscodeshift": "^0.13.0",

package/__perf__/button.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import ButtonItem from '../src/menu-item/button-item';
-
-import Example from './utils/example-runner';
-import { interactionTasks } from './utils/interaction-tasks';
-
-const buttonItem = () => <Example Component={ButtonItem} displayName="Button item" />;
-
-buttonItem.story = {
-	name: 'Button Item',
-	parameters: {
-		performance: {
-			interactions: interactionTasks,
-		},
-	},
-};
-
-export default buttonItem;

package/__perf__/custom.tsx

@@ -1,30 +0,0 @@
-import React, { type Ref } from 'react';
-
-import CustomItem from '../src/menu-item/custom-item';
-import type { CustomItemComponentProps, CustomItemProps } from '../src/types';
-
-import Example from './utils/example-runner';
-import { interactionTasks } from './utils/interaction-tasks';
-
-const Emphasis = React.forwardRef((props: CustomItemComponentProps, ref: Ref<HTMLElement>) => (
-	<em {...props} ref={ref} />
-));
-
-const CustomItemEmphasis = React.forwardRef(
-	(props: CustomItemProps, ref: Ref<HTMLElement | null>) => {
-		return <CustomItem component={Emphasis} {...props} ref={ref} />;
-	},
-);
-
-const customItem = () => <Example Component={CustomItemEmphasis} displayName="Custom item" />;
-
-customItem.story = {
-	name: 'Custom Item',
-	parameters: {
-		performance: {
-			interactions: interactionTasks,
-		},
-	},
-};
-
-export default customItem;

package/__perf__/default.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { SkeletonItem } from '../src';
-
-export default () => <SkeletonItem />;

package/__perf__/link.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import LinkItem from '../src/menu-item/link-item';
-
-import Example from './utils/example-runner';
-import { interactionTasks } from './utils/interaction-tasks';
-
-const linkItem = () => <Example Component={LinkItem} displayName="Link item" />;
-
-linkItem.story = {
-	name: 'Link Item',
-	parameters: {
-		performance: {
-			interactions: interactionTasks,
-		},
-	},
-};
-
-export default linkItem;

package/__perf__/utils/example-runner.tsx

@@ -1,50 +0,0 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
-
-import { bindAll } from 'bind-event-listener';
-
-type ItemComponentProps =
-	| React.ComponentType<React.AllHTMLAttributes<HTMLElement>>
-	| React.ElementType;
-
-export default function Example({
-	Component,
-	displayName,
-}: {
-	Component: ItemComponentProps;
-	displayName: string;
-}) {
-	const [isSelected, setIsSelected] = useState<boolean>(false);
-	const [isDisabled, setIsDisabled] = useState<boolean>(false);
-	const ref = useRef<HTMLElement>(null);
-
-	useLayoutEffect(() => {
-		function toggleSelect() {
-			setIsSelected((value) => !value);
-		}
-		function toggleDisabled() {
-			setIsDisabled((value) => !value);
-		}
-
-		const el: HTMLElement | null = ref.current;
-		if (!el) {
-			throw new Error('Could not find button ref');
-		}
-
-		return bindAll(el, [
-			{
-				type: 'toggle-select',
-				listener: toggleSelect,
-			},
-			{
-				type: 'toggle-disabled',
-				listener: toggleDisabled,
-			},
-		]);
-	}, []);
-
-	return (
-		<Component ref={ref} testId="menu-item" isSelected={isSelected} isDisabled={isDisabled}>
-			{displayName}
-		</Component>
-	);
-}

package/__perf__/utils/interaction-tasks.tsx

@@ -1,76 +0,0 @@
-import { fireEvent } from '@testing-library/dom';
-import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
-
-export const interactionTasks: PublicInteractionTask[] = [
-	{
-		name: 'Click a menu item',
-		description: 'Recording how long a mousedown + click event take to be processed',
-		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-			const menuItem: HTMLElement | null = container.querySelector('[data-testid="menu-item"]');
-			if (menuItem == null) {
-				throw new Error('Could not find a menu item element');
-			}
-
-			fireEvent.mouseDown(menuItem);
-			fireEvent.click(menuItem);
-		},
-	},
-	{
-		name: 'Focus on a menu item',
-		description: 'Focus on a menu item and wait for layout and paint to finish',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const menuItem: HTMLElement | null = container.querySelector('[data-testid="menu-item"]');
-			if (menuItem == null) {
-				throw new Error('Could not find a menu item element');
-			}
-
-			await controls.time(async () => {
-				fireEvent.focus(menuItem);
-				fireEvent.blur(menuItem);
-			});
-		},
-	},
-	{
-		name: 'Select a menu item',
-		description: 'Trigger the selection of a menu item',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const menuItem: HTMLElement | null = container.querySelector('[data-testid="menu-item"]');
-
-			if (menuItem == null) {
-				throw new Error('Could not find a menu item element');
-			}
-
-			await controls.time(async () => {
-				fireEvent(menuItem, new Event('toggle-select'));
-			});
-		},
-	},
-	{
-		name: 'Disable a menu item',
-		description: 'Trigger the disabling of a menu item',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const menuItem: HTMLElement | null = container.querySelector('[data-testid="menu-item"]');
-			if (menuItem == null) {
-				throw new Error('Could not find a menu item element');
-			}
-
-			const beforeState =
-				menuItem.getAttribute('aria-disabled') || menuItem.getAttribute('disabled');
-
-			if (beforeState === 'true') {
-				throw new Error('Should not be disabled before the test begins');
-			}
-
-			await controls.time(async () => {
-				fireEvent(menuItem!, new Event('toggle-disabled'));
-			});
-
-			const afterState =
-				menuItem.getAttribute('aria-disabled') || menuItem.getAttribute('disabled');
-
-			if (afterState === 'false') {
-				throw new Error('Should be disabled after the test finished');
-			}
-		},
-	},
-];