@wordpress/components 28.3.0 → 28.5.0

package/src/color-palette/index.tsx

@@ -335,26 +335,28 @@ function UnforwardedColorPalette(
 					) }
 				/>
 			) }
-			<CircularOptionPicker
-				{ ...metaProps }
-				actions={ actions }
-				options={
-					hasMultipleColorOrigins ? (
-						<MultiplePalettes
-							{ ...paletteCommonProps }
-							headingLevel={ headingLevel }
-							colors={ colors as PaletteObject[] }
-							value={ value }
-						/>
-					) : (
-						<SinglePalette
-							{ ...paletteCommonProps }
-							colors={ colors as ColorObject[] }
-							value={ value }
-						/>
-					)
-				}
-			/>
+			{ ( colors.length > 0 || actions ) && (
+				<CircularOptionPicker
+					{ ...metaProps }
+					actions={ actions }
+					options={
+						hasMultipleColorOrigins ? (
+							<MultiplePalettes
+								{ ...paletteCommonProps }
+								headingLevel={ headingLevel }
+								colors={ colors as PaletteObject[] }
+								value={ value }
+							/>
+						) : (
+							<SinglePalette
+								{ ...paletteCommonProps }
+								colors={ colors as ColorObject[] }
+								value={ value }
+							/>
+						)
+					}
+				/>
+			) }
 		</VStack>
 	);
 }

package/src/color-picker/component.tsx

@@ -16,11 +16,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	useContextSystem,
-	contextConnect,
-	ContextSystemProvider,
-} from '../context';
+import { useContextSystem, contextConnect } from '../context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -43,9 +39,6 @@ const options = [
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
-// `isBorderless` is still experimental and not a public prop for InputControl yet.
-const BORDERLESS_SELECT_CONTROL_CONTEXT = { InputBase: { isBorderless: true } };
-
 const UnconnectedColorPicker = (
 	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
@@ -92,20 +85,17 @@ const UnconnectedColorPicker = (
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
-					<ContextSystemProvider
-						value={ BORDERLESS_SELECT_CONTROL_CONTEXT }
-					>
-						<SelectControl
-							__nextHasNoMarginBottom
-							options={ options }
-							value={ colorType }
-							onChange={ ( nextColorType ) =>
-								setColorType( nextColorType as ColorType )
-							}
-							label={ __( 'Color format' ) }
-							hideLabelFromVision
-						/>
-					</ContextSystemProvider>
+					<SelectControl
+						__nextHasNoMarginBottom
+						options={ options }
+						value={ colorType }
+						onChange={ ( nextColorType ) =>
+							setColorType( nextColorType as ColorType )
+						}
+						label={ __( 'Color format' ) }
+						hideLabelFromVision
+						variant="minimal"
+					/>
 					<ColorCopyButton
 						color={ safeColordColor }
 						colorType={ copyFormat || colorType }

package/src/color-picker/stories/index.story.tsx

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -30,19 +25,4 @@ const meta: Meta< typeof ColorPicker > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof ColorPicker > = ( { onChange, ...props } ) => {
-	const [ color, setColor ] = useState< string | undefined >();
-
-	return (
-		<ColorPicker
-			{ ...props }
-			color={ color }
-			onChange={ ( ...changeArgs ) => {
-				onChange?.( ...changeArgs );
-				setColor( ...changeArgs );
-			} }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
+export const Default: StoryObj< typeof ColorPicker > = {};

package/src/combobox-control/README.md

@@ -34,6 +34,7 @@ function MyComboboxControl() {
 	const [ filteredOptions, setFilteredOptions ] = useState( options );
 	return (
 		<ComboboxControl
+			__nextHasNoMarginBottom
 			label="Font Size"
 			value={ fontSize }
 			onChange={ setFontSize }
@@ -117,6 +118,14 @@ Custom renderer invoked for each option in the suggestion list. The render prop
 -   Type: `( args: { item: object } ) => ReactNode`
 -   Required: No
 
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   Like this component, but without a search input, the [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/) component.

package/src/combobox-control/index.tsx

@@ -92,6 +92,7 @@ const getIndexOfMatchingSuggestion = (
  * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
  * 	return (
  * 		<ComboboxControl
+ * 			__nextHasNoMarginBottom
  * 			label="Font Size"
  * 			value={ fontSize }
  * 			onChange={ setFontSize }
@@ -267,6 +268,15 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		inputContainer.current?.focus();
 	};
 
+	// Stop propagation of the keydown event when pressing Enter on the Reset
+	// button to prevent calling the onKeydown callback on the container div
+	// element which actually sets the selected suggestion.
+	const handleResetStopPropagation: React.KeyboardEventHandler<
+		HTMLButtonElement
+	> = ( event ) => {
+		event.stopPropagation();
+	};
+
 	// Update current selections when the filter input changes.
 	useEffect( () => {
 		const hasMatchingSuggestions = matchingSuggestions.length > 0;
@@ -350,6 +360,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 									// eslint-disable-next-line no-restricted-syntax
 									disabled={ ! value }
 									onClick={ handleOnReset }
+									onKeyDown={ handleResetStopPropagation }
 									label={ __( 'Reset' ) }
 								/>
 							</FlexItem>

package/src/combobox-control/test/index.tsx

@@ -89,7 +89,6 @@ describe.each( [
 			<Component options={ timezones } label={ defaultLabelText } />
 		);
 		const label = getLabel( defaultLabelText );
-		expect( label ).toBeInTheDocument();
 		expect( label ).toBeVisible();
 	} );
 
@@ -306,4 +305,131 @@ describe.each( [
 		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
 		expect( input ).toHaveValue( targetOption.label );
 	} );
+
+	it( 'should render with Reset button disabled', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset
+			/>
+		);
+
+		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+		expect( resetButton ).toBeVisible();
+		expect( resetButton ).toBeDisabled();
+	} );
+
+	it( 'should reset input when clicking the Reset button', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 13 ];
+
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset
+			/>
+		);
+
+		// Pressing tab selects the input and shows the options.
+		await user.tab();
+		// Type enough characters to ensure a predictable search result.
+		await user.keyboard( getOptionSearchString( targetOption ) );
+		// Pressing Enter/Return selects the currently focused option.
+		await user.keyboard( '{Enter}' );
+
+		const input = getInput( defaultLabelText );
+
+		expect( input ).toHaveValue( targetOption.label );
+
+		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+		expect( resetButton ).toBeEnabled();
+
+		await user.click( resetButton );
+
+		expect( input ).toHaveValue( '' );
+		expect( resetButton ).toBeDisabled();
+		expect( input ).toHaveFocus();
+	} );
+
+	it( 'should reset input when pressing the Reset button with the Enter key', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 13 ];
+
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset
+			/>
+		);
+
+		// Pressing tab selects the input and shows the options.
+		await user.tab();
+		// Type enough characters to ensure a predictable search result.
+		await user.keyboard( getOptionSearchString( targetOption ) );
+		// Pressing Enter/Return selects the currently focused option.
+		await user.keyboard( '{Enter}' );
+
+		const input = getInput( defaultLabelText );
+
+		expect( input ).toHaveValue( targetOption.label );
+
+		// Pressing tab moves focus to the Reset buttons
+		await user.tab();
+
+		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+		// If the button has focus that implies it is enabled.
+		expect( resetButton ).toHaveFocus();
+
+		// Pressing Enter/Return resets the input.
+		await user.keyboard( '{Enter}' );
+
+		expect( input ).toHaveValue( '' );
+		expect( resetButton ).toBeDisabled();
+		expect( input ).toHaveFocus();
+	} );
+
+	it( 'should reset input when pressing the Reset button with the Spacebar key', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 13 ];
+
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset
+			/>
+		);
+
+		// Pressing tab selects the input and shows the options.
+		await user.tab();
+		// Type enough characters to ensure a predictable search result.
+		await user.keyboard( getOptionSearchString( targetOption ) );
+		// Pressing Enter/Return selects the currently focused option.
+		await user.keyboard( '{Enter}' );
+
+		const input = getInput( defaultLabelText );
+
+		expect( input ).toHaveValue( targetOption.label );
+
+		// Pressing tab moves focus to the Reset buttons.
+		await user.tab();
+
+		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+		// If the button has focus that implies it is enabled.
+		expect( resetButton ).toHaveFocus();
+
+		// Pressing Spacebar resets the input.
+		await user.keyboard( '[Space]' );
+
+		expect( input ).toHaveValue( '' );
+		expect( resetButton ).toBeDisabled();
+		expect( input ).toHaveFocus();
+	} );
 } );

package/src/composite/legacy/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { queryByAttribute, render, screen } from '@testing-library/react';
-import { press, sleep, waitFor } from '@ariakit/test';
+import { press, waitFor } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -47,7 +47,7 @@ async function renderAndValidate( ...args: Parameters< typeof render > ) {
 		const activeButton = queryByAttribute(
 			'data-active-item',
 			view.baseElement,
-			''
+			'true'
 		);
 		expect( activeButton ).not.toBeNull();
 	} );
@@ -178,13 +178,10 @@ describe.each( [
 		);
 		renderAndValidate( <Test /> );
 
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'Before' ) ).toHaveFocus();
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'After' ) ).toHaveFocus();
 		await press.ShiftTab();
@@ -213,7 +210,6 @@ describe.each( [
 
 		expect( item2 ).toBeDisabled();
 
-		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -243,7 +239,6 @@ describe.each( [
 		expect( item2 ).toBeEnabled();
 		expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
 
-		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -279,7 +274,6 @@ describe.each( [
 		renderAndValidate( <Test /> );
 		const { item2 } = getOneDimensionalItems();
 
-		await sleep();
 		await press.Tab();
 		await waitFor( () => expect( item2 ).toHaveFocus() );
 	} );
@@ -323,7 +317,6 @@ describe.each( [
 		test( 'All directions work with no orientation', async () => {
 			const { item1, item2, item3 } = useOneDimensionalTest();
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -361,7 +354,6 @@ describe.each( [
 				orientation: 'horizontal',
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -391,7 +383,6 @@ describe.each( [
 				orientation: 'vertical',
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press( next );
@@ -421,7 +412,6 @@ describe.each( [
 				loop: true,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -444,7 +434,6 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
 				useTwoDimensionalTest();
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowUp();
@@ -481,7 +470,6 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
 				useTwoDimensionalTest( { loop: true } );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -506,7 +494,6 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
 				useTwoDimensionalTest( { wrap: true } );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -539,7 +526,6 @@ describe.each( [
 				wrap: true,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( previous );
@@ -555,7 +541,6 @@ describe.each( [
 		test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
 			const { itemA1, itemB1, itemB2, itemC1 } = useShiftTest( true );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -577,7 +562,6 @@ describe.each( [
 		test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
 			const { itemA1, itemB1, itemB2 } = useShiftTest( false );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowDown();

package/src/custom-select-control/README.md

@@ -63,81 +63,83 @@ function MyControlledCustomSelectControl() {
 
 ### Props
 
-#### className
+#### `className`: `string`
 
-A custom class name to append to the outer `<div>`.
+Optional classname for the component.
 
--   Type: `String`
 -   Required: No
 
-#### hideLabelFromVision
+#### `hideLabelFromVision`: `boolean`
 
-Used to visually hide the label. It will always be visible to screen readers.
+Hide the label visually, while keeping available to assistive technology.
 
--   Type: `Boolean`
 -   Required: No
 
-#### label
+#### `describedBy`: `string`
 
-The label for the control.
+Description for the select trigger button used by assistive technology. If no value is passed, the text "Currently selected: selectedItem.name" will be used fully translated.
+
+-   Required: No
+
+#### `label`: `string`
+
+Label for the control.
 
--   Type: `String`
 -   Required: Yes
 
-#### describedBy
+#### `onChange`: `( newValue: ChangeObject ) => void`
 
-Pass in a description that will be shown to screen readers associated with the select trigger button. If no value is passed, the text "Currently selected: selectedItem.name" will be used fully translated.
+Function called with the control's internal state changes. The `selectedItem` property contains the next selected item.
 
--   Type: `String`
 -   Required: No
 
-#### options
+#### `options`: `Array< Option >`
 
-The options that can be chosen from.
+The list of options that can be chosen from.
 
--   Type: `Array<{ key: String, name: String, style: ?{}, className: ?String, ...rest }>`
 -   Required: Yes
 
-#### onChange
+#### `size`: `'default' | 'small' | '\_\_unstable-large'`
 
-Function called with the control's internal state changes. The `selectedItem` property contains the next selected item.
+The size of the control.
+
+-   Default: `'default'`
+-   Required: No
+
+#### `showSelectedHint`: `boolean`
+
+Show the hint of the selected item in the trigger button.
 
--   Type: `Function`
 -   Required: No
 
-#### value
+#### `value`: `Option`
 
 Can be used to externally control the value of the control, like in the `MyControlledCustomSelectControl` example above.
 
--   Type: `Object`
 -   Required: No
 
-#### onMouseOver
+#### `onMouseOver`: `MouseEventHandler< HTMLButtonElement >`
 
-A handler for onMouseOver events.
+A handler for `mouseover` events on the trigger button.
 
--   Type: `Function`
 -   Required: No
 
-#### onMouseOut
+#### `onMouseOut`: `MouseEventHandler< HTMLButtonElement >`
 
-A handler for onMouseOut events.
+A handler for `mouseout` events on the trigger button.
 
--   Type: `Function`
 -   Required: No
 
-#### onFocus
+#### `onFocus`: `FocusEventHandler< HTMLButtonElement >`
 
-A handler for onFocus events.
+A handler for `focus` events on the trigger button.
 
--   Type: `Function`
 -   Required: No
 
-#### onBlur
+#### `onBlur`: `FocusEventHandler< HTMLButtonElement >`
 
-A handler for onBlur events.
+A handler for `blur` events on the trigger button.
 
--   Type: `Function`
 -   Required: No
 
 ## Related components