@wordpress/components 28.0.3 → 28.2.0

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

@@ -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 legacyProps = {
 	label: 'label!',
@@ -26,7 +30,7 @@ const legacyProps = {
 		{
 			key: 'flower2',
 			name: 'crimson clover',
-			className: customClass,
+			className: customClassName,
 		},
 		{
 			key: 'flower3',
@@ -35,33 +39,43 @@ const legacyProps = {
 		{
 			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,
-	onChange,
+	onChange: onChangeProp,
 	...restProps
 }: React.ComponentProps< typeof UncontrolledCustomSelectControl > ) => {
-	const [ value, setValue ] = useState( options[ 0 ] );
+	const [ value, setValue ] = useState( restProps.value ?? options[ 0 ] );
+
+	const onChange: typeof onChangeProp = ( changeObject ) => {
+		onChangeProp?.( changeObject );
+		setValue( changeObject.selectedItem );
+	};
+
 	return (
 		<UncontrolledCustomSelectControl
 			{ ...restProps }
 			options={ options }
-			onChange={ ( args: any ) => {
-				onChange?.( args );
-				setValue( args.selectedItem );
-			} }
+			onChange={ onChange }
 			value={ options.find(
 				( option: any ) => option.key === value.key
 			) }
@@ -69,12 +83,87 @@ const ControlledCustomSelectControl = ( {
 	);
 };
 
+it( 'Should apply external controlled updates', async () => {
+	const mockOnChange = jest.fn();
+	const { rerender } = render(
+		<UncontrolledCustomSelectControl
+			{ ...legacyProps }
+			value={ legacyProps.options[ 0 ] }
+			onChange={ mockOnChange }
+		/>
+	);
+
+	const currentSelectedItem = screen.getByRole( 'combobox', {
+		expanded: false,
+	} );
+
+	expect( currentSelectedItem ).toHaveTextContent(
+		legacyProps.options[ 0 ].name
+	);
+
+	expect( mockOnChange ).not.toHaveBeenCalled();
+
+	rerender(
+		<UncontrolledCustomSelectControl
+			{ ...legacyProps }
+			value={ legacyProps.options[ 1 ] }
+		/>
+	);
+
+	expect( currentSelectedItem ).toHaveTextContent(
+		legacyProps.options[ 1 ].name
+	);
+
+	// Necessary to wait for onChange to potentially fire
+	await sleep();
+
+	expect( mockOnChange ).not.toHaveBeenCalled();
+} );
+
 describe.each( [
 	[ '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', async () => {
+		const mockOnChange = jest.fn();
+		render( <Component { ...legacyProps } onChange={ mockOnChange } /> );
+
+		expect(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		).toHaveTextContent( legacyProps.options[ 0 ].name );
+
+		// Necessary to wait for onChange to potentially fire
+		await sleep();
+
+		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
+				{ ...legacyProps }
+				onChange={ mockOnChange }
+				value={ legacyProps.options[ 3 ] }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		).toHaveTextContent( legacyProps.options[ 3 ].name );
+
+		// Necessary to wait for onChange to potentially fire
+		await sleep();
+
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
 	it( 'Should replace the initial selection when a new item is selected', async () => {
 		render( <Component { ...legacyProps } /> );
 
@@ -148,7 +237,7 @@ describe.each( [
 		// assert against filtered array
 		itemsWithClass.map( ( { name } ) =>
 			expect( screen.getByRole( 'option', { name } ) ).toHaveClass(
-				customClass
+				customClassName
 			)
 		);
 
@@ -160,15 +249,12 @@ 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 customStyles =
-			'background-color: rgb(127, 255, 212); rotate: 13deg;';
-
 		render( <Component { ...legacyProps } /> );
 
 		await click(
@@ -244,7 +330,7 @@ describe.each( [
 				screen.getByRole( 'combobox', {
 					expanded: false,
 				} )
-			).toHaveTextContent( /hint/i )
+			).toHaveTextContent( 'Hint' )
 		);
 	} );
 
@@ -281,39 +367,27 @@ describe.each( [
 			} )
 		);
 
-		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( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenLastCalledWith(
 			expect.objectContaining( {
 				inputValue: '',
 				isOpen: false,
 				selectedItem: expect.objectContaining( {
 					name: 'aquamarine',
 				} ),
-				type: '',
+				type: expect.any( String ),
 			} )
 		);
 	} );
 
 	it( 'Should return selectedItem object when specified onChange', async () => {
-		const mockOnChange = jest.fn(
-			( { selectedItem } ) => selectedItem.key
-		);
+		const mockOnChange = jest.fn();
 
 		render( <Component { ...legacyProps } onChange={ mockOnChange } /> );
 
@@ -328,10 +402,85 @@ describe.each( [
 		await type( 'p' );
 		await press.Enter();
 
-		expect( mockOnChange ).toHaveReturnedWith( 'poppy' );
+		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 onChangeMock = jest.fn();
+
+		render( <Component { ...legacyProps } onChange={ onChangeMock } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await 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 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',
+				} ),
+			} )
+		);
 	} );
 
 	describe( 'Keyboard behavior and accessibility', () => {
+		// skip reason: legacy v2 doesn't currently implement this behavior
+		it.skip( 'Captures the keypress event and does not let it propagate', async () => {
+			const onKeyDown = jest.fn();
+
+			render(
+				<div
+					// This role="none" is required to prevent an eslint warning about accessibility.
+					role="none"
+					onKeyDown={ onKeyDown }
+				>
+					<Component { ...legacyProps } />
+				</div>
+			);
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+			await click( currentSelectedItem );
+
+			const customSelect = screen.getByRole( 'listbox', {
+				name: 'label!',
+			} );
+			expect( customSelect ).toHaveFocus();
+			await press.Enter();
+
+			expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
+		} );
+
 		it( 'Should be able to change selection using keyboard', async () => {
 			render( <Component { ...legacyProps } /> );
 
@@ -353,7 +502,9 @@ describe.each( [
 			await press.ArrowDown();
 			await press.Enter();
 
-			expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+			expect( currentSelectedItem ).toHaveTextContent(
+				legacyProps.options[ 1 ].name
+			);
 		} );
 
 		it( 'Should be able to type characters to select matching options', async () => {
@@ -387,7 +538,9 @@ describe.each( [
 			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
-			expect( currentSelectedItem ).toHaveTextContent( 'violets' );
+			expect( currentSelectedItem ).toHaveTextContent(
+				legacyProps.options[ 0 ].name
+			);
 
 			// Ideally we would test a multi-character typeahead, but anything more than a single character is flaky
 			await type( 'a' );
@@ -456,5 +609,34 @@ describe.each( [
 				} )
 			).toBeVisible();
 		} );
+
+		it( 'Should call custom event handlers', async () => {
+			const onFocusMock = jest.fn();
+			const onBlurMock = jest.fn();
+
+			render(
+				<>
+					<Component
+						{ ...legacyProps }
+						onFocus={ onFocusMock }
+						onBlur={ onBlurMock }
+					/>
+					<button>Focus stop</button>
+				</>
+			);
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( onFocusMock ).toHaveBeenCalledTimes( 1 );
+
+			await press.Tab();
+			expect( currentSelectedItem ).not.toHaveFocus();
+			expect( onBlurMock ).toHaveBeenCalledTimes( 1 );
+		} );
 	} );
 } );

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

@@ -10,16 +10,27 @@ import styled from '@emotion/styled';
  */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
+import { chevronIconSize } from '../select-control/styles/select-control-styles';
 import type { CustomSelectButtonSize } from './types';
 
 const ITEM_PADDING = space( 2 );
 
+const truncateStyles = css`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;
+
 export const WithHintWrapper = styled.div`
 	display: flex;
 	justify-content: space-between;
 	flex: 1;
 `;
 
+export const SelectedExperimentalHintWrapper = styled.div`
+	${ truncateStyles }
+`;
+
 export const SelectedExperimentalHintItem = styled.span`
 	color: ${ COLORS.theme.gray[ 600 ] };
 	margin-inline-start: ${ space( 2 ) };
@@ -55,19 +66,18 @@ export const Select = styled( Ariakit.Select, {
 		const sizes = {
 			compact: {
 				[ heightProperty ]: 32,
-				paddingInlineStart: space( 2 ),
-				paddingInlineEnd: space( 1 ),
+				paddingInlineStart: 8,
+				paddingInlineEnd: 8 + chevronIconSize,
 			},
 			default: {
 				[ heightProperty ]: 40,
-				paddingInlineStart: space( 4 ),
-				paddingInlineEnd: space( 3 ),
+				paddingInlineStart: 16,
+				paddingInlineEnd: 16 + chevronIconSize,
 			},
 			small: {
 				[ heightProperty ]: 24,
-				paddingInlineStart: space( 2 ),
-				paddingInlineEnd: space( 1 ),
-				fontSize: 11,
+				paddingInlineStart: 8,
+				paddingInlineEnd: 8 + chevronIconSize,
 			},
 		};
 
@@ -75,13 +85,14 @@ export const Select = styled( Ariakit.Select, {
 	};
 
 	return css`
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
+		display: block;
 		background-color: ${ COLORS.theme.background };
 		border: none;
+		color: ${ COLORS.theme.foreground };
 		cursor: pointer;
+		font-family: inherit;
 		font-size: ${ CONFIG.fontSize };
+		text-align: left;
 		width: 100%;
 
 		&[data-focus-visible] {
@@ -89,6 +100,7 @@ export const Select = styled( Ariakit.Select, {
 		}
 
 		${ getSize() }
+		${ ! hasCustomRenderProp && truncateStyles }
 	`;
 } );
 

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

@@ -79,6 +79,7 @@ type LegacyOption = {
 	style?: React.CSSProperties;
 	className?: string;
 	__experimentalHint?: string;
+	[ key: string ]: any;
 };
 
 /**

package/src/drop-zone/index.tsx

@@ -10,86 +10,14 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { upload, Icon } from '@wordpress/icons';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
-import {
-	__experimentalUseDropZone as useDropZone,
-	useReducedMotion,
-} from '@wordpress/compose';
+import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import {
-	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
-} from '../animation';
 import type { DropType, DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
-const backdrop = {
-	hidden: { opacity: 0 },
-	show: {
-		opacity: 1,
-		transition: {
-			type: 'tween',
-			duration: 0.2,
-			delay: 0,
-			delayChildren: 0.1,
-		},
-	},
-	exit: {
-		opacity: 0,
-		transition: {
-			duration: 0.2,
-			delayChildren: 0,
-		},
-	},
-};
-
-const foreground = {
-	hidden: { opacity: 0, scale: 0.9 },
-	show: {
-		opacity: 1,
-		scale: 1,
-		transition: {
-			duration: 0.1,
-		},
-	},
-	exit: { opacity: 0, scale: 0.9 },
-};
-
-function DropIndicator( { label }: { label?: string } ) {
-	const disableMotion = useReducedMotion();
-	const children = (
-		<motion.div
-			variants={ backdrop }
-			initial={ disableMotion ? 'show' : 'hidden' }
-			animate="show"
-			exit={ disableMotion ? 'show' : 'exit' }
-			className="components-drop-zone__content"
-			// Without this, when this div is shown,
-			// Safari calls a onDropZoneLeave causing a loop because of this bug
-			// https://bugs.webkit.org/show_bug.cgi?id=66547
-			style={ { pointerEvents: 'none' } }
-		>
-			<motion.div variants={ foreground }>
-				<Icon
-					icon={ upload }
-					className="components-drop-zone__content-icon"
-				/>
-				<span className="components-drop-zone__content-text">
-					{ label ? label : __( 'Drop files to upload' ) }
-				</span>
-			</motion.div>
-		</motion.div>
-	);
-
-	if ( disableMotion ) {
-		return children;
-	}
-
-	return <AnimatePresence>{ children }</AnimatePresence>;
-}
-
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
  *
@@ -135,7 +63,7 @@ export function DropZoneComponent( {
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-			 * The order of the checks is important to recognise the HTML drop.
+			 * The order of the checks is important to recognize the HTML drop.
 			 */
 			if ( html && onHTMLDrop ) {
 				onHTMLDrop( html );
@@ -152,7 +80,7 @@ export function DropZoneComponent( {
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-			 * The order of the checks is important to recognise the HTML drop.
+			 * The order of the checks is important to recognize the HTML drop.
 			 */
 			if ( event.dataTransfer?.types.includes( 'text/html' ) ) {
 				_type = 'html';
@@ -181,12 +109,15 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
+
 	const classes = clsx( 'components-drop-zone', className, {
 		'is-active':
 			( isDraggingOverDocument || isDraggingOverElement ) &&
 			( ( type === 'file' && onFilesDrop ) ||
 				( type === 'html' && onHTMLDrop ) ||
 				( type === 'default' && onDrop ) ),
+		'has-dragged-out': ! isDraggingOverElement,
+		// Keeping the following classnames for legacy purposes
 		'is-dragging-over-document': isDraggingOverDocument,
 		'is-dragging-over-element': isDraggingOverElement,
 		[ `is-dragging-${ type }` ]: !! type,
@@ -194,7 +125,17 @@ export function DropZoneComponent( {
 
 	return (
 		<div { ...restProps } ref={ ref } className={ classes }>
-			{ isDraggingOverElement && <DropIndicator label={ label } /> }
+			<div className="components-drop-zone__content">
+				<div className="components-drop-zone__content-inner">
+					<Icon
+						icon={ upload }
+						className="components-drop-zone__content-icon"
+					/>
+					<span className="components-drop-zone__content-text">
+						{ label ? label : __( 'Drop files to upload' ) }
+					</span>
+				</div>
+			</div>
 		</div>
 	);
 }

package/src/drop-zone/style.scss

@@ -13,23 +13,58 @@
 		opacity: 1;
 		visibility: visible;
 	}
-}
 
-.components-drop-zone__content {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 100%;
-	width: 100%;
-	display: flex;
-	background-color: $components-color-accent;
-	align-items: center;
-	justify-content: center;
-	z-index: z-index(".components-drop-zone__content");
-	text-align: center;
-	color: $white;
+	.components-drop-zone__content {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100%;
+		width: 100%;
+		display: flex;
+		background-color: $components-color-accent;
+		align-items: center;
+		justify-content: center;
+		z-index: z-index(".components-drop-zone__content");
+		text-align: center;
+		color: $white;
+		opacity: 0;
+
+		// Without this, when this div is shown,
+		// Safari calls a onDropZoneLeave causing a loop because of this bug
+		// https://bugs.webkit.org/show_bug.cgi?id=66547
+		pointer-events: none;
+	}
+
+	.components-drop-zone__content-inner {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+
+	&.is-active:not(.has-dragged-out) {
+		.components-drop-zone__content {
+			opacity: 1;
+
+			transition: opacity 0.2s ease-in-out;
+			@media (prefers-reduced-motion) {
+				transition: none;
+			}
+		}
+
+		.components-drop-zone__content-inner {
+			opacity: 1;
+			transform: scale(1);
+
+			transition:
+				opacity 0.1s ease-in-out 0.1s,
+				transform 0.1s ease-in-out 0.1s;
+
+			@media (prefers-reduced-motion) {
+				transition: none;
+			}
+		}
+	}
 }
 
 .components-drop-zone__content-icon,

package/src/radio-control/index.tsx

@@ -73,7 +73,7 @@ export function RadioControl(
 			help={ help }
 			className={ clsx( className, 'components-radio-control' ) }
 		>
-			<VStack spacing={ 1 }>
+			<VStack spacing={ 3 }>
 				{ options.map( ( option, index ) => (
 					<div
 						key={ `${ id }-${ index }` }

package/src/radio-control/style.scss

@@ -7,7 +7,7 @@
 	@include radio-control;
 
 	display: inline-flex;
-	margin: 0 6px 0 0;
+	margin: 0 $grid-unit-10 0 0;
 	padding: 0;
 	appearance: none;
 	cursor: pointer;