DropdownMenuV2: rename to Menu

packages/block-editor/src/hooks/block-bindings.js

@@ -34,7 +34,7 @@ import { useBlockEditContext } from '../components/block-edit';
 import { useBlockBindingsUtils } from '../utils/block-bindings';
 import { store as blockEditorStore } from '../store';
 
-const { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 const EMPTY_OBJECT = {};
 
@@ -70,18 +70,18 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 		<>
 			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
 				<Fragment key={ name }>
-					<DropdownMenuV2.Group>
+					<Menu.Group>
 						{ Object.keys( fieldsList ).length > 1 && (
-							<DropdownMenuV2.GroupLabel>
+							<Menu.GroupLabel>
 								{ registeredSources[ name ].label }
-							</DropdownMenuV2.GroupLabel>
+							</Menu.GroupLabel>
 						) }
 						{ Object.entries( fields )
 							.filter(
 								( [ , args ] ) => args?.type === attributeType
 							)
 							.map( ( [ key, args ] ) => (
-								<DropdownMenuV2.RadioItem
+								<Menu.RadioItem
 									key={ key }
 									onChange={ () =>
 										updateBlockBindings( {
@@ -95,17 +95,17 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 									value={ key }
 									checked={ key === currentKey }
 								>
-									<DropdownMenuV2.ItemLabel>
+									<Menu.ItemLabel>
 										{ args?.label }
-									</DropdownMenuV2.ItemLabel>
-									<DropdownMenuV2.ItemHelpText>
+									</Menu.ItemLabel>
+									<Menu.ItemHelpText>
 										{ args?.value }
-									</DropdownMenuV2.ItemHelpText>
-								</DropdownMenuV2.RadioItem>
+									</Menu.ItemHelpText>
+								</Menu.RadioItem>
 							) ) }
-					</DropdownMenuV2.Group>
+					</Menu.Group>
 					{ i !== Object.keys( fieldsList ).length - 1 && (
-						<DropdownMenuV2.Separator />
+						<Menu.Separator />
 					) }
 				</Fragment>
 			) ) }
@@ -175,7 +175,7 @@ function EditableBlockBindingsPanelItems( {
 							} );
 						} }
 					>
-						<DropdownMenuV2
+						<Menu
 							placement={
 								isMobile ? 'bottom-start' : 'left-start'
 							}
@@ -195,7 +195,7 @@ function EditableBlockBindingsPanelItems( {
 								attribute={ attribute }
 								binding={ binding }
 							/>
-						</DropdownMenuV2>
+						</Menu>
 					</ToolsPanelItem>
 				);
 			} ) }

packages/components/CHANGELOG.md

@@ -25,6 +25,7 @@
 -   `Tabs`: update indicator more reactively ([#66207](https://github.com/WordPress/gutenberg/pull/66207)).
 -   `Tabs` and `TabPanel`: Fix arrow key navigation in RTL ([#66201](https://github.com/WordPress/gutenberg/pull/66201)).
 -   `Tabs`: override tablist's tabindex only when necessary ([#66209](https://github.com/WordPress/gutenberg/pull/66209)).
+-   `DropdownMenuV2`: rename to `Menu` ([#66289](https://github.com/WordPress/gutenberg/pull/66289)).
 
 ### Internal
 

packages/components/src/menu/README.md

@@ -1,51 +1,51 @@
-# `DropdownMenuV2`
+# `Menu`
 
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`DropdownMenuV2` displays a menu to the user (such as a set of actions or functions) triggered by a button.
+`Menu` displays a menu to the user (such as a set of actions or functions). The menu is rendered in a popover (this pattern is also known as a "Dropdown menu"), which is triggered by a button.
 
 ## Design guidelines
 
 ### Usage
 
-#### When to use a DropdownMenu
+#### When to use a `Menu`
 
-Use a DropdownMenu when you want users to:
+Use a `Menu` when you want users to:
 
 -   Choose an action or change a setting from a list, AND
 -   Only see the available choices contextually.
 
-`DropdownMenu` is a React component to render an expandable menu of buttons. It is similar in purpose to a `<select>` element, with the distinction that it does not maintain a value. Instead, each option behaves as an action button.
+`Menu` is a React component to render an expandable menu of buttons. It is similar in purpose to a `<select>` element, with the distinction that it does not maintain a value. Instead, each option behaves as an action button.
 
-If you need to display all the available options at all times, consider using a Toolbar instead. Use a `DropdownMenu` to display a list of actions after the user interacts with a button.
+If you need to display all the available options at all times, consider using a Toolbar instead. Use a `Menu` to display a list of actions after the user interacts with a button.
 
 **Do**
-Use a `DropdownMenu` to display a list of actions after the user interacts with an icon.
+Use a `Menu` to display a list of actions after the user interacts with an icon.
 
-**Don’t** use a `DropdownMenu` for important actions that should always be visible. Use a `Toolbar` instead.
+**Don’t** use a `Menu` for important actions that should always be visible. Use a `Toolbar` instead.
 
 **Don’t**
-Don’t use a `DropdownMenu` for frequently used actions. Use a `Toolbar` instead.
+Don’t use a `Menu` for frequently used actions. Use a `Toolbar` instead.
 
 #### Behavior
 
-Generally, the parent button should indicate that interacting with it will show a `DropdownMenu`.
+Generally, the parent button should indicate that interacting with it will show a `Menu`.
 
-The parent button should retain the same visual styling regardless of whether the `DropdownMenu` is displayed or not.
+The parent button should retain the same visual styling regardless of whether the `Menu` is displayed or not.
 
 #### Placement
 
-The `DropdownMenu` should typically appear directly below, or below and to the left of, the parent button. If there isn’t enough space below to display the full `DropdownMenu`, it can be displayed instead above the parent button.
+The `Menu` should typically appear directly below, or below and to the left of, the parent button. If there isn’t enough space below to display the full `Menu`, it can be displayed instead above the parent button.
 
 ## Development guidelines
 
 This component is still highly experimental, and it's not normally accessible to consumers of the `@wordpress/components` package.
 
-The component exposes a set of components that are meant to be used in combination with each other in order to implement a `DropdownMenu` correctly.
+The component exposes a set of components that are meant to be used in combination with each other in order to implement a `Menu` correctly.
 
-### `DropdownMenuV2`
+### `Menu`
 
 The root component, used to specify the menu's trigger and its contents.
 
@@ -55,45 +55,45 @@ The component accepts the following props:
 
 ##### `trigger`: `React.ReactNode`
 
-The trigger button
+The button triggering the menu popover.
 
 -   Required: yes
 
 ##### `children`: `React.ReactNode`
 
-The contents of the dropdown
+The contents of the menu (ie. one or more menu items).
 
 -   Required: yes
 
 ##### `defaultOpen`: `boolean`
 
-The open state of the dropdown menu when it is initially rendered. Use when not wanting to control its open state.
+The open state of the menu popover when it is initially rendered. Use when not wanting to control its open state.
 
 -   Required: no
 -   Default: `false`
 
 ##### `open`: `boolean`
 
-The controlled open state of the dropdown menu. Must be used in conjunction with `onOpenChange`.
+The controlled open state of the menu popover. Must be used in conjunction with `onOpenChange`.
 
 -   Required: no
 
 ##### `onOpenChange`: `(open: boolean) => void`
 
-Event handler called when the open state of the dropdown menu changes.
+Event handler called when the open state of the menu popover changes.
 
 -   Required: no
 
 ##### `modal`: `boolean`
 
-The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+The modality of the menu popover. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
 
 -   Required: no
 -   Default: `true`
 
 ##### `placement`: ``'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
 
-The placement of the dropdown menu popover.
+The placement of the menu popover.
 
 -   Required: no
 -   Default: `'bottom-start'` for root-level menus, `'right-start'` for nested menus
@@ -112,7 +112,7 @@ The skidding of the popover along the anchor element. Can be set to negative val
 -   Required: no
 -   Default: `0` for root-level menus, `-8` for nested menus
 
-### `DropdownMenuV2.Item`
+### `Menu.Item`
 
 Used to render a menu item.
 
@@ -140,7 +140,7 @@ The contents of the item's suffix.
 
 ##### `hideOnClick`: `boolean`
 
-Whether to hide the dropdown menu when the menu item is clicked.
+Whether to hide the menu popover when the menu item is clicked.
 
 -   Required: no
 -   Default: `true`
@@ -152,7 +152,7 @@ Determines if the element is disabled.
 -   Required: no
 -   Default: `false`
 
-### `DropdownMenuV2.CheckboxItem`
+### `Menu.CheckboxItem`
 
 Used to render a checkbox item.
 
@@ -174,7 +174,7 @@ The contents of the item's suffix.
 
 ##### `hideOnClick`: `boolean`
 
-Whether to hide the dropdown menu when the menu item is clicked.
+Whether to hide the menu popover when the menu item is clicked.
 
 -   Required: no
 -   Default: `false`
@@ -218,7 +218,7 @@ Event handler called when the checked state of the checkbox menu item changes.
 
 -   Required: no
 
-### `DropdownMenuV2.RadioItem`
+### `Menu.RadioItem`
 
 Used to render a radio item.
 
@@ -240,7 +240,7 @@ The contents of the item's suffix.
 
 ##### `hideOnClick`: `boolean`
 
-Whether to hide the dropdown menu when the menu item is clicked.
+Whether to hide the menu popover when the menu item is clicked.
 
 -   Required: no
 -   Default: `false`
@@ -283,7 +283,7 @@ Event handler called when the checked radio menu item changes.
 
 -   Required: no
 
-### `DropdownMenuV2.ItemLabel`
+### `Menu.ItemLabel`
 
 Used to render the menu item's label.
 
@@ -297,7 +297,7 @@ The label contents.
 
 -   Required: yes
 
-### `DropdownMenuV2.ItemHelpText`
+### `Menu.ItemHelpText`
 
 Used to render the menu item's help text.
 
@@ -311,7 +311,7 @@ The help text contents.
 
 -   Required: yes
 
-### `DropdownMenuV2.Group`
+### `Menu.Group`
 
 Used to group menu items.
 
@@ -321,11 +321,11 @@ The component accepts the following props:
 
 ##### `children`: `React.ReactNode`
 
-The contents of the group.
+The contents of the menu group (ie. an optional menu group label and one or more menu items).
 
 -   Required: yes
 
-### `DropdownMenuV2.GroupLabel`
+### `Menu.GroupLabel`
 
 Used to render a group label. The label text should be kept as short as possible.
 
@@ -335,10 +335,10 @@ The component accepts the following props:
 
 ##### `children`: `React.ReactNode`
 
-The contents of the group label.
+The contents of the menu group label.
 
 -   Required: yes
 
-### `DropdownMenuV2.Separator`
+### `Menu.Separator`
 
 Used to render a visual separator.

packages/components/src/menu/checkbox-item.tsx

@@ -13,51 +13,51 @@ import { Icon, check } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
-import { DropdownMenuContext } from './context';
-import type { DropdownMenuCheckboxItemProps } from './types';
+import { MenuContext } from './context';
+import type { MenuCheckboxItemProps } from './types';
 import * as Styled from './styles';
 import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
-export const DropdownMenuCheckboxItem = forwardRef<
+export const MenuCheckboxItem = forwardRef<
 	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuCheckboxItemProps, 'div', false >
->( function DropdownMenuCheckboxItem(
+	WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
+>( function MenuCheckboxItem(
 	{ suffix, children, onBlur, hideOnClick = false, ...props },
 	ref
 ) {
 	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
 	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
-	const dropdownMenuContext = useContext( DropdownMenuContext );
+	const menuContext = useContext( MenuContext );
 
 	return (
-		<Styled.DropdownMenuCheckboxItem
+		<Styled.MenuCheckboxItem
 			ref={ ref }
 			{ ...props }
 			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
-			store={ dropdownMenuContext?.store }
+			store={ menuContext?.store }
 		>
 			<Ariakit.MenuItemCheck
-				store={ dropdownMenuContext?.store }
+				store={ menuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
 				// Override some ariakit inline styles
 				style={ { width: 'auto', height: 'auto' } }
 			>
 				<Icon icon={ check } size={ 24 } />
 			</Ariakit.MenuItemCheck>
 
-			<Styled.DropdownMenuItemContentWrapper>
-				<Styled.DropdownMenuItemChildrenWrapper>
+			<Styled.MenuItemContentWrapper>
+				<Styled.MenuItemChildrenWrapper>
 					{ children }
-				</Styled.DropdownMenuItemChildrenWrapper>
+				</Styled.MenuItemChildrenWrapper>
 
 				{ suffix && (
 					<Styled.ItemSuffixWrapper>
 						{ suffix }
 					</Styled.ItemSuffixWrapper>
 				) }
-			</Styled.DropdownMenuItemContentWrapper>
-		</Styled.DropdownMenuCheckboxItem>
+			</Styled.MenuItemContentWrapper>
+		</Styled.MenuCheckboxItem>
 	);
 } );

packages/components/src/menu/context.tsx

@@ -6,8 +6,8 @@ import { createContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { DropdownMenuContext as DropdownMenuContextType } from './types';
+import type { MenuContext as MenuContextType } from './types';
 
-export const DropdownMenuContext = createContext<
-	DropdownMenuContextType | undefined
->( undefined );
+export const MenuContext = createContext< MenuContextType | undefined >(
+	undefined
+);