@wordpress/components 25.1.0 → 25.1.2

package/src/confirm-dialog/component.tsx

@@ -7,7 +7,7 @@ import type { ForwardedRef, KeyboardEvent } from 'react';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -42,6 +42,8 @@ function ConfirmDialog(
 
 	const cx = useCx();
 	const wrapperClassName = cx( styles.wrapper );
+	const cancelButtonRef = useRef();
+	const confirmButtonRef = useRef();
 
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
@@ -69,7 +71,13 @@ function ConfirmDialog(
 
 	const handleEnter = useCallback(
 		( event: KeyboardEvent< HTMLDivElement > ) => {
-			if ( event.key === 'Enter' ) {
+			// Avoid triggering the 'confirm' action when a button is focused,
+			// as this can cause a double submission.
+			const isConfirmOrCancelButton =
+				event.target === cancelButtonRef.current ||
+				event.target === confirmButtonRef.current;
+
+			if ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {
 				handleEvent( onConfirm )( event );
 			}
 		},
@@ -96,12 +104,14 @@ function ConfirmDialog(
 						<Text>{ children }</Text>
 						<Flex direction="row" justify="flex-end">
 							<Button
+								ref={ cancelButtonRef }
 								variant="tertiary"
 								onClick={ handleEvent( onCancel ) }
 							>
 								{ cancelLabel }
 							</Button>
 							<Button
+								ref={ confirmButtonRef }
 								variant="primary"
 								onClick={ handleEvent( onConfirm ) }
 							>

package/src/confirm-dialog/stories/index.js

@@ -7,7 +7,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import { Heading } from '../../heading';
 import { ConfirmDialog } from '..';
 
 const meta = {
@@ -26,12 +25,8 @@ const meta = {
 		isOpen: {
 			control: { type: null },
 		},
-		onConfirm: {
-			control: { type: null },
-		},
-		onCancel: {
-			control: { type: null },
-		},
+		onConfirm: { action: 'onConfirm' },
+		onCancel: { action: 'onCancel' },
 	},
 	args: {
 		children: 'Would you like to privately publish the post now?',
@@ -43,19 +38,19 @@ const meta = {
 
 export default meta;
 
-const Template = ( args ) => {
+const Template = ( { onConfirm, onCancel, ...args } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
-	const [ confirmVal, setConfirmVal ] = useState( '' );
 
-	const handleConfirm = () => {
-		setConfirmVal( 'Confirmed!' );
+	const handleConfirm = ( ...confirmArgs ) => {
+		onConfirm( ...confirmArgs );
 		setIsOpen( false );
 	};
 
-	const handleCancel = () => {
-		setConfirmVal( 'Cancelled' );
+	const handleCancel = ( ...cancelArgs ) => {
+		onCancel( ...cancelArgs );
 		setIsOpen( false );
 	};
+
 	return (
 		<>
 			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
@@ -70,8 +65,6 @@ const Template = ( args ) => {
 			>
 				{ args.children }
 			</ConfirmDialog>
-
-			<Heading level={ 1 }>{ confirmVal }</Heading>
 		</>
 	);
 };

package/src/confirm-dialog/test/index.js

@@ -194,6 +194,48 @@ describe( 'Confirm', () => {
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onConfirm ).toHaveBeenCalled();
 			} );
+
+			it( 'calls only the `onCancel` callback and not the `onConfirm` callback when the cancel button is submitted using the keyboard', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog
+						onConfirm={ onConfirm }
+						onCancel={ onCancel }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				await user.keyboard( '[Tab][Enter]' );
+
+				expect( onConfirm ).not.toHaveBeenCalled();
+				expect( onCancel ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			it( 'calls only the `onConfirm` callback when the confirm button is submitted using the keyboard', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog
+						onConfirm={ onConfirm }
+						onCancel={ onCancel }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				await user.keyboard( '[Tab][Tab][Enter]' );
+
+				expect( onConfirm ).toHaveBeenCalledTimes( 1 );
+				expect( onCancel ).not.toHaveBeenCalled();
+			} );
 		} );
 	} );
 

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/index.tsx

@@ -35,7 +35,7 @@ import type {
 	DropdownMenuRadioItemProps,
 	DropdownMenuSeparatorProps,
 	DropdownSubMenuTriggerProps,
-	DropdownMenuContext,
+	DropdownMenuInternalContext,
 	DropdownMenuPrivateContext as DropdownMenuPrivateContextType,
 } from './types';
 
@@ -70,7 +70,7 @@ const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => {
 		variant,
 	} = useContextSystem<
 		// Adding `className` to the context type to avoid a TS error
-		DropdownMenuProps & DropdownMenuContext & { className?: string }
+		DropdownMenuProps & DropdownMenuInternalContext & { className?: string }
 	>( props, 'DropdownMenu' );
 
 	// Render the portal in the default slot used by the legacy Popover component.

package/src/dropdown-menu-v2/styles.ts

@@ -11,7 +11,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 import Icon from '../icon';
-import type { DropdownMenuContext } from './types';
+import type { DropdownMenuInternalContext } from './types';
 
 const ANIMATION_PARAMS = {
 	SLIDE_AMOUNT: '2px',
@@ -62,7 +62,9 @@ const slideLeftAndFade = keyframes( {
 	'100%': { opacity: 1, transform: 'translateX(0)' },
 } );
 
-const baseContent = ( variant: DropdownMenuContext[ 'variant' ] ) => css`
+const baseContent = (
+	variant: DropdownMenuInternalContext[ 'variant' ]
+) => css`
 	min-width: 220px;
 	background-color: ${ COLORS.ui.background };
 	border-radius: ${ CONFIG.radiusBlockUi };
@@ -200,12 +202,12 @@ const baseItem = css`
 `;
 
 export const Content = styled( DropdownMenu.Content )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	${ ( props ) => baseContent( props.variant ) }
 `;
 export const SubContent = styled( DropdownMenu.SubContent )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	${ ( props ) => baseContent( props.variant ) }
 `;
@@ -246,7 +248,7 @@ export const Label = styled( DropdownMenu.Label )`
 `;
 
 export const Separator = styled( DropdownMenu.Separator )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	height: ${ CONFIG.borderWidth };
 	/* TODO: doesn't match border color from variables */

package/src/dropdown-menu-v2/types.ts

@@ -249,7 +249,7 @@ export type DropdownMenuGroupProps = {
 
 export type DropdownMenuSeparatorProps = {};
 
-export type DropdownMenuContext = {
+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.
@@ -258,7 +258,7 @@ export type DropdownMenuContext = {
 };
 
 export type DropdownMenuPrivateContext = Pick<
-	DropdownMenuContext,
+	DropdownMenuInternalContext,
 	'variant'
 > & {
 	portalContainer: HTMLElement | null;

package/src/font-size-picker/index.tsx

@@ -14,6 +14,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { Button } from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import {
@@ -31,7 +32,6 @@ import {
 	HeaderLabel,
 	HeaderToggle,
 	Controls,
-	ResetButton,
 } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
@@ -268,17 +268,21 @@ const UnforwardedFontSizePicker = (
 						) }
 						{ withReset && (
 							<FlexItem>
-								<ResetButton
+								<Button
 									disabled={ value === undefined }
 									onClick={ () => {
 										onChange?.( undefined );
 									} }
-									isSmall
 									variant="secondary"
-									size={ size }
+									__next40pxDefaultSize
+									size={
+										size !== '__unstable-large'
+											? 'small'
+											: 'default'
+									}
 								>
 									{ __( 'Reset' ) }
-								</ResetButton>
+								</Button>
 							</FlexItem>
 						) }
 					</Flex>

package/src/font-size-picker/styles.ts

@@ -11,7 +11,6 @@ import Button from '../button';
 import { HStack } from '../h-stack';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils';
-import type { FontSizePickerProps } from './types';
 
 export const Container = styled.fieldset`
 	border: 0;
@@ -44,12 +43,3 @@ export const Controls = styled.div< {
 	${ ( props ) =>
 		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
 `;
-
-export const ResetButton = styled( Button )< {
-	size: FontSizePickerProps[ 'size' ];
-} >`
-	&&& {
-		height: ${ ( props ) =>
-			props.size === '__unstable-large' ? '40px' : '30px' };
-	}
-`;

package/src/item-group/styles.ts

@@ -15,15 +15,23 @@ export const unstyledButton = css`
 	background: none;
 	text-align: start;
 
+	svg,
+	path {
+		fill: currentColor;
+	}
+
 	&:hover {
 		color: ${ COLORS.ui.theme };
 	}
 
-	&:focus {
-		background-color: transparent;
-		color: ${ COLORS.ui.theme };
-		border-color: ${ COLORS.ui.theme };
-		outline: 3px solid transparent;
+	&:focus-visible {
+		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+			var(
+				--wp-components-color-accent,
+				var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
+			);
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
 	}
 `;