@wordpress/components 25.14.0 → 25.15.1-next.79a6196f.0

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

@@ -1,24 +1,46 @@
 /**
  * External dependencies
  */
-import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+import type { Placement } from '@floating-ui/react-dom';
 
-export type DropdownMenuProps = {
+export interface DropdownMenuContext {
+	/**
+	 * The ariakit store shared across all DropdownMenu subcomponents.
+	 */
+	store: Ariakit.MenuStore;
+	/**
+	 * The variant used by the underlying menu popover.
+	 */
+	variant?: 'toolbar';
+}
+
+export interface DropdownMenuProps {
+	/**
+	 * The trigger button.
+	 */
+	trigger: React.ReactElement;
+	/**
+	 * The contents of the dropdown.
+	 */
+	children?: React.ReactNode;
 	/**
 	 * The open state of the dropdown menu when it is initially rendered. Use when
-	 * you do not need to control its open state.
+	 * not wanting to control its open state.
 	 *
+	 * @default false
 	 */
-	defaultOpen?: DropdownMenuPrimitive.DropdownMenuProps[ 'defaultOpen' ];
+	defaultOpen?: boolean;
 	/**
 	 * The controlled open state of the dropdown menu. Must be used in conjunction
 	 * with `onOpenChange`.
 	 */
-	open?: DropdownMenuPrimitive.DropdownMenuProps[ 'open' ];
+	open?: boolean;
 	/**
 	 * Event handler called when the open state of the dropdown menu changes.
 	 */
-	onOpenChange?: DropdownMenuPrimitive.DropdownMenuProps[ 'onOpenChange' ];
+	onOpenChange?: ( open: boolean ) => void;
 	/**
 	 * The modality of the dropdown menu. When set to true, interaction with
 	 * outside elements will be disabled and only menu content will be visible to
@@ -26,240 +48,132 @@ export type DropdownMenuProps = {
 	 *
 	 * @default true
 	 */
-	modal?: DropdownMenuPrimitive.DropdownMenuProps[ 'modal' ];
+	modal?: boolean;
 	/**
-	 * The preferred side of the trigger to render against when open.
-	 * Will be reversed when collisions occur and avoidCollisions is enabled.
+	 * The placement of the dropdown menu popover.
 	 *
-	 * @default 'bottom'
+	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
 	 */
-	side?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'side' ];
+	placement?: Placement;
 	/**
-	 * The distance in pixels from the trigger.
+	 * The distance between the popover and the anchor element.
 	 *
-	 * @default 0
+	 * @default 8 for root-level menus, 16 for nested menus
 	 */
-	sideOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'sideOffset' ];
+	gutter?: number;
 	/**
-	 * The preferred alignment against the trigger.
-	 * May change when collisions occur.
+	 * The skidding of the popover along the anchor element. Can be set to
+	 * negative values to make the popover shift to the opposite side.
 	 *
-	 * @default 'start'
+	 * @default 0 for root-level menus, -8 for nested menus
 	 */
-	align?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'align' ];
+	shift?: number;
 	/**
-	 * An offset in pixels from the "start" or "end" alignment options.
+	 * Determines whether the menu popover will be hidden when the user presses
+	 * the Escape key.
 	 *
-	 * @default 0
-	 */
-	alignOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'alignOffset' ];
-	/**
-	 * The trigger button.
-	 */
-	trigger: React.ReactNode;
+	 * @default `( event ) => { event.preventDefault(); return true; }`
+	 */
+	hideOnEscape?:
+		| boolean
+		| ( (
+				event: KeyboardEvent | React.KeyboardEvent< Element >
+		  ) => boolean );
+}
+
+export interface DropdownMenuGroupProps {
 	/**
-	 * The contents of the dropdown
+	 * The contents of the dropdown menu group.
 	 */
 	children: React.ReactNode;
-};
+}
 
-export type DropdownSubMenuTriggerProps = {
+export interface DropdownMenuItemProps {
 	/**
-	 * The contents of the item.
+	 * The contents of the menu item.
 	 */
 	children: React.ReactNode;
 	/**
-	 * The contents of the item's prefix.
+	 * The contents of the menu item's prefix.
 	 */
 	prefix?: React.ReactNode;
 	/**
-	 * The contents of the item's suffix.
-	 *
-	 * @default The standard chevron icon for a submenu trigger.
+	 * The contents of the menu item's suffix.
 	 */
 	suffix?: React.ReactNode;
-};
-
-export type DropdownSubMenuProps = {
 	/**
-	 * The open state of the submenu when it is initially rendered. Use when you
-	 * do not need to control its open state.
-	 */
-	defaultOpen?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'defaultOpen' ];
-	/**
-	 * The controlled open state of the submenu. Must be used in conjunction with
-	 * `onOpenChange`.
-	 */
-	open?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'open' ];
-	/**
-	 * Event handler called when the open state of the submenu changes.
-	 */
-	onOpenChange?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'onOpenChange' ];
-	/**
-	 * When `true`, prevents the user from interacting with the item.
-	 */
-	disabled?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'disabled' ];
-	/**
-	 * Optional text used for typeahead purposes for the trigger. By default the typeahead
-	 * behavior will use the `.textContent` of the trigger. Use this when the content
-	 * is complex, or you have non-textual content inside.
-	 */
-	textValue?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'textValue' ];
-	/**
-	 * The contents rendered inside the trigger. The trigger should be
-	 * an instance of the `DropdownSubMenuTriggerProps` component.
+	 * Whether to hide the parent menu when the item is clicked.
+	 *
+	 * @default true
 	 */
-	trigger: React.ReactNode;
+	hideOnClick?: boolean;
 	/**
-	 * The contents of the dropdown sub menu
+	 * Determines if the element is disabled.
 	 */
-	children: React.ReactNode;
-};
+	disabled?: boolean;
+}
 
-export type DropdownMenuItemProps = {
+export interface DropdownMenuCheckboxItemProps
+	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * When true, prevents the user from interacting with the item.
+	 * Whether to hide the dropdown menu when the item is clicked.
 	 *
 	 * @default false
 	 */
-	disabled?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'disabled' ];
+	hideOnClick?: boolean;
 	/**
-	 * Event handler called when the user selects an item (via mouse or keyboard).
-	 * Calling `event.preventDefault` in this handler will prevent the dropdown
-	 * menu from closing when selecting that item.
+	 * The checkbox menu item's name.
 	 */
-	onSelect?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'onSelect' ];
+	name: string;
 	/**
-	 * Optional text used for typeahead purposes. By default the typeahead
-	 * behavior will use the `.textContent` of the item. Use this when the content
-	 * is complex, or you have non-textual content inside.
+	 * The checkbox item's value, useful when using multiple checkbox menu items
+	 * associated to the same `name`.
 	 */
-	textValue?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'textValue' ];
+	value?: string;
 	/**
-	 * The contents of the item
+	 * The controlled checked state of the checkbox menu item.
 	 */
-	children: React.ReactNode;
+	checked?: boolean;
 	/**
-	 * The contents of the item's prefix
+	 * The checked state of the checkbox menu item when it is initially rendered.
+	 * Use when not wanting to control its checked state.
 	 */
-	prefix?: React.ReactNode;
+	defaultChecked?: boolean;
 	/**
-	 * The contents of the item's suffix
+	 * Event handler called when the checked state of the checkbox menu item changes.
 	 */
-	suffix?: React.ReactNode;
-};
+	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
 
-export type DropdownMenuCheckboxItemProps = {
+export interface DropdownMenuRadioItemProps
+	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * The controlled checked state of the item.
-	 * Must be used in conjunction with `onCheckedChange`.
+	 * Whether to hide the dropdown menu when the item is clicked.
 	 *
 	 * @default false
 	 */
-	checked?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'checked' ];
-	/**
-	 * Event handler called when the checked state changes.
-	 */
-	onCheckedChange?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onCheckedChange' ];
+	hideOnClick?: boolean;
 	/**
-	 * When `true`, prevents the user from interacting with the item.
+	 * The radio item's name.
 	 */
-	disabled?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'disabled' ];
+	name: string;
 	/**
-	 * Event handler called when the user selects an item (via mouse or keyboard).
-	 * Calling `event.preventDefault` in this handler will prevent the dropdown
-	 * 	menu from closing when selecting that item.
+	 * The radio item's value.
 	 */
-	onSelect?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onSelect' ];
+	value: string | number;
 	/**
-	 * Optional text used for typeahead purposes. By default the typeahead
-	 * behavior will use the `.textContent` of the item. Use this when the content
-	 * is complex, or you have non-textual content inside.
+	 * The controlled checked state of the radio menu item.
 	 */
-	textValue?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'textValue' ];
+	checked?: boolean;
 	/**
-	 * The contents of the checkbox item
+	 * The checked state of the radio menu item when it is initially rendered.
+	 * Use when not wanting to control its checked state.
 	 */
-	children: React.ReactNode;
+	defaultChecked?: boolean;
 	/**
-	 * The contents of the checkbox item's suffix
+	 * Event handler called when the checked radio menu item changes.
 	 */
-	suffix?: React.ReactNode;
-};
-
-export type DropdownMenuRadioGroupProps = {
-	/**
-	 * The value of the selected item in the group.
-	 */
-	value?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'value' ];
-	/**
-	 * Event handler called when the value changes.
-	 */
-	onValueChange?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'onValueChange' ];
-	/**
-	 * The contents of the radio group
-	 */
-	children: React.ReactNode;
-};
-
-export type DropdownMenuRadioItemProps = {
-	/**
-	 * The unique value of the item.
-	 */
-	value: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'value' ];
-	/**
-	 * When `true`, prevents the user from interacting with the item.
-	 */
-	disabled?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'disabled' ];
-	/**
-	 * Event handler called when the user selects an item (via mouse or keyboard).
-	 * Calling `event.preventDefault` in this handler will prevent the dropdown
-	 * menu from closing when selecting that item.
-	 */
-	onSelect?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'onSelect' ];
-	/**
-	 * Optional text used for typeahead purposes. By default the typeahead
-	 * behavior will use the `.textContent` of the item. Use this when the content
-	 * is complex, or you have non-textual content inside.
-	 */
-	textValue?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'textValue' ];
-	/**
-	 * The contents of the radio item
-	 */
-	children: React.ReactNode;
-	/**
-	 * The contents of the radio item's suffix
-	 */
-	suffix?: React.ReactNode;
-};
-
-export type DropdownMenuLabelProps = {
-	/**
-	 * The contents of the label
-	 */
-	children: React.ReactNode;
-};
-
-export type DropdownMenuGroupProps = {
-	/**
-	 * The contents of the group
-	 */
-	children: React.ReactNode;
-};
-
-export type DropdownMenuSeparatorProps = {};
-
-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';
-};
+	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
 
-export type DropdownMenuPrivateContext = Pick<
-	DropdownMenuInternalContext,
-	'variant'
-> & {
-	portalContainer?: HTMLElement | null;
-};
+export interface DropdownMenuSeparatorProps {}

package/src/duotone-picker/duotone-picker.tsx

@@ -91,7 +91,7 @@ function DuotonePicker( {
 		/>
 	);
 
-	const options = duotonePalette.map( ( { colors, slug, name } ) => {
+	const duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {
 		const style = {
 			background: getGradientFromCSSColors( colors, '135deg' ),
 			color: 'transparent',
@@ -155,11 +155,15 @@ function DuotonePicker( {
 		}
 	}
 
+	const options = unsetable
+		? [ unsetOption, ...duotoneOptions ]
+		: duotoneOptions;
+
 	return (
 		<CircularOptionPicker
 			{ ...otherProps }
 			{ ...metaProps }
-			options={ unsetable ? [ unsetOption, ...options ] : options }
+			options={ options }
 			actions={
 				!! clearable && (
 					<CircularOptionPicker.ButtonAction
@@ -170,7 +174,7 @@ function DuotonePicker( {
 				)
 			}
 		>
-			<Spacer paddingTop={ 4 }>
+			<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>
 				<VStack spacing={ 3 }>
 					{ ! disableCustomColors && ! disableCustomDuotone && (
 						<CustomDuotoneBar

package/src/font-size-picker/index.native.js

@@ -11,11 +11,11 @@ import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { BottomSheet } from '@wordpress/components';
-import { getPxFromCssUnit } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import styles from './style.scss';
 
@@ -62,6 +62,12 @@ function FontSizePicker( {
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
 
+	const accessibilityLabel = sprintf(
+		// translators: %1$s: Font size name e.g. Small
+		__( 'Font Size, %1$s' ),
+		selectedOption.name
+	);
+
 	return (
 		<BottomSheet.SubSheet
 			navigationButton={
@@ -80,7 +86,7 @@ function FontSizePicker( {
 					}
 					onPress={ openSubSheet }
 					accessibilityRole={ 'button' }
-					accessibilityLabel={ selectedOption.name }
+					accessibilityLabel={ accessibilityLabel }
 					accessibilityHint={ sprintf(
 						// translators: %s: Select control button label e.g. Small
 						__( 'Navigates to select %s' ),

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

@@ -123,6 +123,7 @@ const UnforwardedFontSizePicker = (
 	);
 	const isValueUnitRelative =
 		!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );
+	const isDisabled = value === undefined;
 
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
@@ -153,7 +154,7 @@ const UnforwardedFontSizePicker = (
 								);
 							} }
 							isPressed={ showCustomValueControl }
-							isSmall
+							size="small"
 						/>
 					) }
 				</Header>
@@ -276,7 +277,8 @@ const UnforwardedFontSizePicker = (
 						{ withReset && (
 							<FlexItem>
 								<Button
-									disabled={ value === undefined }
+									disabled={ isDisabled }
+									__experimentalIsFocusable
 									onClick={ () => {
 										onChange?.( undefined );
 									} }

package/src/form-toggle/README.md

@@ -4,12 +4,6 @@ FormToggle switches a single setting on or off.
 
 ![On and off FormToggles. The top toggle is on, while the bottom toggle is off.](https://wordpress.org/gutenberg/files/2019/01/Toggle.jpg)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/form-token-field/index.tsx

@@ -177,13 +177,17 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			setInputOffsetFromEnd( 0 );
 			setIsActive( false );
 
-			// If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
-			// the user clicks on it (`tokensAndInput` will be the element that caused the blur).
-			const shouldKeepSuggestionsExpanded =
-				! __experimentalExpandOnFocus ||
-				( __experimentalExpandOnFocus &&
-					event.relatedTarget === tokensAndInput.current );
-			setIsExpanded( shouldKeepSuggestionsExpanded );
+			if ( __experimentalExpandOnFocus ) {
+				// If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
+				// the user clicks on it (`tokensAndInput` will be the element that caused the blur).
+				const hasFocusWithin =
+					event.relatedTarget === tokensAndInput.current;
+				setIsExpanded( hasFocusWithin );
+			} else {
+				// Else collapse the suggestion list. This will result in the suggestion list closing
+				// after a suggestion has been submitted since that causes a blur.
+				setIsExpanded( false );
+			}
 
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );

package/src/form-token-field/test/index.tsx

@@ -741,6 +741,103 @@ describe( 'FormTokenField', () => {
 			] );
 		} );
 
+		it( 'should render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+						__experimentalExpandOnFocus
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeVisible();
+		} );
+
+		it( 'should not render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `false` or not defined', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should not render suggestions after the input is blurred', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			// Click the body, blurring the input.
+			await user.click( document.body );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
 		it( 'should not render suggestions if the text input is not matching any of the suggestions', async () => {
 			const user = userEvent.setup();
 

package/src/form-token-field/token.tsx

@@ -74,6 +74,7 @@ export default function Token( {
 				className="components-form-token-field__remove-token"
 				icon={ closeSmall }
 				onClick={ ! disabled ? onClick : undefined }
+				disabled={ disabled }
 				label={ messages.remove }
 				aria-describedby={ `components-form-token-field__token-text-${ instanceId }` }
 			/>

package/src/gradient-picker/index.tsx

@@ -44,9 +44,9 @@ function SingleOrigin( {
 	...additionalProps
 }: PickerProps< GradientObject > ) {
 	const gradientOptions = useMemo( () => {
-		return gradients.map( ( { gradient, name }, index ) => (
+		return gradients.map( ( { gradient, name, slug }, index ) => (
 			<CircularOptionPicker.Option
-				key={ gradient }
+				key={ slug }
 				value={ gradient }
 				isSelected={ value === gradient }
 				tooltipText={

package/src/index.native.js

@@ -107,7 +107,8 @@ export { default as LinkSettings } from './mobile/link-settings';
 export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
 export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
 export { default as SegmentedControl } from './mobile/segmented-control';
-export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
+export { default as Image } from './mobile/image';
+export { IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image/constants';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
 export { default as AudioPlayer } from './mobile/audio-player';
@@ -121,6 +122,7 @@ export {
 	ALIGNMENT_BREAKPOINTS,
 	alignmentHelpers,
 } from './mobile/utils/alignments';
+export { default as getPxFromCssUnit } from './mobile/utils/get-px-from-css-unit';
 
 // Hooks.
 export {
@@ -141,3 +143,6 @@ export {
 	useMobileGlobalStylesColors,
 	useEditorColorScheme,
 } from './mobile/global-styles-context/utils';
+
+// Private APIs.
+export { privateApis } from './private-apis';