@wordpress/components 25.13.0 → 25.14.0

package/src/custom-select-control/test/index.js

@@ -4,54 +4,205 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import CustomSelectControl from '..';
 
-describe( 'CustomSelectControl', () => {
-	it( 'Captures the keypress event and does not let it propagate', async () => {
-		const user = userEvent.setup();
-		const onKeyDown = jest.fn();
-		const options = [
-			{
-				key: 'one',
-				name: 'Option one',
-			},
-			{
-				key: 'two',
-				name: 'Option two',
-			},
-			{
-				key: 'three',
-				name: 'Option three',
+const customClass = 'amber-skies';
+
+const props = {
+	label: 'label!',
+	options: [
+		{
+			key: 'flower1',
+			name: 'violets',
+		},
+		{
+			key: 'flower2',
+			name: 'crimson clover',
+			className: customClass,
+		},
+		{
+			key: 'flower3',
+			name: 'poppy',
+		},
+		{
+			key: 'color1',
+			name: 'amber',
+			className: customClass,
+		},
+		{
+			key: 'color2',
+			name: 'aquamarine',
+			style: {
+				backgroundColor: 'rgb(127, 255, 212)',
+				rotate: '13deg',
 			},
-		];
+		},
+	],
+	__nextUnconstrainedWidth: true,
+};
 
-		render(
-			<div
-				// This role="none" is required to prevent an eslint warning about accessibility.
-				role="none"
-				onKeyDown={ onKeyDown }
-			>
-				<CustomSelectControl
-					options={ options }
-					__nextUnconstrainedWidth
-				/>
-			</div>
+const ControlledCustomSelectControl = ( { options } ) => {
+	const [ value, setValue ] = useState( options[ 0 ] );
+	return (
+		<CustomSelectControl
+			{ ...props }
+			onChange={ ( { selectedItem } ) => setValue( selectedItem ) }
+			value={ options.find( ( option ) => option.key === value.key ) }
+		/>
+	);
+};
+
+describe.each( [
+	[ 'uncontrolled', CustomSelectControl ],
+	[ 'controlled', ControlledCustomSelectControl ],
+] )( 'CustomSelectControl %s', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	it( 'Should replace the initial selection when a new item is selected', async () => {
+		const user = userEvent.setup();
+
+		render( <Component { ...props } /> );
+
+		const currentSelectedItem = screen.getByRole( 'button', {
+			expanded: false,
+		} );
+
+		await user.click( currentSelectedItem );
+
+		await user.click(
+			screen.getByRole( 'option', {
+				name: 'crimson clover',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+
+		await user.click( currentSelectedItem );
+
+		await user.click(
+			screen.getByRole( 'option', {
+				name: 'poppy',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'poppy' );
+	} );
+
+	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
+		const user = userEvent.setup();
+
+		render( <CustomSelectControl { ...props } /> );
+
+		const currentSelectedItem = screen.getByRole( 'button', {
+			expanded: false,
+		} );
+
+		await user.tab();
+		await user.keyboard( '{enter}' );
+		expect(
+			screen.getByRole( 'listbox', {
+				name: 'label!',
+			} )
+		).toBeVisible();
+
+		await user.keyboard( '{escape}' );
+		expect(
+			screen.queryByRole( 'listbox', {
+				name: 'label!',
+			} )
+		).not.toBeInTheDocument();
+
+		expect( currentSelectedItem ).toHaveTextContent(
+			props.options[ 0 ].name
+		);
+	} );
+
+	it( 'Should apply class only to options that have a className defined', async () => {
+		const user = userEvent.setup();
+
+		render( <CustomSelectControl { ...props } /> );
+
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		);
+
+		// return an array of items _with_ a className added
+		const itemsWithClass = props.options.filter(
+			( option ) => option.className !== undefined
+		);
+
+		// assert against filtered array
+		itemsWithClass.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).toHaveClass(
+				customClass
+			)
+		);
+
+		// return an array of items _without_ a className added
+		const itemsWithoutClass = props.options.filter(
+			( option ) => option.className === undefined
+		);
+
+		// assert against filtered array
+		itemsWithoutClass.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).not.toHaveClass(
+				customClass
+			)
+		);
+	} );
+
+	it( 'Should apply styles only to options that have styles defined', async () => {
+		const user = userEvent.setup();
+		const customStyles =
+			'background-color: rgb(127, 255, 212); rotate: 13deg;';
+
+		render( <CustomSelectControl { ...props } /> );
+
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		);
+
+		// return an array of items _with_ styles added
+		const styledItems = props.options.filter(
+			( option ) => option.style !== undefined
 		);
-		const toggleButton = screen.getByRole( 'button' );
-		await user.click( toggleButton );
 
-		const customSelect = screen.getByRole( 'listbox' );
-		await user.type( customSelect, '{enter}' );
+		// assert against filtered array
+		styledItems.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).toHaveStyle(
+				customStyles
+			)
+		);
+
+		// return an array of items _without_ styles added
+		const unstyledItems = props.options.filter(
+			( option ) => option.style === undefined
+		);
 
-		expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
+		// assert against filtered array
+		unstyledItems.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).not.toHaveStyle(
+				customStyles
+			)
+		);
 	} );
 
 	it( 'does not show selected hint by default', () => {
 		render(
 			<CustomSelectControl
+				{ ...props }
 				label="Custom select"
 				options={ [
 					{
@@ -60,7 +211,6 @@ describe( 'CustomSelectControl', () => {
 						__experimentalHint: 'Hint',
 					},
 				] }
-				__nextUnconstrainedWidth
 			/>
 		);
 		expect(
@@ -71,6 +221,7 @@ describe( 'CustomSelectControl', () => {
 	it( 'shows selected hint when __experimentalShowSelectedHint is set', () => {
 		render(
 			<CustomSelectControl
+				{ ...props }
 				label="Custom select"
 				options={ [
 					{
@@ -80,11 +231,192 @@ describe( 'CustomSelectControl', () => {
 					},
 				] }
 				__experimentalShowSelectedHint
-				__nextUnconstrainedWidth
 			/>
 		);
 		expect(
 			screen.getByRole( 'button', { name: 'Custom select' } )
 		).toHaveTextContent( 'Hint' );
 	} );
+
+	describe( 'Keyboard behavior and accessibility', () => {
+		it( 'Captures the keypress event and does not let it propagate', async () => {
+			const user = userEvent.setup();
+			const onKeyDown = jest.fn();
+
+			render(
+				<div
+					// This role="none" is required to prevent an eslint warning about accessibility.
+					role="none"
+					onKeyDown={ onKeyDown }
+				>
+					<CustomSelectControl { ...props } />
+				</div>
+			);
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+			await user.click( currentSelectedItem );
+
+			const customSelect = screen.getByRole( 'listbox', {
+				name: 'label!',
+			} );
+			await user.type( customSelect, '{enter}' );
+
+			expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
+		} );
+
+		it( 'Should be able to change selection using keyboard', async () => {
+			const user = userEvent.setup();
+
+			render( <CustomSelectControl { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+			expect( currentSelectedItem ).toHaveFocus();
+
+			await user.keyboard( '{enter}' );
+			expect(
+				screen.getByRole( 'listbox', {
+					name: 'label!',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{arrowdown}' );
+			await user.keyboard( '{enter}' );
+
+			expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+		} );
+
+		it( 'Should be able to type characters to select matching options', async () => {
+			const user = userEvent.setup();
+
+			render( <CustomSelectControl { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+			await user.keyboard( '{enter}' );
+			expect(
+				screen.getByRole( 'listbox', {
+					name: 'label!',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{a}' );
+			await user.keyboard( '{enter}' );
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
+		} );
+
+		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
+			const user = userEvent.setup();
+
+			render( <CustomSelectControl { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+			expect( currentSelectedItem ).toHaveFocus();
+
+			await user.keyboard( '{a}' );
+			await user.keyboard( '{q}' );
+
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: 'label!',
+					hidden: true,
+				} )
+			).not.toBeInTheDocument();
+
+			await user.keyboard( '{enter}' );
+			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
+		} );
+
+		it( 'Should have correct aria-selected value for selections', async () => {
+			const user = userEvent.setup();
+
+			render( <CustomSelectControl { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.click( currentSelectedItem );
+
+			// get all items except for first option
+			const unselectedItems = props.options.filter(
+				( { name } ) => name !== props.options[ 0 ].name
+			);
+
+			// assert that all other items have aria-selected="false"
+			unselectedItems.map( ( { name } ) =>
+				expect(
+					screen.getByRole( 'option', { name, selected: false } )
+				).toBeVisible()
+			);
+
+			// assert that first item has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: props.options[ 0 ].name,
+					selected: true,
+				} )
+			).toBeVisible();
+
+			// change the current selection
+			await user.click( screen.getByRole( 'option', { name: 'poppy' } ) );
+
+			// click button to mount listbox with options again
+			await user.click( currentSelectedItem );
+
+			// check that first item is has aria-selected="false" after new selection
+			expect(
+				screen.getByRole( 'option', {
+					name: props.options[ 0 ].name,
+					selected: false,
+				} )
+			).toBeVisible();
+
+			// check that new selected item now has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: 'poppy',
+					selected: true,
+				} )
+			).toBeVisible();
+		} );
+
+		it( 'Should call custom event handlers', async () => {
+			const user = userEvent.setup();
+			const onFocusMock = jest.fn();
+			const onBlurMock = jest.fn();
+
+			render(
+				<CustomSelectControl
+					{ ...props }
+					onFocus={ onFocusMock }
+					onBlur={ onBlurMock }
+				/>
+			);
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( onFocusMock ).toHaveBeenCalledTimes( 1 );
+
+			await user.tab();
+			expect( currentSelectedItem ).not.toHaveFocus();
+			expect( onBlurMock ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
 } );

package/src/date-time/time/timezone.tsx

@@ -32,12 +32,24 @@ const TimeZone = () => {
 			? timezone.abbr
 			: `UTC${ offsetSymbol }${ timezone.offset }`;
 
+	// Replace underscore with space in strings like `America/Costa_Rica`.
+	const prettyTimezoneString = timezone.string.replace( '_', ' ' );
+
 	const timezoneDetail =
 		'UTC' === timezone.string
 			? __( 'Coordinated Universal Time' )
-			: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;
-
-	return (
+			: `(${ zoneAbbr }) ${ prettyTimezoneString }`;
+
+	// When the prettyTimezoneString is empty, there is no additional timezone
+	// detail information to show in a Tooltip.
+	const hasNoAdditionalTimezoneDetail =
+		prettyTimezoneString.trim().length === 0;
+
+	return hasNoAdditionalTimezoneDetail ? (
+		<StyledComponent className="components-datetime__timezone">
+			{ zoneAbbr }
+		</StyledComponent>
+	) : (
 		<Tooltip placement="top" text={ timezoneDetail }>
 			<StyledComponent className="components-datetime__timezone">
 				{ zoneAbbr }

package/src/dimension-control/index.tsx

@@ -42,6 +42,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  */
 export function DimensionControl( props: DimensionControlProps ) {
 	const {
+		__next40pxDefaultSize = false,
 		label,
 		value,
 		sizes = sizesTable,
@@ -85,6 +86,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 
 	return (
 		<SelectControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			className={ classnames(
 				className,
 				'block-editor-dimension-control'

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -764,7 +764,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
+                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
               />
             </svg>
             Margin
@@ -1057,7 +1057,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
+                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
               />
             </svg>
             Margin

package/src/dimension-control/types.ts

@@ -45,4 +45,10 @@ export type DimensionControlProps = {
 	 * @default ''
 	 */
 	className?: string;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };

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

@@ -212,6 +212,18 @@ export const ItemPrefixWrapper = styled.span`
 	/* Always occupy the first column, even when auto-collapsing */
 	grid-column: 1;
 
+	/*
+	 * Even when the item is not checked, occupy the same screen space to avoid
+	 * the space collapside when no items are checked.
+	 */
+	${ DropdownMenuCheckboxItem } > &,
+	${ DropdownMenuRadioItem } > & {
+		/* Same width as the check icons */
+		min-width: ${ space( 6 ) };
+	}
+
+	${ DropdownMenuCheckboxItem } > &,
+	${ DropdownMenuRadioItem } > &,
 	&:not( :empty ) {
 		margin-inline-end: ${ space( 2 ) };
 	}

package/src/focal-point-picker/controls.tsx

@@ -23,6 +23,7 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	__nextHasNoMarginBottom,
+	__next40pxDefaultSize,
 	hasHelpText,
 	onChange = noop,
 	point = {
@@ -51,8 +52,10 @@ export default function FocalPointPickerControls( {
 			className="focal-point-picker__controls"
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			hasHelpText={ hasHelpText }
+			gap={ 4 }
 		>
 			<FocalPointUnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Left' ) }
 				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
@@ -66,6 +69,7 @@ export default function FocalPointPickerControls( {
 				dragDirection="e"
 			/>
 			<FocalPointUnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Top' ) }
 				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }

package/src/focal-point-picker/index.tsx

@@ -84,6 +84,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  */
 export function FocalPointPicker( {
 	__nextHasNoMarginBottom,
+	__next40pxDefaultSize = false,
 	autoPlay = true,
 	className,
 	help,
@@ -273,6 +274,7 @@ export function FocalPointPicker( {
 			</MediaWrapper>
 			<Controls
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				hasHelpText={ !! help }
 				point={ { x, y } }
 				onChange={ ( value ) => {

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -53,7 +53,7 @@ export const MediaPlaceholder = styled.div`
 `;
 
 export const StyledUnitControl = styled( UnitControl )`
-	width: 100px;
+	width: 100%;
 `;
 
 const deprecatedBottomMargin = ( {

package/src/focal-point-picker/types.ts

@@ -26,6 +26,12 @@ export type FocalPointPickerProps = Pick<
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Autoplays HTML5 video. This only applies to video sources (`url`).
 	 *
@@ -62,6 +68,7 @@ export type FocalPointPickerProps = Pick<
 
 export type FocalPointPickerControlsProps = {
 	__nextHasNoMarginBottom?: boolean;
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * A bit of extra bottom margin will be added if a `help` text
 	 * needs to be rendered under it.

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

@@ -27,6 +27,7 @@ const CUSTOM_OPTION: FontSizePickerSelectOption = {
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	const {
+		__next40pxDefaultSize,
 		fontSizes,
 		value,
 		disableCustomFontSizes,
@@ -67,6 +68,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 
 	return (
 		<CustomSelectControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__nextUnconstrainedWidth
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }

package/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -14,10 +14,18 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const { fontSizes, value, __nextHasNoMarginBottom, size, onChange } = props;
+	const {
+		fontSizes,
+		value,
+		__nextHasNoMarginBottom,
+		__next40pxDefaultSize,
+		size,
+		onChange,
+	} = props;
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
 			value={ value }