@wordpress/components 25.0.0 → 25.1.1

package/src/color-palette/test/index.tsx

@@ -1,9 +1,12 @@
 /**
  * External dependencies
  */
-import { render, screen, within, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -20,6 +23,25 @@ function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
 
+const ControlledColorPalette = ( {
+	onChange,
+}: {
+	onChange?: ( newColor?: string ) => void;
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >( undefined );
+
+	return (
+		<ColorPalette
+			value={ color }
+			colors={ EXAMPLE_COLORS }
+			onChange={ ( newColor ) => {
+				setColor( newColor );
+				onChange?.( newColor );
+			} }
+		/>
+	);
+};
+
 describe( 'ColorPalette', () => {
 	it( 'should render a dynamic toolbar of colors', () => {
 		const onChange = jest.fn();
@@ -142,6 +164,12 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
+		// Check that custom color popover is not visible by default.
+		expect(
+			screen.queryByLabelText( 'Hex color' )
+		).not.toBeInTheDocument();
+
+		// Click the dropdown button while the dropdown is not expanded.
 		await user.click(
 			screen.getByRole( 'button', {
 				name: /^Custom color picker/,
@@ -149,23 +177,13 @@ describe( 'ColorPalette', () => {
 			} )
 		);
 
+		// Confirm the dropdown is now expanded, and the button is still visible.
 		const dropdownButton = screen.getByRole( 'button', {
 			name: /^Custom color picker/,
 			expanded: true,
 		} );
-
 		expect( dropdownButton ).toBeVisible();
 
-		expect(
-			within( dropdownButton ).getByText( EXAMPLE_COLORS[ 0 ].name )
-		).toBeVisible();
-
-		expect(
-			within( dropdownButton ).getByText(
-				EXAMPLE_COLORS[ 0 ].color.replace( '#', '' )
-			)
-		).toBeVisible();
-
 		// Check that the popover with custom color input has appeared.
 		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
 
@@ -201,4 +219,49 @@ describe( 'ColorPalette', () => {
 			screen.getByRole( 'button', { name: 'Clear' } )
 		).toBeInTheDocument();
 	} );
+
+	it( 'should display the selected color name and value', async () => {
+		const user = userEvent.setup();
+
+		render( <ControlledColorPalette /> );
+
+		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
+
+		// Click the first unpressed button
+		await user.click(
+			screen.getAllByRole( 'button', {
+				name: /^Color:/,
+				pressed: false,
+			} )[ 0 ]
+		);
+
+		// Confirm the correct color name, color value, and button label are used
+		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].name ) ).toBeVisible();
+		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'button', {
+				name: `Custom color picker. The currently selected color is called "${
+					EXAMPLE_COLORS[ 0 ].name
+				}" and has a value of "${ EXAMPLE_COLORS[ 0 ].color
+					.split( '' )
+					.join( '-' ) }".`,
+				expanded: false,
+			} )
+		).toBeInTheDocument();
+
+		// Clear the color, confirm that the relative values are cleared/updated.
+		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
+		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
+		expect(
+			screen.queryByText( EXAMPLE_COLORS[ 0 ].name )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText( EXAMPLE_COLORS[ 0 ].color )
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', {
+				name: /^Custom color picker.$/,
+			} )
+		).toBeInTheDocument();
+	} );
 } );

package/src/dropdown/index.tsx

@@ -7,15 +7,16 @@ 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';
+import type { DropdownProps, DropdownInternalContext } from './types';
 
 function useObservableState(
 	initialState: boolean,
@@ -33,8 +34,11 @@ function useObservableState(
 	] as const;
 }
 
-function UnforwardedDropdown(
-	{
+const UnconnectedDropdown = (
+	props: DropdownProps,
+	forwardedRef: ForwardedRef< any >
+) => {
+	const {
 		renderContent,
 		renderToggle,
 		className,
@@ -49,9 +53,14 @@ function UnforwardedDropdown(
 
 		// Deprecated props
 		position,
-	}: DropdownProps,
-	forwardedRef: ForwardedRef< any >
-) {
+
+		// From context system
+		variant,
+	} = useContextSystem< DropdownProps & DropdownInternalContext >(
+		props,
+		'Dropdown'
+	);
+
 	if ( position !== undefined ) {
 		deprecated( '`position` prop in wp.components.Dropdown', {
 			since: '6.2',
@@ -120,7 +129,7 @@ function UnforwardedDropdown(
 
 	return (
 		<div
-			className={ classnames( 'components-dropdown', className ) }
+			className={ className }
 			ref={ useMergeRefs( [
 				containerRef,
 				forwardedRef,
@@ -149,6 +158,7 @@ function UnforwardedDropdown(
 							? fallbackPopoverAnchor
 							: undefined
 					}
+					variant={ variant }
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',
@@ -161,7 +171,7 @@ function UnforwardedDropdown(
 			) }
 		</div>
 	);
-}
+};
 
 /**
  * Renders a button that opens a floating content modal when clicked.
@@ -188,6 +198,6 @@ function UnforwardedDropdown(
  * );
  * ```
  */
-export const Dropdown = forwardRef( UnforwardedDropdown );
+export const Dropdown = contextConnect( UnconnectedDropdown, 'Dropdown' );
 
 export default Dropdown;

package/src/dropdown/types.ts

@@ -112,3 +112,11 @@ export type DropdownProps = {
 	 */
 	position?: PopoverProps[ 'position' ];
 };
+
+export type DropdownInternalContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};

package/src/dropdown-menu/index.tsx

@@ -11,10 +11,15 @@ import { menu } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { contextConnectWithoutRef, useContextSystem } from '../ui/context';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import { NavigableMenu } from '../navigable-container';
-import type { DropdownMenuProps, DropdownOption } from './types';
+import type {
+	DropdownMenuProps,
+	DropdownOption,
+	DropdownMenuInternalContext,
+} from './types';
 
 function mergeProps<
 	T extends { className?: string; [ key: string ]: unknown }
@@ -38,88 +43,7 @@ function isFunction( maybeFunc: unknown ): maybeFunc is () => void {
 	return typeof maybeFunc === 'function';
 }
 
-/**
- *
- * The DropdownMenu displays a list of actions (each contained in a MenuItem,
- * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
- * after the user has interacted with an element (a button or icon) or when
- * they perform a specific action.
- *
- * Render a Dropdown Menu with a set of controls:
- *
- * ```jsx
- * import { DropdownMenu } from '@wordpress/components';
- * import {
- * 	more,
- * 	arrowLeft,
- * 	arrowRight,
- * 	arrowUp,
- * 	arrowDown,
- * } from '@wordpress/icons';
- *
- * const MyDropdownMenu = () => (
- * 	<DropdownMenu
- * 		icon={ more }
- * 		label="Select a direction"
- * 		controls={ [
- * 			{
- * 				title: 'Up',
- * 				icon: arrowUp,
- * 				onClick: () => console.log( 'up' ),
- * 			},
- * 			{
- * 				title: 'Right',
- * 				icon: arrowRight,
- * 				onClick: () => console.log( 'right' ),
- * 			},
- * 			{
- * 				title: 'Down',
- * 				icon: arrowDown,
- * 				onClick: () => console.log( 'down' ),
- * 			},
- * 			{
- * 				title: 'Left',
- * 				icon: arrowLeft,
- * 				onClick: () => console.log( 'left' ),
- * 			},
- * 		] }
- * 	/>
- * );
- * ```
- *
- * Alternatively, specify a `children` function which returns elements valid for
- * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
- *
- * ```jsx
- * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
- * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
- *
- * const MyDropdownMenu = () => (
- * 	<DropdownMenu icon={ more } label="Select a direction">
- * 		{ ( { onClose } ) => (
- * 			<>
- * 				<MenuGroup>
- * 					<MenuItem icon={ arrowUp } onClick={ onClose }>
- * 						Move Up
- * 					</MenuItem>
- * 					<MenuItem icon={ arrowDown } onClick={ onClose }>
- * 						Move Down
- * 					</MenuItem>
- * 				</MenuGroup>
- * 				<MenuGroup>
- * 					<MenuItem icon={ trash } onClick={ onClose }>
- * 						Remove
- * 					</MenuItem>
- * 				</MenuGroup>
- * 			</>
- * 		) }
- * 	</DropdownMenu>
- * );
- * ```
- *
- */
-
-function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
+function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 	const {
 		children,
 		className,
@@ -132,7 +56,13 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 		disableOpenOnArrowDown = false,
 		text,
 		noIcons,
-	} = dropdownMenuProps;
+
+		// Context
+		variant,
+	} = useContextSystem< DropdownMenuProps & DropdownMenuInternalContext >(
+		dropdownMenuProps,
+		'DropdownMenu'
+	);
 
 	if ( ! controls?.length && ! isFunction( children ) ) {
 		return null;
@@ -154,13 +84,14 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 	const mergedPopoverProps = mergeProps(
 		{
 			className: 'components-dropdown-menu__popover',
+			variant,
 		},
 		popoverProps
 	);
 
 	return (
 		<Dropdown
-			className={ classnames( 'components-dropdown-menu', className ) }
+			className={ className }
 			popoverProps={ mergedPopoverProps }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event: React.KeyboardEvent ) => {
@@ -284,4 +215,89 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 	);
 }
 
+/**
+ *
+ * The DropdownMenu displays a list of actions (each contained in a MenuItem,
+ * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
+ * after the user has interacted with an element (a button or icon) or when
+ * they perform a specific action.
+ *
+ * Render a Dropdown Menu with a set of controls:
+ *
+ * ```jsx
+ * import { DropdownMenu } from '@wordpress/components';
+ * import {
+ * 	more,
+ * 	arrowLeft,
+ * 	arrowRight,
+ * 	arrowUp,
+ * 	arrowDown,
+ * } from '@wordpress/icons';
+ *
+ * const MyDropdownMenu = () => (
+ * 	<DropdownMenu
+ * 		icon={ more }
+ * 		label="Select a direction"
+ * 		controls={ [
+ * 			{
+ * 				title: 'Up',
+ * 				icon: arrowUp,
+ * 				onClick: () => console.log( 'up' ),
+ * 			},
+ * 			{
+ * 				title: 'Right',
+ * 				icon: arrowRight,
+ * 				onClick: () => console.log( 'right' ),
+ * 			},
+ * 			{
+ * 				title: 'Down',
+ * 				icon: arrowDown,
+ * 				onClick: () => console.log( 'down' ),
+ * 			},
+ * 			{
+ * 				title: 'Left',
+ * 				icon: arrowLeft,
+ * 				onClick: () => console.log( 'left' ),
+ * 			},
+ * 		] }
+ * 	/>
+ * );
+ * ```
+ *
+ * Alternatively, specify a `children` function which returns elements valid for
+ * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
+ *
+ * ```jsx
+ * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+ * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
+ *
+ * const MyDropdownMenu = () => (
+ * 	<DropdownMenu icon={ more } label="Select a direction">
+ * 		{ ( { onClose } ) => (
+ * 			<>
+ * 				<MenuGroup>
+ * 					<MenuItem icon={ arrowUp } onClick={ onClose }>
+ * 						Move Up
+ * 					</MenuItem>
+ * 					<MenuItem icon={ arrowDown } onClick={ onClose }>
+ * 						Move Down
+ * 					</MenuItem>
+ * 				</MenuGroup>
+ * 				<MenuGroup>
+ * 					<MenuItem icon={ trash } onClick={ onClose }>
+ * 						Remove
+ * 					</MenuItem>
+ * 				</MenuGroup>
+ * 			</>
+ * 		) }
+ * 	</DropdownMenu>
+ * );
+ * ```
+ *
+ */
+export const DropdownMenu = contextConnectWithoutRef(
+	UnconnectedDropdownMenu,
+	'DropdownMenu'
+);
+
 export default DropdownMenu;

package/src/dropdown-menu/stories/index.tsx

@@ -5,7 +5,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '..';
+import { DropdownMenu } from '..';
 import MenuItem from '../../menu-item';
 import MenuGroup from '../../menu-group';
 

package/src/dropdown-menu/types.ts

@@ -141,3 +141,11 @@ export type DropdownMenuProps = {
 	 */
 	controls?: DropdownOption[] | DropdownOption[][];
 };
+
+export type DropdownMenuInternalContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};

package/src/dropdown-menu-v2/README.md

@@ -110,7 +110,7 @@ The distance in pixels from the trigger.
 The preferred alignment against the trigger. May change when collisions occur.
 
 - Required: no
-- Default: `"center"`
+- Default: `"start"`
 
 ##### `alignOffset`: `number`
 

package/src/dropdown-menu-v2/index.tsx

@@ -6,7 +6,12 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import {
+	forwardRef,
+	createContext,
+	useContext,
+	useMemo,
+} from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 import { check, chevronRightSmall, lineSolid } from '@wordpress/icons';
 import { SVG, Circle } from '@wordpress/primitives';
@@ -14,7 +19,10 @@ import { SVG, Circle } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
+import { useContextSystem, contextConnectWithoutRef } from '../ui/context';
+import { useSlot } from '../slot-fill';
 import Icon from '../icon';
+import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';
 import * as DropdownMenuStyled from './styles';
 import type {
 	DropdownMenuProps,
@@ -27,32 +35,56 @@ import type {
 	DropdownMenuRadioItemProps,
 	DropdownMenuSeparatorProps,
 	DropdownSubMenuTriggerProps,
+	DropdownMenuInternalContext,
+	DropdownMenuPrivateContext as DropdownMenuPrivateContextType,
 } from './types';
 
 // Menu content's side padding + 4px
-const SUB_MENU_OFFSET_SIDE = 12;
+const SUB_MENU_OFFSET_SIDE = 16;
 // Opposite amount of the top padding of the menu item
 const SUB_MENU_OFFSET_ALIGN = -8;
 
-/**
- * `DropdownMenu` displays a menu to the user (such as a set of actions
- * or functions) triggered by a button.
- */
-export const DropdownMenu = ( {
-	// Root props
-	defaultOpen,
-	open,
-	onOpenChange,
-	modal = true,
-	// Content positioning props
-	side = 'bottom',
-	sideOffset = 0,
-	align = 'center',
-	alignOffset = 0,
-	// Render props
-	children,
-	trigger,
-}: DropdownMenuProps ) => {
+const DropdownMenuPrivateContext =
+	createContext< DropdownMenuPrivateContextType >( {
+		variant: undefined,
+		portalContainer: null,
+	} );
+
+const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => {
+	const {
+		// Root props
+		defaultOpen,
+		open,
+		onOpenChange,
+		modal = true,
+		// Content positioning props
+		side = 'bottom',
+		sideOffset = 0,
+		align = 'center',
+		alignOffset = 0,
+		// Render props
+		children,
+		trigger,
+
+		// From internal components context
+		variant,
+	} = useContextSystem<
+		// Adding `className` to the context type to avoid a TS error
+		DropdownMenuProps & DropdownMenuInternalContext & { className?: string }
+	>( props, 'DropdownMenu' );
+
+	// Render the portal in the default slot used by the legacy Popover component.
+	const slot = useSlot( POPOVER_DEFAULT_SLOT_NAME );
+	const portalContainer = slot.ref?.current;
+
+	const privateContextValue = useMemo(
+		() => ( {
+			variant,
+			portalContainer,
+		} ),
+		[ variant, portalContainer ]
+	);
+
 	return (
 		<DropdownMenuPrimitive.Root
 			defaultOpen={ defaultOpen }
@@ -64,21 +96,35 @@ export const DropdownMenu = ( {
 			<DropdownMenuPrimitive.Trigger asChild>
 				{ trigger }
 			</DropdownMenuPrimitive.Trigger>
-			<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Portal container={ portalContainer }>
 				<DropdownMenuStyled.Content
 					side={ side }
 					align={ align }
 					sideOffset={ sideOffset }
 					alignOffset={ alignOffset }
 					loop={ true }
+					variant={ variant }
 				>
-					{ children }
+					<DropdownMenuPrivateContext.Provider
+						value={ privateContextValue }
+					>
+						{ children }
+					</DropdownMenuPrivateContext.Provider>
 				</DropdownMenuStyled.Content>
 			</DropdownMenuPrimitive.Portal>
 		</DropdownMenuPrimitive.Root>
 	);
 };
 
+/**
+ * `DropdownMenu` displays a menu to the user (such as a set of actions
+ * or functions) triggered by a button.
+ */
+export const DropdownMenu = contextConnectWithoutRef(
+	UnconnectedDropdownMenu,
+	'DropdownMenu'
+);
+
 export const DropdownSubMenuTrigger = ( {
 	prefix,
 	suffix = (
@@ -118,6 +164,10 @@ export const DropdownSubMenu = ( {
 	children,
 	trigger,
 }: DropdownSubMenuProps ) => {
+	const { variant, portalContainer } = useContext(
+		DropdownMenuPrivateContext
+	);
+
 	return (
 		<DropdownMenuPrimitive.Sub
 			defaultOpen={ defaultOpen }
@@ -130,11 +180,12 @@ export const DropdownSubMenu = ( {
 			>
 				{ trigger }
 			</DropdownMenuStyled.SubTrigger>
-			<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Portal container={ portalContainer }>
 				<DropdownMenuStyled.SubContent
 					loop
 					sideOffset={ SUB_MENU_OFFSET_SIDE }
 					alignOffset={ SUB_MENU_OFFSET_ALIGN }
+					variant={ variant }
 				>
 					{ children }
 				</DropdownMenuStyled.SubContent>
@@ -236,6 +287,7 @@ export const DropdownMenuRadioItem = ( {
 	);
 };
 
-export const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => (
-	<DropdownMenuStyled.Separator { ...props } />
-);
+export const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => {
+	const { variant } = useContext( DropdownMenuPrivateContext );
+	return <DropdownMenuStyled.Separator { ...props } variant={ variant } />;
+};