@wordpress/components 26.0.4 → 27.1.0

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

@@ -0,0 +1,457 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { click, press, sleep, type, waitFor } from '@ariakit/test';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import UncontrolledCustomSelect from '..';
+
+const customClass = 'amber-skies';
+
+const legacyProps = {
+	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',
+			},
+		},
+	],
+};
+
+const LegacyControlledCustomSelect = ( {
+	options,
+	onChange,
+	...restProps
+}: React.ComponentProps< typeof UncontrolledCustomSelect > ) => {
+	const [ value, setValue ] = useState( options[ 0 ] );
+	return (
+		<UncontrolledCustomSelect
+			{ ...restProps }
+			options={ options }
+			onChange={ ( args: any ) => {
+				onChange?.( args );
+				setValue( args.selectedItem );
+			} }
+			value={ options.find(
+				( option: any ) => option.key === value.key
+			) }
+		/>
+	);
+};
+
+describe.each( [
+	[ 'Uncontrolled', UncontrolledCustomSelect ],
+	[ 'Controlled', LegacyControlledCustomSelect ],
+] )( 'CustomSelectControl (%s)', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	it( 'Should replace the initial selection when a new item is selected', async () => {
+		render( <Component { ...legacyProps } /> );
+
+		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 { ...legacyProps } /> );
+
+		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(
+			legacyProps.options[ 0 ].name
+		);
+	} );
+
+	it( 'Should apply class only to options that have a className defined', async () => {
+		render( <Component { ...legacyProps } /> );
+
+		await click(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		);
+
+		// return an array of items _with_ a className added
+		const itemsWithClass = legacyProps.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 = legacyProps.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 customStyles =
+			'background-color: rgb(127, 255, 212); rotate: 13deg;';
+
+		render( <Component { ...legacyProps } /> );
+
+		await click(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		);
+
+		// return an array of items _with_ styles added
+		const styledItems = legacyProps.options.filter(
+			( option ) => option.style !== undefined
+		);
+
+		// assert against filtered array
+		styledItems.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).toHaveStyle(
+				customStyles
+			)
+		);
+
+		// return an array of items _without_ styles added
+		const unstyledItems = legacyProps.options.filter(
+			( option ) => option.style === undefined
+		);
+
+		// assert against filtered array
+		unstyledItems.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).not.toHaveStyle(
+				customStyles
+			)
+		);
+	} );
+
+	it( 'does not show selected hint by default', async () => {
+		render(
+			<Component
+				{ ...legacyProps }
+				label="Custom select"
+				options={ [
+					{
+						key: 'one',
+						name: 'One',
+						__experimentalHint: 'Hint',
+					},
+				] }
+			/>
+		);
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'combobox', { name: 'Custom select' } )
+			).not.toHaveTextContent( 'Hint' )
+		);
+	} );
+
+	it( 'shows selected hint when __experimentalShowSelectedHint is set', async () => {
+		render(
+			<Component
+				{ ...legacyProps }
+				label="Custom select"
+				options={ [
+					{
+						key: 'one',
+						name: 'One',
+						__experimentalHint: 'Hint',
+					},
+				] }
+				__experimentalShowSelectedHint
+			/>
+		);
+
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'combobox', {
+					expanded: false,
+				} )
+			).toHaveTextContent( /hint/i )
+		);
+	} );
+
+	it( 'shows selected hint in list of options when added', async () => {
+		render(
+			<Component
+				{ ...legacyProps }
+				label="Custom select"
+				options={ [
+					{
+						key: 'one',
+						name: 'One',
+						__experimentalHint: 'Hint',
+					},
+				] }
+				__experimentalShowSelectedHint
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'combobox', { name: 'Custom select' } )
+		);
+
+		expect( screen.getByRole( 'option', { name: /hint/i } ) ).toBeVisible();
+	} );
+
+	it( 'Should return object onChange', async () => {
+		const mockOnChange = jest.fn();
+
+		render( <Component { ...legacyProps } onChange={ mockOnChange } /> );
+
+		await click(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		);
+
+		expect( mockOnChange ).toHaveBeenNthCalledWith(
+			1,
+			expect.objectContaining( {
+				inputValue: '',
+				isOpen: false,
+				selectedItem: { key: 'violets', name: 'violets' },
+				type: '',
+			} )
+		);
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'aquamarine',
+			} )
+		);
+
+		expect( mockOnChange ).toHaveBeenNthCalledWith(
+			2,
+			expect.objectContaining( {
+				inputValue: '',
+				isOpen: false,
+				selectedItem: expect.objectContaining( {
+					name: 'aquamarine',
+				} ),
+				type: '',
+			} )
+		);
+	} );
+
+	it( 'Should return selectedItem object when specified onChange', async () => {
+		const mockOnChange = jest.fn(
+			( { selectedItem } ) => selectedItem.key
+		);
+
+		render( <Component { ...legacyProps } onChange={ mockOnChange } /> );
+
+		await sleep();
+		await press.Tab();
+		expect(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		).toHaveFocus();
+
+		await type( 'p' );
+		await press.Enter();
+
+		expect( mockOnChange ).toHaveReturnedWith( 'poppy' );
+	} );
+
+	describe( 'Keyboard behavior and accessibility', () => {
+		it( 'Should be able to change selection using keyboard', async () => {
+			render( <Component { ...legacyProps } /> );
+
+			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 { ...legacyProps } /> );
+
+			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 { ...legacyProps } /> );
+
+			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 { ...legacyProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await click( currentSelectedItem );
+
+			// get all items except for first option
+			const unselectedItems = legacyProps.options.filter(
+				( { name } ) => name !== legacyProps.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: legacyProps.options[ 0 ].name,
+					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: legacyProps.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();
+		} );
+	} );
+} );

package/src/custom-select-control-v2/stories/{index.story.tsx → default.story.tsx}

@@ -11,10 +11,11 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { CustomSelect, CustomSelectItem } from '..';
+import CustomSelect from '../default-component';
+import { CustomSelectItem } from '..';
 
 const meta: Meta< typeof CustomSelect > = {
-	title: 'Components (Experimental)/CustomSelectControl v2',
+	title: 'Components (Experimental)/CustomSelectControl v2/Default',
 	component: CustomSelect,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
@@ -22,15 +23,14 @@ const meta: Meta< typeof CustomSelect > = {
 	},
 	argTypes: {
 		children: { control: { type: null } },
-		renderSelectedValue: { control: { type: null } },
 		value: { control: { type: null } },
 	},
+	tags: [ 'status-wip' ],
 	parameters: {
 		badges: [ 'wip' ],
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {
-			canvas: { sourceState: 'shown' },
 			source: { excludeDecorators: true },
 		},
 	},
@@ -49,15 +49,11 @@ const meta: Meta< typeof CustomSelect > = {
 export default meta;
 
 const Template: StoryFn< typeof CustomSelect > = ( props ) => {
-	return <CustomSelect { ...props } />;
-};
-
-const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => {
 	const [ value, setValue ] = useState< string | string[] >();
 	return (
 		<CustomSelect
 			{ ...props }
-			onChange={ ( nextValue ) => {
+			onChange={ ( nextValue: string | string[] ) => {
 				setValue( nextValue );
 				props.onChange?.( nextValue );
 			} }
@@ -68,14 +64,18 @@ const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	label: 'Label',
+	label: 'Label text',
+	defaultValue: 'Select a color...',
 	children: (
 		<>
-			<CustomSelectItem value="Small">
-				<span style={ { fontSize: '75%' } }>Small</span>
+			<CustomSelectItem value="Blue">
+				<span style={ { color: 'blue' } }>Blue</span>
 			</CustomSelectItem>
-			<CustomSelectItem value="Something bigger">
-				<span style={ { fontSize: '200%' } }>Something bigger</span>
+			<CustomSelectItem value="Purple">
+				<span style={ { color: 'purple' } }>Purple</span>
+			</CustomSelectItem>
+			<CustomSelectItem value="Pink">
+				<span style={ { color: 'deeppink' } }>Pink</span>
 			</CustomSelectItem>
 		</>
 	),
@@ -83,21 +83,13 @@ Default.args = {
 
 /**
  * Multiple selection can be enabled by using an array for the `value` and
- * `defaultValue` props. The argument of the `onChange` function will also
+ * `defaultValue` props. The argument type of the `onChange` function will also
  * change accordingly.
  */
-export const MultiSelect = Template.bind( {} );
-MultiSelect.args = {
-	defaultValue: [ 'lavender', 'tangerine' ],
+export const MultipleSelection = Template.bind( {} );
+MultipleSelection.args = {
 	label: 'Select Colors',
-	renderSelectedValue: ( currentValue: string | string[] ) => {
-		if ( ! Array.isArray( currentValue ) ) {
-			return currentValue;
-		}
-		if ( currentValue.length === 0 ) return 'No colors selected';
-		if ( currentValue.length === 1 ) return currentValue[ 0 ];
-		return `${ currentValue.length } colors selected`;
-	},
+	defaultValue: [ 'lavender', 'tangerine' ],
 	children: (
 		<>
 			{ [
@@ -116,32 +108,34 @@ MultiSelect.args = {
 	),
 };
 
-const renderControlledValue = ( gravatar: string | string[] ) => {
+const renderItem = ( gravatar: string | string[] ) => {
 	const avatar = `https://gravatar.com/avatar?d=${ gravatar }`;
 	return (
 		<div style={ { display: 'flex', alignItems: 'center' } }>
 			<img
 				style={ { maxHeight: '75px', marginRight: '10px' } }
-				key={ avatar }
 				src={ avatar }
 				alt=""
-				aria-hidden="true"
 			/>
 			<span>{ gravatar }</span>
 		</div>
 	);
 };
 
-export const Controlled = ControlledTemplate.bind( {} );
-Controlled.args = {
+/**
+ * The `renderSelectedValue` prop can be used to customize how the selected value
+ * is rendered in the dropdown trigger.
+ */
+export const CustomSelectedValue = Template.bind( {} );
+CustomSelectedValue.args = {
 	label: 'Default Gravatars',
-	renderSelectedValue: renderControlledValue,
+	renderSelectedValue: renderItem,
 	children: (
 		<>
 			{ [ 'mystery-person', 'identicon', 'wavatar', 'retro' ].map(
 				( option ) => (
 					<CustomSelectItem key={ option } value={ option }>
-						{ renderControlledValue( option ) }
+						{ renderItem( option ) }
 					</CustomSelectItem>
 				)
 			) }

package/src/custom-select-control-v2/stories/legacy.story.tsx

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CustomSelect from '../legacy-component';
+
+const meta: Meta< typeof CustomSelect > = {
+	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
+	component: CustomSelect,
+	argTypes: {
+		onChange: { control: { type: null } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		badges: [ 'wip' ],
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+const Template: StoryFn< typeof CustomSelect > = ( props ) => {
+	const [ fontSize, setFontSize ] = useState( props.options[ 0 ] );
+
+	const onChange: React.ComponentProps<
+		typeof CustomSelect
+	>[ 'onChange' ] = ( changeObject ) => {
+		setFontSize( changeObject.selectedItem );
+		props.onChange?.( changeObject );
+	};
+
+	return (
+		<CustomSelect { ...props } onChange={ onChange } value={ fontSize } />
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Label text',
+	options: [
+		{
+			key: 'small',
+			name: 'Small',
+			style: { fontSize: '50%' },
+			__experimentalHint: '50%',
+		},
+		{
+			key: 'normal',
+			name: 'Normal',
+			style: { fontSize: '100%' },
+			className: 'can-apply-custom-class-to-option',
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			style: { fontSize: '200%' },
+		},
+		{
+			key: 'huge',
+			name: 'Huge',
+			style: { fontSize: '300%' },
+		},
+	],
+};