Rename subcomponents to get their JSDocs picked up by README generator

packages/components/src/menu/README.md

@@ -72,6 +72,9 @@ The placement of the menu popover.
 
 ### Menu.TriggerButton
 
+Renders a menu button that toggles the visibility of a sibling
+`Menu.Popover` component when clicked or when using arrow keys.
+
 #### Props
 
 ##### `accessibleWhenDisabled`
@@ -125,6 +128,14 @@ merged.
 
 ### Menu.Popover
 
+Renders a dropdown menu element that's controlled by a sibling
+`Menu.TriggerButton` component. It renders a popover and automatically
+focuses on items when the menu is shown.
+
+The only valid children of `Menu.Popover` are `Menu.Item`,
+`Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,
+and `Menu` (for nested dropdown menus).
+
 #### Props
 
 ##### `children`
@@ -185,6 +196,11 @@ negative values to make the popover shift to the opposite side.
 
 ### Menu.Item
 
+Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.
+
+It can optionally contain one instance of the `Menu.ItemLabel` component
+and one instance of the `Menu.ItemHelpText` component.
+
 #### Props
 
 ##### `children`
@@ -244,6 +260,12 @@ The contents of the menu item's suffix, such as a keyboard shortcut.
 
 ### Menu.RadioItem
 
+Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`
+components.
+
+It can optionally contain one instance of the `Menu.ItemLabel` component
+and one instance of the `Menu.ItemHelpText` component.
+
 #### Props
 
 ##### `children`
@@ -336,6 +358,12 @@ The radio item's value.
 
 ### Menu.CheckboxItem
 
+Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`
+components.
+
+It can optionally contain one instance of the `Menu.ItemLabel` component
+and one instance of the `Menu.ItemHelpText` component.
+
 #### Props
 
 ##### `children`
@@ -429,6 +457,9 @@ associated to the same `name`.
 
 ### Menu.ItemLabel
 
+Renders a menu item's label text. It should be wrapped with `Menu.Item`,
+`Menu.RadioItem`, or `Menu.CheckboxItem`.
+
 #### Props
 
 ##### `as`
@@ -440,6 +471,9 @@ The HTML element or React component to render the component as.
 
 ### Menu.ItemHelpText
 
+Renders a menu item's help text. It should be wrapped with `Menu.Item`,
+`Menu.RadioItem`, or `Menu.CheckboxItem`.
+
 #### Props
 
 ##### `as`
@@ -451,6 +485,11 @@ The HTML element or React component to render the component as.
 
 ### Menu.Group
 
+Renders a group for menu items.
+
+It should contain one instance of `Menu.GroupLabel` and one or more
+instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.
+
 #### Props
 
 ##### `children`
@@ -464,6 +503,11 @@ The contents of the menu group, which should include one instance of the
 
 ### Menu.GroupLabel
 
+Renders a label in a menu group.
+
+This component should be wrapped with `Menu.Group` so the
+`aria-labelledby` is correctly set on the group element.
+
 #### Props
 
 ##### `children`
@@ -476,10 +520,17 @@ label for the menu group.
 
 ### Menu.Separator
 
+Renders a divider between menu items or menu groups.
+
 #### Props
 
 ### Menu.SubmenuTriggerItem
 
+Renders a menu item that toggles the visibility of a sibling
+`Menu.Popover` component when clicked or when using arrow keys.
+
+This component is used to create a nested dropdown menu.
+
 #### Props
 
 ##### `children`

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

@@ -13,18 +13,18 @@ import { Icon, check } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
-import { MenuContext } from './context';
-import type { MenuCheckboxItemProps } from './types';
+import { Context } from './context';
+import type { CheckboxItemProps } from './types';
 import * as Styled from './styles';
 
-export const MenuCheckboxItem = forwardRef<
+export const CheckboxItem = forwardRef<
 	HTMLDivElement,
-	WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
->( function MenuCheckboxItem(
+	WordPressComponentProps< CheckboxItemProps, 'div', false >
+>( function CheckboxItem(
 	{ suffix, children, disabled = false, hideOnClick = false, ...props },
 	ref
 ) {
-	const menuContext = useContext( MenuContext );
+	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {
 		throw new Error(
@@ -33,7 +33,7 @@ export const MenuCheckboxItem = forwardRef<
 	}
 
 	return (
-		<Styled.MenuCheckboxItem
+		<Styled.CheckboxItem
 			ref={ ref }
 			{ ...props }
 			accessibleWhenDisabled
@@ -50,17 +50,17 @@ export const MenuCheckboxItem = forwardRef<
 				<Icon icon={ check } size={ 24 } />
 			</Ariakit.MenuItemCheck>
 
-			<Styled.MenuItemContentWrapper>
-				<Styled.MenuItemChildrenWrapper>
+			<Styled.ItemContentWrapper>
+				<Styled.ItemChildrenWrapper>
 					{ children }
-				</Styled.MenuItemChildrenWrapper>
+				</Styled.ItemChildrenWrapper>
 
 				{ suffix && (
 					<Styled.ItemSuffixWrapper>
 						{ suffix }
 					</Styled.ItemSuffixWrapper>
 				) }
-			</Styled.MenuItemContentWrapper>
-		</Styled.MenuCheckboxItem>
+			</Styled.ItemContentWrapper>
+		</Styled.CheckboxItem>
 	);
 } );

packages/components/src/menu/context.tsx

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

packages/components/src/menu/docs-manifest.json

@@ -4,57 +4,57 @@
 	"filePath": "./index.tsx",
 	"subcomponents": [
 		{
-			"displayName": "MenuTriggerButton",
+			"displayName": "TriggerButton",
 			"preferredDisplayName": "Menu.TriggerButton",
 			"filePath": "./trigger-button.tsx"
 		},
 		{
-			"displayName": "MenuPopover",
+			"displayName": "Popover",
 			"preferredDisplayName": "Menu.Popover",
 			"filePath": "./popover.tsx"
 		},
 		{
-			"displayName": "MenuItem",
+			"displayName": "Item",
 			"preferredDisplayName": "Menu.Item",
 			"filePath": "./item.tsx"
 		},
 		{
-			"displayName": "MenuRadioItem",
+			"displayName": "RadioItem",
 			"preferredDisplayName": "Menu.RadioItem",
 			"filePath": "./radio-item.tsx"
 		},
 		{
-			"displayName": "MenuCheckboxItem",
+			"displayName": "CheckboxItem",
 			"preferredDisplayName": "Menu.CheckboxItem",
 			"filePath": "./checkbox-item.tsx"
 		},
 		{
-			"displayName": "MenuItemLabel",
+			"displayName": "ItemLabel",
 			"preferredDisplayName": "Menu.ItemLabel",
 			"filePath": "./item-label.tsx"
 		},
 		{
-			"displayName": "MenuItemHelpText",
+			"displayName": "ItemHelpText",
 			"preferredDisplayName": "Menu.ItemHelpText",
 			"filePath": "./item-help-text.tsx"
 		},
 		{
-			"displayName": "MenuGroup",
+			"displayName": "Group",
 			"preferredDisplayName": "Menu.Group",
 			"filePath": "./group.tsx"
 		},
 		{
-			"displayName": "MenuGroupLabel",
+			"displayName": "GroupLabel",
 			"preferredDisplayName": "Menu.GroupLabel",
 			"filePath": "./group-label.tsx"
 		},
 		{
-			"displayName": "MenuSeparator",
+			"displayName": "Separator",
 			"preferredDisplayName": "Menu.Separator",
 			"filePath": "./separator.tsx"
 		},
 		{
-			"displayName": "MenuSubmenuTriggerItem",
+			"displayName": "SubmenuTriggerItem",
 			"preferredDisplayName": "Menu.SubmenuTriggerItem",
 			"filePath": "./submenu-trigger-item.tsx"
 		}

packages/components/src/menu/group-label.tsx

@@ -7,16 +7,16 @@ import { forwardRef, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
-import { MenuContext } from './context';
+import { Context } from './context';
 import { Text } from '../text';
-import type { MenuGroupLabelProps } from './types';
+import type { GroupLabelProps } from './types';
 import * as Styled from './styles';
 
-export const MenuGroupLabel = forwardRef<
+export const GroupLabel = forwardRef<
 	HTMLDivElement,
-	WordPressComponentProps< MenuGroupLabelProps, 'div', false >
->( function MenuGroup( props, ref ) {
-	const menuContext = useContext( MenuContext );
+	WordPressComponentProps< GroupLabelProps, 'div', false >
+>( function Group( props, ref ) {
+	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {
 		throw new Error(
@@ -25,7 +25,7 @@ export const MenuGroupLabel = forwardRef<
 	}
 
 	return (
-		<Styled.MenuGroupLabel
+		<Styled.GroupLabel
 			ref={ ref }
 			render={
 				// @ts-expect-error The `children` prop is passed

packages/components/src/menu/group.tsx

@@ -7,15 +7,15 @@ import { forwardRef, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
-import { MenuContext } from './context';
-import type { MenuGroupProps } from './types';
+import { Context } from './context';
+import type { GroupProps } from './types';
 import * as Styled from './styles';
 
-export const MenuGroup = forwardRef<
+export const Group = forwardRef<
 	HTMLDivElement,
-	WordPressComponentProps< MenuGroupProps, 'div', false >
->( function MenuGroup( props, ref ) {
-	const menuContext = useContext( MenuContext );
+	WordPressComponentProps< GroupProps, 'div', false >
+>( function Group( props, ref ) {
+	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {
 		throw new Error(
@@ -24,10 +24,6 @@ export const MenuGroup = forwardRef<
 	}
 
 	return (
-		<Styled.MenuGroup
-			ref={ ref }
-			{ ...props }
-			store={ menuContext.store }
-		/>
+		<Styled.Group ref={ ref } { ...props } store={ menuContext.store } />
 	);
 } );