@wordpress/components 28.1.0 → 28.3.0

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

@@ -14,7 +14,11 @@ import { useState } from '@wordpress/element';
  */
 import UncontrolledCustomSelectControl from '..';
 
-const customClass = 'amber-skies';
+const customClassName = 'amber-skies';
+const customStyles = {
+	backgroundColor: 'rgb(127, 255, 212)',
+	rotate: '13deg',
+};
 
 const props = {
 	label: 'label!',
@@ -26,7 +30,7 @@ const props = {
 		{
 			key: 'flower2',
 			name: 'crimson clover',
-			className: customClass,
+			className: customClassName,
 		},
 		{
 			key: 'flower3',
@@ -35,37 +39,114 @@ const props = {
 		{
 			key: 'color1',
 			name: 'amber',
-			className: customClass,
+			className: customClassName,
 		},
 		{
 			key: 'color2',
 			name: 'aquamarine',
-			style: {
-				backgroundColor: 'rgb(127, 255, 212)',
-				rotate: '13deg',
-			},
+			style: customStyles,
+		},
+		{
+			key: 'color3',
+			name: 'tomato (with custom props)',
+			className: customClassName,
+			style: customStyles,
+			// try passing a valid HTML attribute
+			'aria-label': 'test label',
+			// try adding a custom prop
+			customPropFoo: 'foo',
 		},
 	],
 };
 
-const ControlledCustomSelectControl = ( { options, ...restProps } ) => {
-	const [ value, setValue ] = useState( options[ 0 ] );
+const ControlledCustomSelectControl = ( {
+	options,
+	onChange: onChangeProp,
+	...restProps
+} ) => {
+	const [ value, setValue ] = useState( restProps.value ?? options[ 0 ] );
+
+	const onChange = ( changeObject ) => {
+		onChangeProp?.( changeObject );
+		setValue( changeObject.selectedItem );
+	};
+
 	return (
 		<UncontrolledCustomSelectControl
 			{ ...restProps }
 			options={ options }
-			onChange={ ( { selectedItem } ) => setValue( selectedItem ) }
+			onChange={ onChange }
 			value={ options.find( ( option ) => option.key === value.key ) }
 		/>
 	);
 };
 
+it( 'Should apply external controlled updates', async () => {
+	const mockOnChange = jest.fn();
+	const { rerender } = render(
+		<UncontrolledCustomSelectControl
+			{ ...props }
+			value={ props.options[ 0 ] }
+			onChange={ mockOnChange }
+		/>
+	);
+
+	const currentSelectedItem = screen.getByRole( 'button', {
+		expanded: false,
+	} );
+
+	expect( currentSelectedItem ).toHaveTextContent( props.options[ 0 ].name );
+
+	rerender(
+		<UncontrolledCustomSelectControl
+			{ ...props }
+			value={ props.options[ 1 ] }
+		/>
+	);
+
+	expect( currentSelectedItem ).toHaveTextContent( props.options[ 1 ].name );
+
+	expect( mockOnChange ).not.toHaveBeenCalled();
+} );
+
 describe.each( [
-	[ 'uncontrolled', UncontrolledCustomSelectControl ],
-	[ 'controlled', ControlledCustomSelectControl ],
+	[ 'Uncontrolled', UncontrolledCustomSelectControl ],
+	[ 'Controlled', ControlledCustomSelectControl ],
 ] )( 'CustomSelectControl %s', ( ...modeAndComponent ) => {
 	const [ , Component ] = modeAndComponent;
 
+	it( 'Should select the first option when no explicit initial value is passed without firing onChange', () => {
+		const mockOnChange = jest.fn();
+		render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		).toHaveTextContent( props.options[ 0 ].name );
+
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'Should pick the initially selected option if the value prop is passed without firing onChange', async () => {
+		const mockOnChange = jest.fn();
+		render(
+			<Component
+				{ ...props }
+				onChange={ mockOnChange }
+				value={ props.options[ 3 ] }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		).toHaveTextContent( props.options[ 3 ].name );
+
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
 	it( 'Should replace the initial selection when a new item is selected', async () => {
 		const user = userEvent.setup();
 
@@ -109,14 +190,14 @@ describe.each( [
 		await user.keyboard( '{enter}' );
 		expect(
 			screen.getByRole( 'listbox', {
-				name: 'label!',
+				name: props.label,
 			} )
 		).toBeVisible();
 
 		await user.keyboard( '{escape}' );
 		expect(
 			screen.queryByRole( 'listbox', {
-				name: 'label!',
+				name: props.label,
 			} )
 		).not.toBeInTheDocument();
 
@@ -144,7 +225,7 @@ describe.each( [
 		// assert against filtered array
 		itemsWithClass.map( ( { name } ) =>
 			expect( screen.getByRole( 'option', { name } ) ).toHaveClass(
-				customClass
+				customClassName
 			)
 		);
 
@@ -156,15 +237,13 @@ describe.each( [
 		// assert against filtered array
 		itemsWithoutClass.map( ( { name } ) =>
 			expect( screen.getByRole( 'option', { name } ) ).not.toHaveClass(
-				customClass
+				customClassName
 			)
 		);
 	} );
 
 	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( <Component { ...props } /> );
 
@@ -262,6 +341,115 @@ describe.each( [
 		expect( screen.getByRole( 'option', { name: /hint/i } ) ).toBeVisible();
 	} );
 
+	it( 'Should return object onChange', async () => {
+		const user = userEvent.setup();
+		const mockOnChange = jest.fn();
+
+		render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		);
+
+		await user.click(
+			screen.getByRole( 'option', {
+				name: 'aquamarine',
+			} )
+		);
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				inputValue: '',
+				isOpen: false,
+				selectedItem: expect.objectContaining( {
+					name: 'aquamarine',
+				} ),
+				type: expect.any( String ),
+			} )
+		);
+	} );
+
+	it( 'Should return selectedItem object when specified onChange', async () => {
+		const user = userEvent.setup();
+		const mockOnChange = jest.fn();
+
+		render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		).toHaveFocus();
+
+		await user.keyboard( 'p' );
+		await user.keyboard( '{enter}' );
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				selectedItem: expect.objectContaining( {
+					key: 'flower3',
+					name: 'poppy',
+				} ),
+			} )
+		);
+	} );
+
+	it( "Should pass arbitrary props to onChange's selectedItem, but apply only style and className to DOM elements", async () => {
+		const user = userEvent.setup();
+		const onChangeMock = jest.fn();
+
+		render( <Component { ...props } onChange={ onChangeMock } /> );
+
+		const currentSelectedItem = screen.getByRole( 'button', {
+			expanded: false,
+		} );
+
+		await user.click( currentSelectedItem );
+
+		const optionWithCustomAttributes = screen.getByRole( 'option', {
+			name: 'tomato (with custom props)',
+		} );
+
+		// Assert that the option element does not have the custom attributes
+		expect( optionWithCustomAttributes ).not.toHaveAttribute(
+			'customPropFoo'
+		);
+		expect( optionWithCustomAttributes ).not.toHaveAttribute(
+			'aria-label'
+		);
+
+		await user.click( optionWithCustomAttributes );
+
+		expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				selectedItem: expect.objectContaining( {
+					key: 'color3',
+					name: 'tomato (with custom props)',
+					className: customClassName,
+					style: customStyles,
+					'aria-label': 'test label',
+					customPropFoo: 'foo',
+				} ),
+			} )
+		);
+	} );
+
+	it( 'Should label the component correctly even when the label is not visible', () => {
+		render( <Component { ...props } hideLabelFromVision /> );
+
+		expect(
+			screen.getByRole( 'button', {
+				name: props.label,
+			} )
+		).toBeVisible();
+	} );
+
 	describe( 'Keyboard behavior and accessibility', () => {
 		it( 'Captures the keypress event and does not let it propagate', async () => {
 			const user = userEvent.setup();
@@ -282,7 +470,7 @@ describe.each( [
 			await user.click( currentSelectedItem );
 
 			const customSelect = screen.getByRole( 'listbox', {
-				name: 'label!',
+				name: props.label,
 			} );
 			await user.type( customSelect, '{enter}' );
 
@@ -304,14 +492,16 @@ describe.each( [
 			await user.keyboard( '{enter}' );
 			expect(
 				screen.getByRole( 'listbox', {
-					name: 'label!',
+					name: props.label,
 				} )
 			).toHaveFocus();
 
 			await user.keyboard( '{arrowdown}' );
 			await user.keyboard( '{enter}' );
 
-			expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 1 ].name
+			);
 		} );
 
 		it( 'Should be able to type characters to select matching options', async () => {
@@ -327,7 +517,7 @@ describe.each( [
 			await user.keyboard( '{enter}' );
 			expect(
 				screen.getByRole( 'listbox', {
-					name: 'label!',
+					name: props.label,
 				} )
 			).toHaveFocus();
 
@@ -353,7 +543,7 @@ describe.each( [
 
 			expect(
 				screen.queryByRole( 'listbox', {
-					name: 'label!',
+					name: props.label,
 					hidden: true,
 				} )
 			).not.toBeInTheDocument();
@@ -362,6 +552,32 @@ describe.each( [
 			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
 		} );
 
+		it( 'Can change selection with a focused input and closed dropdown while pressing arrow keys', async () => {
+			const user = userEvent.setup();
+
+			render( <Component { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 0 ].name
+			);
+
+			await user.keyboard( '{arrowdown}' );
+			await user.keyboard( '{arrowdown}' );
+			expect(
+				screen.queryByRole( 'listbox', { name: props.label } )
+			).not.toBeInTheDocument();
+
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 2 ].name
+			);
+		} );
+
 		it( 'Should have correct aria-selected value for selections', async () => {
 			const user = userEvent.setup();
 
@@ -422,11 +638,14 @@ describe.each( [
 			const onBlurMock = jest.fn();
 
 			render(
-				<Component
-					{ ...props }
-					onFocus={ onFocusMock }
-					onBlur={ onBlurMock }
-				/>
+				<>
+					<Component
+						{ ...props }
+						onFocus={ onFocusMock }
+						onBlur={ onBlurMock }
+					/>
+					<button>Focus stop</button>
+				</>
 			);
 
 			const currentSelectedItem = screen.getByRole( 'button', {

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

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
 /**
  * WordPress dependencies
  */
-import { createContext, useMemo } from '@wordpress/element';
+import { createContext, useCallback, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -14,11 +19,12 @@ import type {
 	CustomSelectStore,
 	CustomSelectButtonProps,
 	CustomSelectButtonSize,
+	_CustomSelectInternalProps,
 	_CustomSelectProps,
 } from './types';
-import type { WordPressComponentProps } from '../context';
 import InputBase from '../input-control/input-base';
 import SelectControlChevronDown from '../select-control/chevron-down';
+import BaseControl from '../base-control';
 
 export const CustomSelectContext =
 	createContext< CustomSelectContextType >( undefined );
@@ -50,11 +56,10 @@ const CustomSelectButton = ( {
 	store,
 	...restProps
 }: Omit<
-	WordPressComponentProps<
-		CustomSelectButtonProps & CustomSelectButtonSize & CustomSelectStore,
-		'button',
-		false
-	>,
+	React.ComponentProps< typeof Ariakit.Select > &
+		CustomSelectButtonProps &
+		CustomSelectButtonSize &
+		CustomSelectStore,
 	'onChange'
 > ) => {
 	const { value: currentValue } = store.useState();
@@ -70,17 +75,17 @@ const CustomSelectButton = ( {
 			size={ size }
 			hasCustomRenderProp={ !! renderSelectedValue }
 			store={ store }
-			// to match legacy behavior where using arrow keys
-			// move selection rather than open the popover
-			showOnKeyDown={ false }
 		>
-			<div>{ computedRenderSelectedValue( currentValue ) }</div>
+			{ computedRenderSelectedValue( currentValue ) }
 		</Styled.Select>
 	);
 };
 
 function _CustomSelect(
-	props: _CustomSelectProps & CustomSelectStore & CustomSelectButtonSize
+	props: _CustomSelectInternalProps &
+		_CustomSelectProps &
+		CustomSelectStore &
+		CustomSelectButtonSize
 ) {
 	const {
 		children,
@@ -88,18 +93,40 @@ function _CustomSelect(
 		label,
 		size,
 		store,
+		className,
+		isLegacy = false,
 		...restProps
 	} = props;
 
+	const onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =
+		useCallback(
+			( e ) => {
+				if ( isLegacy ) {
+					e.stopPropagation();
+				}
+			},
+			[ isLegacy ]
+		);
+
+	const contextValue = useMemo( () => ( { store, size } ), [ store, size ] );
+
 	return (
-		<>
-			{ hideLabelFromVision ? ( // TODO: Replace with BaseControl
-				<VisuallyHidden as="label">{ label }</VisuallyHidden>
-			) : (
-				<Styled.SelectLabel store={ store }>
-					{ label }
-				</Styled.SelectLabel>
-			) }
+		// Where should `restProps` be forwarded to?
+		<div className={ className }>
+			<Ariakit.SelectLabel
+				store={ store }
+				render={
+					hideLabelFromVision ? (
+						// @ts-expect-error `children` are passed via the render prop
+						<VisuallyHidden />
+					) : (
+						// @ts-expect-error `children` are passed via the render prop
+						<BaseControl.VisualLabel as="div" />
+					)
+				}
+			>
+				{ label }
+			</Ariakit.SelectLabel>
 			<InputBase
 				__next40pxDefaultSize
 				size={ size }
@@ -109,14 +136,22 @@ function _CustomSelect(
 					{ ...restProps }
 					size={ size }
 					store={ store }
+					// Match legacy behavior (move selection rather than open the popover)
+					showOnKeyDown={ ! isLegacy }
 				/>
-				<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
-					<CustomSelectContext.Provider value={ { store } }>
+				<Styled.SelectPopover
+					gutter={ 12 }
+					store={ store }
+					sameWidth
+					slide={ false }
+					onKeyDown={ onSelectPopoverKeyDown }
+				>
+					<CustomSelectContext.Provider value={ contextValue }>
 						{ children }
 					</CustomSelectContext.Provider>
 				</Styled.SelectPopover>
 			</InputBase>
-		</>
+		</div>
 	);
 }
 

package/src/custom-select-control-v2/default-component/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies

package/src/custom-select-control-v2/item.tsx

@@ -17,7 +17,11 @@ export function CustomSelectItem( {
 }: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {
 	const customSelectContext = useContext( CustomSelectContext );
 	return (
-		<Styled.SelectItem store={ customSelectContext?.store } { ...props }>
+		<Styled.SelectItem
+			store={ customSelectContext?.store }
+			size={ customSelectContext?.size ?? 'default' }
+			{ ...props }
+		>
 			{ children ?? props.value }
 			<Styled.SelectedItemCheck>
 				<Icon icon={ check } />

package/src/custom-select-control-v2/legacy-component/index.tsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -14,20 +14,25 @@ import * as Styled from '../styles';
 
 function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	const {
-		__experimentalShowSelectedHint,
+		__experimentalShowSelectedHint = false,
 		__next40pxDefaultSize = false,
 		describedBy,
 		options,
 		onChange,
 		size = 'default',
 		value,
+		className: classNameProp,
 		...restProps
 	} = props;
 
 	// Forward props + store from v2 implementation
 	const store = Ariakit.useSelectStore( {
 		async setValue( nextValue ) {
-			if ( ! onChange ) {
+			const nextOption = options.find(
+				( item ) => item.name === nextValue
+			);
+
+			if ( ! onChange || ! nextOption ) {
 				return;
 			}
 
@@ -42,25 +47,31 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				),
 				inputValue: '',
 				isOpen: state.open,
-				selectedItem: {
-					name: nextValue as string,
-					key: nextValue as string,
-				},
+				selectedItem: nextOption,
 				type: '',
 			};
 			onChange( changeObject );
 		},
+		value: value?.name,
+		// Setting the first option as a default value when no value is provided
+		// is already done natively by the underlying Ariakit component,
+		// but doing this explicitly avoids the `onChange` callback from firing
+		// on initial render, thus making this implementation closer to the v1.
+		defaultValue: options[ 0 ]?.name,
 	} );
 
 	const children = options.map(
-		( { name, key, __experimentalHint, ...rest } ) => {
+		( { name, key, __experimentalHint, style, className } ) => {
 			const withHint = (
-				<Styled.WithHintWrapper>
+				<Styled.WithHintItemWrapper>
 					<span>{ name }</span>
-					<Styled.ExperimentalHintItem className="components-custom-select-control__item-hint">
+					<Styled.WithHintItemHint
+					// TODO: Legacy classname. Add V1 styles are removed from the codebase
+					// className="components-custom-select-control__item-hint"
+					>
 						{ __experimentalHint }
-					</Styled.ExperimentalHintItem>
-				</Styled.WithHintWrapper>
+					</Styled.WithHintItemHint>
+				</Styled.WithHintItemWrapper>
 			);
 
 			return (
@@ -68,7 +79,16 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 					key={ key }
 					value={ name }
 					children={ __experimentalHint ? withHint : name }
-					{ ...rest }
+					style={ style }
+					className={ clsx(
+						// TODO: Legacy classname. Add V1 styles are removed from the codebase
+						// 'components-custom-select-control__item',
+						className
+						// TODO: Legacy classname. Add V1 styles are removed from the codebase
+						// {
+						// 	'has-hint': __experimentalHint,
+						// }
+					) }
 				/>
 			);
 		}
@@ -82,12 +102,15 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 		);
 
 		return (
-			<>
+			<Styled.SelectedExperimentalHintWrapper>
 				{ currentValue }
-				<Styled.SelectedExperimentalHintItem className="components-custom-select-control__hint">
+				<Styled.SelectedExperimentalHintItem
+				// TODO: Legacy classname. Add V1 styles are removed from the codebase
+				// className="components-custom-select-control__hint"
+				>
 					{ currentHint?.__experimentalHint }
 				</Styled.SelectedExperimentalHintItem>
-			</>
+			</Styled.SelectedExperimentalHintWrapper>
 		);
 	};
 
@@ -114,6 +137,12 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 			}
 			size={ translatedSize }
 			store={ store }
+			className={ clsx(
+				// TODO: Legacy classname. Add V1 styles are removed from the codebase
+				// 'components-custom-select-control',
+				classNameProp
+			) }
+			isLegacy
 			{ ...restProps }
 		>
 			{ children }