Hook Dropdown into context system, update DropdownMenu and CircularOp…

…tionPicker

packages/components/src/circular-option-picker/types.ts

@@ -12,7 +12,7 @@ import type { Icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { ButtonAsButtonProps } from '../button/types';
-import type Dropdown from '../dropdown';
+import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../ui/context';
 
 export type CircularOptionPickerProps = {
@@ -44,10 +44,7 @@ export type DropdownLinkActionProps = {
 		'children'
 	>;
 	linkText: string;
-	dropdownProps: Omit<
-		React.ComponentProps< typeof Dropdown >,
-		'className' | 'renderToggle'
-	>;
+	dropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;
 	className?: string;
 };
 

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

@@ -55,6 +55,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 
 		// Context
 		variant,
+		// TODO: unify type with v2, consider adding unstyled?
 	} = useContextSystem< DropdownMenuProps & { variant?: 'toolbar' } >(
 		dropdownMenuProps,
 		'DropdownMenu'
@@ -80,7 +81,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 	const mergedPopoverProps = mergeProps(
 		{
 			className: 'components-dropdown-menu__popover',
-			variant,
+			// Do not add a `variant` prop if it's not defined, to avoid overriding
+			// values from internal context system.
+			...( !! variant ? { variant } : {} ),
 		},
 		popoverProps
 	);

packages/components/src/dropdown/index.tsx

@@ -7,13 +7,14 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
+import { contextConnect, useContextSystem } from '../ui/context';
 import Popover from '../popover';
 import type { DropdownProps } from './types';
 
@@ -33,8 +34,11 @@ function useObservableState(
 	] as const;
 }
 
-function UnforwardedDropdown(
-	{
+const UnconnectedDropdown = (
+	props: DropdownProps,
+	forwardedRef: ForwardedRef< any >
+) => {
+	const {
 		renderContent,
 		renderToggle,
 		className,
@@ -49,9 +53,15 @@ function UnforwardedDropdown(
 
 		// Deprecated props
 		position,
-	}: DropdownProps,
-	forwardedRef: ForwardedRef< any >
-) {
+
+		// From context system
+		variant,
+		// TODO: unify type with v2, consider adding unstyled?
+	} = useContextSystem< DropdownProps & { variant?: 'toolbar' } >(
+		props,
+		'Dropdown'
+	);
+
 	if ( position !== undefined ) {
 		deprecated( '`position` prop in wp.components.Dropdown', {
 			since: '6.2',
@@ -149,6 +159,7 @@ function UnforwardedDropdown(
 							? fallbackPopoverAnchor
 							: undefined
 					}
+					variant={ variant }
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',
@@ -161,7 +172,7 @@ function UnforwardedDropdown(
 			) }
 		</div>
 	);
-}
+};
 
 /**
  * Renders a button that opens a floating content modal when clicked.
@@ -188,6 +199,6 @@ function UnforwardedDropdown(
  * );
  * ```
  */
-export const Dropdown = forwardRef( UnforwardedDropdown );
+export const Dropdown = contextConnect( UnconnectedDropdown, 'Dropdown' );
 
 export default Dropdown;