@atlaskit/dropdown-menu 12.11.0 → 12.12.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/dropdown-menu
 
+## 12.12.0
+
+### Minor Changes
+
+- [#111282](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111282)
+  [`7b4ccf810b526`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7b4ccf810b526) -
+  Adds a new optional `shouldFitContainer` prop, which when set to `true`, will fit the dropdown
+  menu width to its parent's width.
+
+## 12.11.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.11.0
 
 ### Minor Changes
@@ -70,7 +85,7 @@
 
 - [#91117](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91117)
   [`06ed35f020fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/06ed35f020fb) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ### Patch Changes
 

package/README.md

@@ -10,4 +10,5 @@ yarn add @atlaskit/dropdown-menu
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlassian.design/components/dropdown-menu/).
+Detailed docs and example usage can be found
+[here](https://atlassian.design/components/dropdown-menu/).

package/__perf__/default.tsx

@@ -3,18 +3,18 @@ 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>
+	<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,216 +1,186 @@
 import React from 'react';
 
 import { fireEvent, screen, waitFor } from '@testing-library/dom';
-import type {
-  InteractionTaskArgs,
-  PublicInteractionTask,
-} from 'storybook-addon-performance';
+import type { InteractionTaskArgs, PublicInteractionTask } from 'storybook-addon-performance';
 import invariant from 'tiny-invariant';
 
 import DropdownMenu, {
-  DropdownItem,
-  DropdownItemCheckbox,
-  DropdownItemCheckboxGroup,
-  DropdownItemGroup,
-  DropdownItemRadio,
-  DropdownItemRadioGroup,
+	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>
+	<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 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 },
-        );
-      });
-    },
-  },
+	{
+		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,
-    },
-  },
+	name: 'Dropdown menu',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default DropdownMenuPerformance;

package/codemods/11.0.0-lite-mode.tsx

@@ -11,41 +11,41 @@ import deprecateOnItemActivated from './migrates/deprecate-onItemActivated';
 import deprecateOnPositioned from './migrates/deprecate-onPositioned';
 import deprecateShouldFitContainer from './migrates/deprecate-shouldFitContainer';
 import {
-  renameDropdownItemGroupCheckbox,
-  renameDropdownItemGroupRadio,
-  renameDropdownMenuStateless,
+	renameDropdownItemGroupCheckbox,
+	renameDropdownItemGroupRadio,
+	renameDropdownMenuStateless,
 } from './migrates/rename-imports';
 import updatePositionValue from './migrates/replace-position-to-placement';
 import replaceShouldAllowMultiline from './migrates/replace-shouldAllowMultiline';
 import {
-  updateDropdownItemGroupCheckboxCallsite,
-  updateDropdownItemGroupRadioCallsite,
+	updateDropdownItemGroupCheckboxCallsite,
+	updateDropdownItemGroupRadioCallsite,
 } from './migrates/update-component-callsites';
 
 const transformer = createTransformer([
-  deprecateItems,
-  deprecateOnItemActivated,
-  deprecateOnPositioned,
-  deprecateShouldFitContainer,
-  deprecateboundariesElement,
-  deprecateIsMenuFixed,
+	deprecateItems,
+	deprecateOnItemActivated,
+	deprecateOnPositioned,
+	deprecateShouldFitContainer,
+	deprecateboundariesElement,
+	deprecateIsMenuFixed,
 
-  // props on *Items
-  ...deprecateAutoFocus(),
-  ...deprecateIsCompact(),
-  ...deprecateIsHidden(),
+	// props on *Items
+	...deprecateAutoFocus(),
+	...deprecateIsCompact(),
+	...deprecateIsHidden(),
 
-  replaceShouldAllowMultiline,
-  updatePositionValue,
+	replaceShouldAllowMultiline,
+	updatePositionValue,
 
-  renameDropdownItemGroupCheckbox,
-  renameDropdownItemGroupRadio,
-  renameDropdownMenuStateless,
+	renameDropdownItemGroupCheckbox,
+	renameDropdownItemGroupRadio,
+	renameDropdownMenuStateless,
 
-  updateDropdownItemGroupCheckboxCallsite,
-  updateDropdownItemGroupRadioCallsite,
+	updateDropdownItemGroupCheckboxCallsite,
+	updateDropdownItemGroupRadioCallsite,
 
-  convertTriggerType,
+	convertTriggerType,
 ]);
 
 export default transformer;

package/codemods/__tests__/11.0.0-lite-mode.test.tsx

@@ -6,10 +6,10 @@ import transformer from '../11.0.0-lite-mode';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('apply all needed codemods for version 11.0.0 major bump', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import DropdownMenu, {
       DropdownItemGroupCheckbox as MyComponent, DropdownItemCheckbox, DropdownItem, DropdownItemRadio,
@@ -45,7 +45,7 @@ describe('apply all needed codemods for version 11.0.0 major bump', () => {
       </DropdownMenu>
     );
     `,
-    `
+		`
     import React from "react";
     import DropdownMenu, {
       DropdownItemCheckboxGroup as MyComponent, DropdownItemCheckbox, DropdownItem, DropdownItemRadio,
@@ -63,6 +63,6 @@ describe('apply all needed codemods for version 11.0.0 major bump', () => {
       </DropdownMenu>
     );
     `,
-    'should not change anything when items is not used ',
-  );
+		'should not change anything when items is not used ',
+	);
 });