@atlaskit/menu 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/menu
 
+## 2.5.0
+
+### Minor Changes
+
+- [#110670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110670)
+  [`c733254a2dd6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c733254a2dd6e) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.4.0
 
 ### Minor Changes
@@ -39,7 +58,7 @@
 
 - [#93679](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93679)
   [`b35e71a29db0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b35e71a29db0) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 2.1.13
 

package/__perf__/button.tsx

@@ -5,17 +5,15 @@ 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" />
-);
+const buttonItem = () => <Example Component={ButtonItem} displayName="Button item" />;
 
 buttonItem.story = {
-  name: 'Button Item',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'Button Item',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default buttonItem;

package/__perf__/custom.tsx

@@ -6,29 +6,25 @@ 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 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} />;
-  },
+	(props: CustomItemProps, ref: Ref<HTMLElement | null>) => {
+		return <CustomItem component={Emphasis} {...props} ref={ref} />;
+	},
 );
 
-const customItem = () => (
-  <Example Component={CustomItemEmphasis} displayName="Custom item" />
-);
+const customItem = () => <Example Component={CustomItemEmphasis} displayName="Custom item" />;
 
 customItem.story = {
-  name: 'Custom Item',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'Custom Item',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default customItem;

package/__perf__/link.tsx

@@ -8,12 +8,12 @@ import { interactionTasks } from './utils/interaction-tasks';
 const linkItem = () => <Example Component={LinkItem} displayName="Link item" />;
 
 linkItem.story = {
-  name: 'Link Item',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'Link Item',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default linkItem;

package/__perf__/utils/example-runner.tsx

@@ -3,53 +3,48 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
 import { bindAll } from 'bind-event-listener';
 
 type ItemComponentProps =
-  | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>
-  | React.ElementType;
+	| React.ComponentType<React.AllHTMLAttributes<HTMLElement>>
+	| React.ElementType;
 
 export default function Example({
-  Component,
-  displayName,
+	Component,
+	displayName,
 }: {
-  Component: ItemComponentProps;
-  displayName: string;
+	Component: ItemComponentProps;
+	displayName: string;
 }) {
-  const [isSelected, setIsSelected] = useState<boolean>(false);
-  const [isDisabled, setIsDisabled] = useState<boolean>(false);
-  const ref = useRef<HTMLElement>(null);
+	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);
-    }
+	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');
-    }
+		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 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>
-  );
+	return (
+		<Component ref={ref} testId="menu-item" isSelected={isSelected} isDisabled={isDisabled}>
+			{displayName}
+		</Component>
+	);
 }

package/__perf__/utils/interaction-tasks.tsx

@@ -1,99 +1,76 @@
 import { fireEvent } from '@testing-library/dom';
-import {
-  type InteractionTaskArgs,
-  type PublicInteractionTask,
-} from 'storybook-addon-performance';
+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');
-      }
+	{
+		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');
-      }
+			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"]',
-      );
+			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');
-      }
+			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');
-      }
+			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');
+			const beforeState =
+				menuItem.getAttribute('aria-disabled') || menuItem.getAttribute('disabled');
 
-      if (beforeState === 'true') {
-        throw new Error('Should not be disabled before the test begins');
-      }
+			if (beforeState === 'true') {
+				throw new Error('Should not be disabled before the test begins');
+			}
 
-      await controls.time(async () => {
-        fireEvent(menuItem!, new Event('toggle-disabled'));
-      });
+			await controls.time(async () => {
+				fireEvent(menuItem!, new Event('toggle-disabled'));
+			});
 
-      const afterState =
-        menuItem.getAttribute('aria-disabled') ||
-        menuItem.getAttribute('disabled');
+			const afterState =
+				menuItem.getAttribute('aria-disabled') || menuItem.getAttribute('disabled');
 
-      if (afterState === 'false') {
-        throw new Error('Should be disabled after the test finished');
-      }
-    },
-  },
+			if (afterState === 'false') {
+				throw new Error('Should be disabled after the test finished');
+			}
+		},
+	},
 ];