Components: move displayName assignment to top-level files (#64793)

* Update CONTRIBUTING guidelines

* Update Composite component

* Update DropdownMenuV2 component

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

packages/components/CONTRIBUTING.md

@@ -261,19 +261,18 @@ The following example implements all of the above recommendations.
 //=======================
 import { forwardRef } from '@wordpress/element';
 
-export const SubComponent = forwardRef(
-	function UnforwardedSubComponent( props, ref ) {
+export const ComponentSubcomponent = forwardRef(
+	function UnforwardedComponentSubcomponent( props, ref ) {
 		/* ... */
 	}
 );
-SubComponent.displayName = 'Component.SubComponent';
 
 //=======================
 // context.ts
 //=======================
 import { createContext } from '@wordpress/element';
 
-export const Context = createContext();
+export const ComponentContext = createContext();
 
 //=======================
 // hook.ts
@@ -288,8 +287,8 @@ export function useComponent() {
 // component.tsx
 //=======================
 import { forwardRef } from '@wordpress/element';
-import { SubComponent } from './subcomponent';
-import { Context } from './context';
+import { ComponentSubcomponent } from './subcomponent';
+import { ComponentContext } from './context';
 
 /** The top-level component's JSDoc. */
 export const Component = Object.assign(
@@ -298,9 +297,13 @@ export const Component = Object.assign(
 	} ),
 	{
 		/** The subcomponent's JSDoc. */
-		SubComponent,
+		Subcomponent: Object.assign(ComponentSubcomponent, {
+			displayName: 'Component.SubComponent';,
+		}),
 		/** The context's JSDoc. */
-		Context,
+		Context: Object.assign(ComponentContext, {
+			displayName: 'Component.Context'
+		}),
 	}
 );
 

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

@@ -28,4 +28,3 @@ export const CompositeGroupLabel = forwardRef<
 		/>
 	);
 } );
-CompositeGroupLabel.displayName = 'Composite.GroupLabel';

packages/components/src/composite/group.tsx

@@ -28,4 +28,3 @@ export const CompositeGroup = forwardRef<
 		/>
 	);
 } );
-CompositeGroup.displayName = 'Composite.Group';

packages/components/src/composite/hover.tsx

@@ -28,4 +28,3 @@ export const CompositeHover = forwardRef<
 		/>
 	);
 } );
-CompositeHover.displayName = 'Composite.Hover';

packages/components/src/composite/index.tsx

@@ -93,7 +93,9 @@ export const Composite = Object.assign(
 		 * </Composite>
 		 * ```
 		 */
-		Group: CompositeGroup,
+		Group: Object.assign( CompositeGroup, {
+			displayName: 'Composite.Group',
+		} ),
 		/**
 		 * Renders a label in a composite group. This component must be wrapped with
 		 * `Composite.Group` so the `aria-labelledby` prop is properly set on the
@@ -113,7 +115,9 @@ export const Composite = Object.assign(
 		 * </Composite>
 		 * ```
 		 */
-		GroupLabel: CompositeGroupLabel,
+		GroupLabel: Object.assign( CompositeGroupLabel, {
+			displayName: 'Composite.GroupLabel',
+		} ),
 		/**
 		 * Renders a composite item.
 		 *
@@ -129,7 +133,7 @@ export const Composite = Object.assign(
 		 * </Composite>
 		 * ```
 		 */
-		Item: CompositeItem,
+		Item: Object.assign( CompositeItem, { displayName: 'Composite.Item' } ),
 		/**
 		 * Renders a composite row. Wrapping `Composite.Item` elements within
 		 * `Composite.Row` will create a two-dimensional composite widget, such as a
@@ -154,7 +158,7 @@ export const Composite = Object.assign(
 		 * </Composite>
 		 * ```
 		 */
-		Row: CompositeRow,
+		Row: Object.assign( CompositeRow, { displayName: 'Composite.Row' } ),
 		/**
 		 * Renders an element in a composite widget that receives focus on mouse move
 		 * and loses focus to the composite base element on mouse leave. This should
@@ -175,7 +179,9 @@ export const Composite = Object.assign(
 		 * </Composite>
 		 * ```
 		 */
-		Hover: CompositeHover,
+		Hover: Object.assign( CompositeHover, {
+			displayName: 'Composite.Hover',
+		} ),
 		/**
 		 * Renders a component that adds typeahead functionality to composite
 		 * components. Hitting printable character keys will move focus to the next
@@ -192,7 +198,9 @@ export const Composite = Object.assign(
 		 * </Composite>
 		 * ```
 		 */
-		Typeahead: CompositeTypeahead,
+		Typeahead: Object.assign( CompositeTypeahead, {
+			displayName: 'Composite.Typeahead',
+		} ),
 		/**
 		 * The React context used by the composite components. It can be used by
 		 * to access the composite store, and to forward the context when composite
@@ -207,6 +215,8 @@ export const Composite = Object.assign(
 		 * const compositeContext = useContext( Composite.Context );
 		 * ```
 		 */
-		Context: CompositeContext,
+		Context: Object.assign( CompositeContext, {
+			displayName: 'Composite.Context',
+		} ),
 	}
 );

packages/components/src/composite/item.tsx

@@ -28,4 +28,3 @@ export const CompositeItem = forwardRef<
 		/>
 	);
 } );
-CompositeItem.displayName = 'Composite.Item';

packages/components/src/composite/row.tsx

@@ -28,4 +28,3 @@ export const CompositeRow = forwardRef<
 		/>
 	);
 } );
-CompositeRow.displayName = 'Composite.Row';

packages/components/src/composite/typeahead.tsx

@@ -28,4 +28,3 @@ export const CompositeTypeahead = forwardRef<
 		/>
 	);
 } );
-CompositeTypeahead.displayName = 'Composite.Typeahead';

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

@@ -57,4 +57,3 @@ export const DropdownMenuCheckboxItem = forwardRef<
 		</Styled.DropdownMenuCheckboxItem>
 	);
 } );
-DropdownMenuCheckboxItem.displayName = 'DropdownMenuV2.CheckboxItem';

packages/components/src/dropdown-menu-v2/context.tsx

@@ -11,4 +11,3 @@ import type { DropdownMenuContext as DropdownMenuContextType } from './types';
 export const DropdownMenuContext = createContext<
 	DropdownMenuContextType | undefined
 >( undefined );
-DropdownMenuContext.displayName = 'DropdownMenuV2.Context';

packages/components/src/dropdown-menu-v2/group.tsx

@@ -24,4 +24,3 @@ export const DropdownMenuGroup = forwardRef<
 		/>
 	);
 } );
-DropdownMenuGroup.displayName = 'DropdownMenuV2.Group';

packages/components/src/dropdown-menu-v2/index.tsx

@@ -200,14 +200,30 @@ const UnconnectedDropdownMenu = (
 export const DropdownMenuV2 = Object.assign(
 	contextConnect( UnconnectedDropdownMenu, 'DropdownMenu' ),
 	{
-		Context: DropdownMenuContext,
-		Item: DropdownMenuItem,
-		RadioItem: DropdownMenuRadioItem,
-		CheckboxItem: DropdownMenuCheckboxItem,
-		Group: DropdownMenuGroup,
-		Separator: DropdownMenuSeparator,
-		ItemLabel: DropdownMenuItemLabel,
-		ItemHelpText: DropdownMenuItemHelpText,
+		Context: Object.assign( DropdownMenuContext, {
+			displayName: 'DropdownMenuV2.Context',
+		} ),
+		Item: Object.assign( DropdownMenuItem, {
+			displayName: 'DropdownMenuV2.Item',
+		} ),
+		RadioItem: Object.assign( DropdownMenuRadioItem, {
+			displayName: 'DropdownMenuV2.RadioItem',
+		} ),
+		CheckboxItem: Object.assign( DropdownMenuCheckboxItem, {
+			displayName: 'DropdownMenuV2.CheckboxItem',
+		} ),
+		Group: Object.assign( DropdownMenuGroup, {
+			displayName: 'DropdownMenuV2.Group',
+		} ),
+		Separator: Object.assign( DropdownMenuSeparator, {
+			displayName: 'DropdownMenuV2.Separator',
+		} ),
+		ItemLabel: Object.assign( DropdownMenuItemLabel, {
+			displayName: 'DropdownMenuV2.ItemLabel',
+		} ),
+		ItemHelpText: Object.assign( DropdownMenuItemHelpText, {
+			displayName: 'DropdownMenuV2.ItemHelpText',
+		} ),
 	}
 );
 

packages/components/src/dropdown-menu-v2/item-help-text.tsx

@@ -21,4 +21,3 @@ export const DropdownMenuItemHelpText = forwardRef<
 		/>
 	);
 } );
-DropdownMenuItemHelpText.displayName = 'DropdownMenuV2.ItemHelpText';

packages/components/src/dropdown-menu-v2/item-label.tsx

@@ -21,4 +21,3 @@ export const DropdownMenuItemLabel = forwardRef<
 		/>
 	);
 } );
-DropdownMenuItemLabel.displayName = 'DropdownMenuV2.ItemLabel';

packages/components/src/dropdown-menu-v2/item.tsx

@@ -44,4 +44,3 @@ export const DropdownMenuItem = forwardRef<
 		</Styled.DropdownMenuItem>
 	);
 } );
-DropdownMenuItem.displayName = 'DropdownMenuV2.Item';

packages/components/src/dropdown-menu-v2/radio-item.tsx

@@ -64,4 +64,3 @@ export const DropdownMenuRadioItem = forwardRef<
 		</Styled.DropdownMenuRadioItem>
 	);
 } );
-DropdownMenuRadioItem.displayName = 'DropdownMenuV2.RadioItem';

packages/components/src/dropdown-menu-v2/separator.tsx

@@ -25,4 +25,3 @@ export const DropdownMenuSeparator = forwardRef<
 		/>
 	);
 } );
-DropdownMenuSeparator.displayName = 'DropdownMenuV2.Separator';