ref(dropdownMenuControl): Rename as DropdownMenu (#43586)

Rather than writing
```jsx
import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
import {MenuItemProps} from 'sentry/components/dropdownMenuItem';
```
we can now write
```jsx
import DropdownMenu, {MenuItemProps} from 'sentry/components/dropdownMenu';
```

Luckily there's no usage in `getsentry` so no additional PR is needed.

static/app/components/actions/ignore.tsx

@@ -6,8 +6,8 @@ import ButtonBar from 'sentry/components/buttonBar';
 import {openConfirmModal} from 'sentry/components/confirm';
 import CustomIgnoreCountModal from 'sentry/components/customIgnoreCountModal';
 import CustomIgnoreDurationModal from 'sentry/components/customIgnoreDurationModal';
-import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
-import type {MenuItemProps} from 'sentry/components/dropdownMenuItem';
+import type {MenuItemProps} from 'sentry/components/dropdownMenu';
+import DropdownMenu from 'sentry/components/dropdownMenu';
 import Tooltip from 'sentry/components/tooltip';
 import {IconChevron, IconMute} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
@@ -265,7 +265,7 @@ const IgnoreActions = ({
       >
         {t('Ignore')}
       </IgnoreButton>
-      <DropdownMenuControl
+      <DropdownMenu
         size="sm"
         trigger={triggerProps => (
           <DropdownTrigger

static/app/components/actions/resolve.tsx

@@ -7,8 +7,8 @@ import ButtonBar from 'sentry/components/buttonBar';
 import {openConfirmModal} from 'sentry/components/confirm';
 import CustomCommitsResolutionModal from 'sentry/components/customCommitsResolutionModal';
 import CustomResolutionModal from 'sentry/components/customResolutionModal';
-import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
-import type {MenuItemProps} from 'sentry/components/dropdownMenuItem';
+import type {MenuItemProps} from 'sentry/components/dropdownMenu';
+import DropdownMenu from 'sentry/components/dropdownMenu';
 import Tooltip from 'sentry/components/tooltip';
 import {IconCheckmark, IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -189,7 +189,7 @@ class ResolveActions extends Component<Props> {
     const isDisabled = !projectSlug ? disabled : disableDropdown;
 
     return (
-      <DropdownMenuControl
+      <DropdownMenu
         items={items}
         trigger={triggerProps => (
           <DropdownTrigger

static/app/components/dropdownMenuControl.spec.tsx → static/app/components/dropdownMenu/index.spec.tsx

@@ -1,13 +1,13 @@
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import DropdownMenuControl from './dropdownMenuControl';
+import DropdownMenu from 'sentry/components/dropdownMenu';
 
 describe('DropdownMenu', function () {
   it('renders a basic menu', function () {
     const onAction = jest.fn();
 
     render(
-      <DropdownMenuControl
+      <DropdownMenu
         items={[
           {
             key: 'item1',
@@ -55,7 +55,7 @@ describe('DropdownMenu', function () {
     const onAction = jest.fn();
 
     render(
-      <DropdownMenuControl
+      <DropdownMenu
         items={[
           {
             key: 'item1',
@@ -85,7 +85,7 @@ describe('DropdownMenu', function () {
     const onAction = jest.fn();
 
     render(
-      <DropdownMenuControl
+      <DropdownMenu
         items={[
           {
             key: 'item1',

static/app/components/dropdownMenuControl.tsx → static/app/components/dropdownMenu/index.tsx

@@ -6,14 +6,14 @@ import {useResizeObserver} from '@react-aria/utils';
 import {Item, Section} from '@react-stately/collections';
 
 import DropdownButton, {DropdownButtonProps} from 'sentry/components/dropdownButton';
-import DropdownMenu, {
-  DropdownMenuContext,
-  DropdownMenuProps,
-} from 'sentry/components/dropdownMenu';
-import {MenuItemProps} from 'sentry/components/dropdownMenuItem';
 import {FormSize} from 'sentry/utils/theme';
 import useOverlay, {UseOverlayProps} from 'sentry/utils/useOverlay';
 
+import {MenuItemProps} from './item';
+import DropdownMenuList, {DropdownMenuContext, DropdownMenuListProps} from './list';
+
+export {MenuItemProps};
+
 /**
  * Recursively removes hidden items, including those nested in submenus
  */
@@ -45,9 +45,9 @@ function getDisabledKeys(source: MenuItemProps[]): MenuItemProps['key'][] {
   }, []);
 }
 
-interface DropdownMenuControlProps
+interface DropdownMenuProps
   extends Omit<
-      DropdownMenuProps,
+      DropdownMenuListProps,
       'overlayState' | 'overlayPositionProps' | 'items' | 'children' | 'menuTitle'
     >,
     Pick<
@@ -123,7 +123,7 @@ interface DropdownMenuControlProps
  * A menu component that renders both the trigger button and the dropdown
  * menu. See: https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html
  */
-function DropdownMenuControl({
+function DropdownMenu({
   items,
   disabledKeys,
   trigger,
@@ -145,7 +145,7 @@ function DropdownMenuControl({
   shouldCloseOnInteractOutside,
   preventOverflowOptions,
   ...props
-}: DropdownMenuControlProps) {
+}: DropdownMenuProps) {
   const isDisabled = disabledProp ?? (!items || items.length === 0);
 
   const {rootOverlayState} = useContext(DropdownMenuContext);
@@ -237,7 +237,7 @@ function DropdownMenuControl({
     }
 
     return (
-      <DropdownMenu
+      <DropdownMenuList
         {...props}
         {...menuProps}
         size={size}
@@ -265,20 +265,20 @@ function DropdownMenuControl({
             </Item>
           );
         }}
-      </DropdownMenu>
+      </DropdownMenuList>
     );
   }
 
   return (
-    <MenuControlWrap className={className} as={renderWrapAs} role="presentation">
+    <DropdownMenuWrap className={className} as={renderWrapAs} role="presentation">
       {renderTrigger()}
       {renderMenu()}
-    </MenuControlWrap>
+    </DropdownMenuWrap>
   );
 }
 
-export default DropdownMenuControl;
+export default DropdownMenu;
 
-const MenuControlWrap = styled('div')`
+const DropdownMenuWrap = styled('div')`
   list-style-type: none;
 `;

static/app/components/dropdownMenuItem.tsx → static/app/components/dropdownMenu/item.tsx

@@ -6,7 +6,6 @@ import {TreeState} from '@react-stately/tree';
 import {Node} from '@react-types/shared';
 import {LocationDescriptor} from 'history';
 
-import {DropdownMenuContext} from 'sentry/components/dropdownMenu';
 import Link from 'sentry/components/links/link';
 import MenuListItem, {
   InnerWrap as MenuListItemInnerWrap,
@@ -16,6 +15,8 @@ import {IconChevron} from 'sentry/icons';
 import mergeRefs from 'sentry/utils/mergeRefs';
 import usePrevious from 'sentry/utils/usePrevious';
 
+import {DropdownMenuContext} from './list';
+
 export interface MenuItemProps extends MenuListItemProps {
   /**
    * Item key. Must be unique across the entire menu, including sub-menus.

static/app/components/dropdownMenu.tsx → static/app/components/dropdownMenu/list.tsx

@@ -10,13 +10,14 @@ import {TreeState, useTreeState} from '@react-stately/tree';
 import {Node} from '@react-types/shared';
 import omit from 'lodash/omit';
 
-import MenuControl from 'sentry/components/dropdownMenuControl';
-import MenuItem, {MenuItemProps} from 'sentry/components/dropdownMenuItem';
-import MenuSection from 'sentry/components/dropdownMenuSection';
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
 import space from 'sentry/styles/space';
 import useOverlay from 'sentry/utils/useOverlay';
 
+import DropdownMenu from './index';
+import DropdownMenuItem, {MenuItemProps} from './item';
+import DropdownMenuSection from './section';
+
 type OverlayState = ReturnType<typeof useOverlay>['state'];
 
 interface DropdownMenuContextValue {
@@ -34,7 +35,7 @@ interface DropdownMenuContextValue {
 
 export const DropdownMenuContext = createContext<DropdownMenuContextValue>({});
 
-export interface DropdownMenuProps
+export interface DropdownMenuListProps
   extends Omit<
     AriaMenuOptions<MenuItemProps>,
     | 'selectionMode'
@@ -63,7 +64,7 @@ export interface DropdownMenuProps
   size?: MenuItemProps['size'];
 }
 
-function DropdownMenu({
+function DropdownMenuList({
   closeOnSelect = true,
   onClose,
   minWidth,
@@ -72,7 +73,7 @@ function DropdownMenu({
   overlayState,
   overlayPositionProps,
   ...props
-}: DropdownMenuProps) {
+}: DropdownMenuListProps) {
   const {rootOverlayState, parentMenuState} = useContext(DropdownMenuContext);
   const state = useTreeState<MenuItemProps>({...props, selectionMode: 'single'});
   const stateCollection = useMemo(() => [...state.collection], [state.collection]);
@@ -135,7 +136,7 @@ function DropdownMenu({
   // Render a single menu item
   const renderItem = (node: Node<MenuItemProps>, isLastNode: boolean) => {
     return (
-      <MenuItem
+      <DropdownMenuItem
         node={node}
         state={state}
         onClose={onClose}
@@ -152,7 +153,7 @@ function DropdownMenu({
     }
 
     const trigger = triggerProps => (
-      <MenuItem
+      <DropdownMenuItem
         renderAs="div"
         node={node}
         state={state}
@@ -171,7 +172,7 @@ function DropdownMenu({
     );
 
     return (
-      <MenuControl
+      <DropdownMenu
         isOpen={state.selectionManager.isSelected(node.key)}
         items={node.value.children}
         trigger={trigger}
@@ -202,7 +203,9 @@ function DropdownMenu({
 
       if (node.type === 'section') {
         itemToRender = (
-          <MenuSection node={node}>{renderCollection([...node.childNodes])}</MenuSection>
+          <DropdownMenuSection node={node}>
+            {renderCollection([...node.childNodes])}
+          </DropdownMenuSection>
         );
       } else {
         itemToRender = node.value.isSubmenu
@@ -232,7 +235,7 @@ function DropdownMenu({
         <DropdownMenuContext.Provider value={contextValue}>
           <StyledOverlay>
             {menuTitle && <MenuTitle>{menuTitle}</MenuTitle>}
-            <MenuWrap
+            <DropdownMenuListWrap
               ref={menuRef}
               hasTitle={!!menuTitle}
               {...mergeProps(modifiedMenuProps, keyboardProps)}
@@ -242,7 +245,7 @@ function DropdownMenu({
               }}
             >
               {renderCollection(stateCollection)}
-            </MenuWrap>
+            </DropdownMenuListWrap>
           </StyledOverlay>
         </DropdownMenuContext.Provider>
       </PositionWrapper>
@@ -250,14 +253,14 @@ function DropdownMenu({
   );
 }
 
-export default DropdownMenu;
+export default DropdownMenuList;
 
 const StyledOverlay = styled(Overlay)`
   display: flex;
   flex-direction: column;
 `;
 
-const MenuWrap = styled('ul')<{hasTitle: boolean}>`
+const DropdownMenuListWrap = styled('ul')<{hasTitle: boolean}>`
   margin: 0;
   padding: ${space(0.5)} 0;
   font-size: ${p => p.theme.fontSizeMedium};

static/app/components/dropdownMenuSection.tsx → static/app/components/dropdownMenu/section.tsx

@@ -2,10 +2,11 @@ import styled from '@emotion/styled';
 import {useMenuSection} from '@react-aria/menu';
 import {Node} from '@react-types/shared';
 
-import {MenuItemProps} from 'sentry/components/dropdownMenuItem';
 import space from 'sentry/styles/space';
 
-type Props = {
+import {MenuItemProps} from './item';
+
+type DropdownMenuSectionProps = {
   children: React.ReactNode;
   node: Node<MenuItemProps>;
 };
@@ -14,23 +15,23 @@ type Props = {
  * A wrapper component for menu sections. See:
  * https://react-spectrum.adobe.com/react-aria/useMenu.html
  */
-function MenuSection({node, children}: Props) {
+function DropdownMenuSection({node, children}: DropdownMenuSectionProps) {
   const {itemProps, headingProps, groupProps} = useMenuSection({
     heading: node.rendered,
     'aria-label': node['aria-label'],
   });
 
   return (
-    <MenuSectionWrap {...itemProps}>
+    <DropdownMenuSectionWrap {...itemProps}>
       {node.rendered && <Heading {...headingProps}>{node.rendered}</Heading>}
       <Group {...groupProps}>{children}</Group>
-    </MenuSectionWrap>
+    </DropdownMenuSectionWrap>
   );
 }
 
-export default MenuSection;
+export default DropdownMenuSection;
 
-const MenuSectionWrap = styled('li')`
+const DropdownMenuSectionWrap = styled('li')`
   list-style-type: none;
 `;
 
@@ -44,7 +45,7 @@ const Heading = styled('span')`
   margin: ${space(1)} ${space(1.5)} ${space(0.5)};
   padding-right: ${space(1)};
 
-  ${MenuSectionWrap}:first-of-type & {
+  ${DropdownMenuSectionWrap}:first-of-type & {
     margin-top: ${space(0.5)};
   }
 `;

static/app/components/events/eventCustomPerformanceMetrics.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import {SectionHeading} from 'sentry/components/charts/styles';
-import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
+import DropdownMenu from 'sentry/components/dropdownMenu';
 import {Panel} from 'sentry/components/panels';
 import {IconEllipsis} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -216,6 +216,6 @@ const Value = styled('span')`
   font-size: ${p => p.theme.fontSizeExtraLarge};
 `;
 
-const StyledDropdownMenuControl = styled(DropdownMenuControl)`
+const StyledDropdownMenuControl = styled(DropdownMenu)`
   margin-left: auto;
 `;

static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx

@@ -5,7 +5,7 @@ import {Role} from 'sentry/components/acl/role';
 import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {openConfirmModal} from 'sentry/components/confirm';
-import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
+import DropdownMenu from 'sentry/components/dropdownMenu';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {Panel, PanelBody, PanelFooter, PanelHeader} from 'sentry/components/panels';
 import {IconChevron, IconEllipsis} from 'sentry/icons';
@@ -115,7 +115,7 @@ function Screenshot({
               >
                 {t('View screenshot')}
               </Button>
-              <DropdownMenuControl
+              <DropdownMenu
                 position="bottom"
                 offset={4}
                 triggerProps={{

static/app/components/performanceOnboarding/sidebar.tsx

@@ -4,8 +4,7 @@ import styled from '@emotion/styled';
 import HighlightTopRightPattern from 'sentry-images/pattern/highlight-top-right.svg';
 
 import {Button} from 'sentry/components/button';
-import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
-import {MenuItemProps} from 'sentry/components/dropdownMenuItem';
+import DropdownMenu, {MenuItemProps} from 'sentry/components/dropdownMenu';
 import IdBadge from 'sentry/components/idBadge';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import useOnboardingDocs from 'sentry/components/onboardingWizard/useOnboardingDocs';
@@ -148,7 +147,7 @@ function PerformanceOnboardingSidebar(props: CommonSidebarProps) {
       <TopRightBackgroundImage src={HighlightTopRightPattern} />
       <TaskList>
         <Heading>{t('Boost Performance')}</Heading>
-        <DropdownMenuControl
+        <DropdownMenu
           items={items}
           triggerLabel={
             <StyledIdBadge