@wordpress/components 26.0.4 → 27.1.0

package/src/custom-select-control-v2/styles.ts

@@ -1,18 +1,37 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { COLORS } from '../utils';
+import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
-import type { CustomSelectProps } from './types';
+import type { CustomSelectButtonProps } from './types';
+
+const ITEM_PADDING = space( 2 );
+
+export const WithHintWrapper = styled.div`
+	display: flex;
+	justify-content: space-between;
+	flex: 1;
+`;
+
+export const SelectedExperimentalHintItem = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	margin-inline-start: ${ space( 2 ) };
+`;
 
-export const CustomSelectLabel = styled( Ariakit.SelectLabel )`
+export const ExperimentalHintItem = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	text-align: right;
+	margin-inline-end: ${ space( 1 ) };
+`;
+
+export const SelectLabel = styled( Ariakit.SelectLabel )`
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1.4;
@@ -20,57 +39,82 @@ export const CustomSelectLabel = styled( Ariakit.SelectLabel )`
 	margin-bottom: ${ space( 2 ) };
 `;
 
-const inputHeights = {
-	default: 40,
-	small: 24,
-};
-
-export const CustomSelectButton = styled( Ariakit.Select, {
+export const Select = styled( Ariakit.Select, {
 	// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
 	shouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',
 } )( ( {
 	size,
 	hasCustomRenderProp,
 }: {
-	size: NonNullable< CustomSelectProps[ 'size' ] >;
+	size: NonNullable< CustomSelectButtonProps[ 'size' ] >;
 	hasCustomRenderProp: boolean;
 } ) => {
-	const isSmallSize = size === 'small' && ! hasCustomRenderProp;
 	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
 
-	return {
-		display: 'flex',
-		justifyContent: 'space-between',
-		alignItems: 'center',
-		backgroundColor: COLORS.white,
-		border: `1px solid ${ COLORS.gray[ 600 ] }`,
-		borderRadius: space( 0.5 ),
-		cursor: 'pointer',
-		width: '100%',
-		[ heightProperty ]: `${ inputHeights[ size ] }px`,
-		padding: isSmallSize ? space( 2 ) : space( 4 ),
-		fontSize: isSmallSize ? '11px' : '13px',
-		'&[data-focus-visible]': {
-			outlineStyle: 'solid',
-		},
-		'&[aria-expanded="true"]': {
-			outlineStyle: `1.5px solid ${ COLORS.theme.accent }`,
-		},
+	const getSize = () => {
+		const sizes = {
+			compact: {
+				[ heightProperty ]: 32,
+				paddingInlineStart: space( 2 ),
+				paddingInlineEnd: space( 1 ),
+			},
+			default: {
+				[ heightProperty ]: 40,
+				paddingInlineStart: space( 4 ),
+				paddingInlineEnd: space( 3 ),
+			},
+			small: {
+				[ heightProperty ]: 24,
+				paddingInlineStart: space( 2 ),
+				paddingInlineEnd: space( 1 ),
+				fontSize: 11,
+			},
+		};
+
+		return sizes[ size ] || sizes.default;
 	};
+
+	return css`
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: ${ COLORS.theme.background };
+		border: 1px solid ${ COLORS.ui.border };
+		border-radius: 2px;
+		cursor: pointer;
+		font-size: ${ CONFIG.fontSize };
+		width: 100%;
+		&[data-focus-visible] {
+			outline-style: solid;
+		}
+		&[aria-expanded='true'] {
+			outline: 1.5px solid ${ COLORS.theme.accent };
+		}
+		${ getSize() }
+	`;
 } );
 
-export const CustomSelectPopover = styled( Ariakit.SelectPopover )`
-	border-radius: ${ space( 0.5 ) };
-	background: ${ COLORS.white };
-	border: 1px solid ${ COLORS.gray[ 900 ] };
+export const SelectPopover = styled( Ariakit.SelectPopover )`
+	border-radius: 2px;
+	background: ${ COLORS.theme.background };
+	border: 1px solid ${ COLORS.theme.foreground };
 `;
 
-export const CustomSelectItem = styled( Ariakit.SelectItem )`
+export const SelectItem = styled( Ariakit.SelectItem )`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: ${ space( 2 ) };
+	padding: ${ ITEM_PADDING };
+	font-size: ${ CONFIG.fontSize };
+	line-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy
 	&[data-active-item] {
-		background-color: ${ COLORS.gray[ 300 ] };
+		background-color: ${ COLORS.theme.gray[ 300 ] };
 	}
 `;
+
+export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
+	display: flex;
+	align-items: center;
+	margin-inline-start: ${ ITEM_PADDING };
+	font-size: 24px; // Size of checkmark icon
+`;

package/src/custom-select-control-v2/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { click, press, sleep, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -12,15 +12,45 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { CustomSelect, CustomSelectItem } from '..';
+import { CustomSelect as UncontrolledCustomSelect, CustomSelectItem } from '..';
 import type { CustomSelectProps } from '../types';
 
+const items = [
+	{
+		key: 'flower1',
+		value: 'violets',
+	},
+	{
+		key: 'flower2',
+		value: 'crimson clover',
+	},
+	{
+		key: 'flower3',
+		value: 'poppy',
+	},
+	{
+		key: 'color1',
+		value: 'amber',
+	},
+	{
+		key: 'color2',
+		value: 'aquamarine',
+	},
+];
+
+const defaultProps = {
+	label: 'label!',
+	children: items.map( ( { value, key } ) => (
+		<CustomSelectItem value={ value } key={ key } />
+	) ),
+};
+
 const ControlledCustomSelect = ( props: CustomSelectProps ) => {
 	const [ value, setValue ] = useState< string | string[] >();
 	return (
-		<CustomSelect
+		<UncontrolledCustomSelect
 			{ ...props }
-			onChange={ ( nextValue ) => {
+			onChange={ ( nextValue: string | string[] ) => {
 				setValue( nextValue );
 				props.onChange?.( nextValue );
 			} }
@@ -30,14 +60,178 @@ const ControlledCustomSelect = ( props: CustomSelectProps ) => {
 };
 
 describe.each( [
-	[ 'uncontrolled', CustomSelect ],
-	[ 'controlled', ControlledCustomSelect ],
-] )( 'CustomSelect %s', ( ...modeAndComponent ) => {
+	[ 'Uncontrolled', UncontrolledCustomSelect ],
+	[ 'Controlled', ControlledCustomSelect ],
+] )( 'CustomSelectControlV2 (%s)', ( ...modeAndComponent ) => {
 	const [ , Component ] = modeAndComponent;
 
+	it( 'Should replace the initial selection when a new item is selected', async () => {
+		render( <Component { ...defaultProps } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await click( currentSelectedItem );
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'crimson clover',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+
+		await click( currentSelectedItem );
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'poppy',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'poppy' );
+	} );
+
+	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
+		render( <Component { ...defaultProps } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await sleep();
+		await press.Tab();
+		await press.Enter();
+		expect(
+			screen.getByRole( 'listbox', {
+				name: 'label!',
+			} )
+		).toBeVisible();
+
+		await press.Escape();
+		expect(
+			screen.queryByRole( 'listbox', {
+				name: 'label!',
+			} )
+		).not.toBeInTheDocument();
+
+		expect( currentSelectedItem ).toHaveTextContent( items[ 0 ].value );
+	} );
+
+	describe( 'Keyboard behavior and accessibility', () => {
+		it( 'Should be able to change selection using keyboard', async () => {
+			render( <Component { ...defaultProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await sleep();
+			await press.Tab();
+			expect( currentSelectedItem ).toHaveFocus();
+
+			await press.Enter();
+			expect(
+				screen.getByRole( 'listbox', {
+					name: 'label!',
+				} )
+			).toHaveFocus();
+
+			await press.ArrowDown();
+			await press.Enter();
+
+			expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+		} );
+
+		it( 'Should be able to type characters to select matching options', async () => {
+			render( <Component { ...defaultProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await sleep();
+			await press.Tab();
+			await press.Enter();
+			expect(
+				screen.getByRole( 'listbox', {
+					name: 'label!',
+				} )
+			).toHaveFocus();
+
+			await type( 'a' );
+			await press.Enter();
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
+		} );
+
+		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
+			render( <Component { ...defaultProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await sleep();
+			await press.Tab();
+			expect( currentSelectedItem ).toHaveFocus();
+
+			await type( 'aq' );
+
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: 'label!',
+					hidden: true,
+				} )
+			).not.toBeInTheDocument();
+
+			await press.Enter();
+			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
+		} );
+
+		it( 'Should have correct aria-selected value for selections', async () => {
+			render( <Component { ...defaultProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await click( currentSelectedItem );
+
+			// assert that first item has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: 'violets',
+					selected: true,
+				} )
+			).toBeVisible();
+
+			// change the current selection
+			await click( screen.getByRole( 'option', { name: 'poppy' } ) );
+
+			// click combobox to mount listbox with options again
+			await click( currentSelectedItem );
+
+			// check that first item is has aria-selected="false" after new selection
+			expect(
+				screen.getByRole( 'option', {
+					name: 'violets',
+					selected: false,
+				} )
+			).toBeVisible();
+
+			// check that new selected item now has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: 'poppy',
+					selected: true,
+				} )
+			).toBeVisible();
+		} );
+	} );
+
 	describe( 'Multiple selection', () => {
 		it( 'Should be able to select multiple items when provided an array', async () => {
-			const user = userEvent.setup();
 			const onChangeMock = jest.fn();
 
 			// initial selection as defaultValue
@@ -75,7 +269,7 @@ describe.each( [
 				`${ defaultValues.length } items selected`
 			);
 
-			await user.click( currentSelectedItem );
+			await click( currentSelectedItem );
 
 			expect( screen.getByRole( 'listbox' ) ).toHaveAttribute(
 				'aria-multiselectable'
@@ -100,7 +294,7 @@ describe.each( [
 			} );
 
 			// click next selection to add another item to current selection
-			await user.click( nextSelection );
+			await click( nextSelection );
 
 			// updated array containing defaultValues + the item just selected
 			const updatedSelection = defaultValues.concat( nextSelectionName );
@@ -116,8 +310,6 @@ describe.each( [
 		} );
 
 		it( 'Should be able to deselect items when provided an array', async () => {
-			const user = userEvent.setup();
-
 			// initial selection as defaultValue
 			const defaultValues = [
 				'aurora borealis green',
@@ -141,7 +333,7 @@ describe.each( [
 				expanded: false,
 			} );
 
-			await user.click( currentSelectedItem );
+			await click( currentSelectedItem );
 
 			// Array containing items to deselect
 			const nextSelection = [
@@ -154,7 +346,7 @@ describe.each( [
 			// are reflected correctly
 			await Promise.all(
 				nextSelection.map( async ( value ) => {
-					await user.click(
+					await click(
 						screen.getByRole( 'option', { name: value } )
 					);
 					expect(
@@ -176,8 +368,6 @@ describe.each( [
 	} );
 
 	it( 'Should allow rendering a custom value when using `renderSelectedValue`', async () => {
-		const user = userEvent.setup();
-
 		const renderValue = ( value: string | string[] ) => {
 			return <img src={ `${ value }.jpg` } alt={ value as string } />;
 		};
@@ -208,7 +398,7 @@ describe.each( [
 			screen.queryByRole( 'img', { name: 'july-9' } )
 		).not.toBeInTheDocument();
 
-		await user.click( currentSelectedItem );
+		await click( currentSelectedItem );
 
 		// expect that the other image is only visible after opening popover with options
 		expect( screen.getByRole( 'img', { name: 'july-9' } ) ).toBeVisible();

package/src/custom-select-control-v2/types.ts

@@ -3,30 +3,23 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
+import type { FocusEventHandler, MouseEventHandler } from 'react';
 
-export type CustomSelectContext =
-	| {
-			/**
-			 * The store object returned by Ariakit's `useSelectStore` hook.
-			 */
-			store: Ariakit.SelectStore;
-	  }
-	| undefined;
-
-export type CustomSelectProps = {
+export type CustomSelectStore = {
 	/**
-	 * The child elements. This should be composed of CustomSelectItem components.
+	 * The store object returned by Ariakit's `useSelectStore` hook.
 	 */
-	children: React.ReactNode;
+	store: Ariakit.SelectStore;
+};
+
+export type CustomSelectContext = CustomSelectStore | undefined;
+
+export type CustomSelectButtonProps = {
 	/**
-	 * An optional default value for the control. If left `undefined`, the first
-	 * non-disabled item will be used.
+	 * An optional default value for the control when used in uncontrolled mode.
+	 * If left `undefined`, the first non-disabled item will be used.
 	 */
 	defaultValue?: string | string[];
-	/**
-	 * Label for the control.
-	 */
-	label: string;
 	/**
 	 * A function that receives the new value of the input.
 	 */
@@ -42,13 +35,147 @@ export type CustomSelectProps = {
 	 *
 	 * @default 'default'
 	 */
-	size?: 'default' | 'small';
+	size?: 'compact' | 'default' | 'small';
 	/**
-	 * Can be used to externally control the value of the control.
+	 * The value of the control when used in uncontrolled mode.
 	 */
 	value?: string | string[];
 };
 
+export type _CustomSelectProps = {
+	/**
+	 * The child elements. This should be composed of `CustomSelectItem` components.
+	 */
+	children: React.ReactNode;
+	/**
+	 * Used to visually hide the label. It will always be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Accessible label for the control.
+	 */
+	label: string;
+};
+
+export type CustomSelectProps = _CustomSelectProps &
+	Omit< CustomSelectButtonProps, 'size' > & {
+		/**
+		 * The size of the control.
+		 *
+		 * @default 'default'
+		 */
+		size?: Exclude< CustomSelectButtonProps[ 'size' ], 'small' >;
+	};
+
+/**
+ * The legacy object structure for the options array.
+ */
+type LegacyOption = {
+	key: string;
+	name: string;
+	style?: React.CSSProperties;
+	className?: string;
+	__experimentalHint?: string;
+};
+
+/**
+ * The legacy object returned from the onChange event.
+ */
+type LegacyOnChangeObject = {
+	highlightedIndex?: number;
+	inputValue?: string;
+	isOpen?: boolean;
+	type?: string;
+	selectedItem: LegacyOption;
+};
+
+export type LegacyCustomSelectProps = {
+	/**
+	 * Optional classname for the component.
+	 */
+	className?: string;
+	/**
+	 * Used to visually hide the label. It will always be visible to screen readers.
+	 *
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * 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.
+	 */
+	describedBy?: string;
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * Function called with the control's internal state changes. The `selectedItem`
+	 * property contains the next selected item.
+	 */
+	onChange?: ( newValue: LegacyOnChangeObject ) => void;
+	/**
+	 * A handler for `onBlur` events.
+	 *
+	 * @ignore
+	 */
+	onBlur?: FocusEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `onFocus` events.
+	 *
+	 * @ignore
+	 */
+	onFocus?: FocusEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `onMouseOver` events.
+	 *
+	 * @ignore
+	 */
+	onMouseOut?: MouseEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `onMouseOut` events.
+	 *
+	 * @ignore
+	 */
+	onMouseOver?: MouseEventHandler< HTMLButtonElement >;
+	/**
+	 * The options that can be chosen from.
+	 */
+	options: Array< LegacyOption >;
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'small' | '__unstable-large';
+	/**
+	 * Can be used to externally control the value of the control.
+	 */
+	value?: LegacyOption;
+	/**
+	 * Legacy way to add additional text to the right of each option.
+	 *
+	 * @default false
+	 */
+	__experimentalShowSelectedHint?: boolean;
+	/**
+	 * Opt-in prop for an unconstrained width style which became the default in
+	 * WordPress 6.5. The prop is no longer needed and can be safely removed.
+	 *
+	 * @deprecated
+	 * @ignore
+	 */
+	__nextUnconstrainedWidth?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
+};
+
 export type CustomSelectItemProps = {
 	/**
 	 * The value of the select item. This will be used as the children if

package/src/disabled/test/index.tsx

@@ -94,7 +94,7 @@ describe( 'Disabled', () => {
 			'This is contentEditable.'
 		);
 
-		rerender( <MaybeDisable isDisabled={ true } /> );
+		rerender( <MaybeDisable isDisabled /> );
 		expect( getInput() ).toHaveValue( 'This is input.' );
 		expect( getContentEditable() ).toHaveTextContent(
 			'This is contentEditable.'

package/src/draggable/index.native.js

@@ -63,7 +63,7 @@ const Draggable = ( {
 	useAnimatedReaction(
 		() => isDragging.value,
 		( result, previous ) => {
-			if ( result === previous || previous === null ) {
+			if ( result === previous ) {
 				return;
 			}
 
@@ -75,7 +75,7 @@ const Draggable = ( {
 						id: draggingId.value,
 					} );
 				}
-			} else if ( onDragEnd ) {
+			} else if ( previous !== null && onDragEnd ) {
 				onDragEnd( {
 					x: lastPosition.x.value,
 					y: lastPosition.y.value,