@wordpress/components 20.0.1-next.d6164808d3.0 → 20.0.2-next.957ca95e4c.0

package/src/dropdown-menu/test/index.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { fireEvent, render } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
-import { DOWN } from '@wordpress/keycodes';
 import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 
 /**
@@ -15,19 +15,27 @@ import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 import DropdownMenu from '../';
 import { MenuItem } from '../../';
 
-function getMenuToggleButton( container ) {
-	return container.querySelector( '.components-dropdown-menu__toggle' );
-}
-function getNavigableMenu( container ) {
-	return container.querySelector( '.components-dropdown-menu__menu' );
-}
-
 describe( 'DropdownMenu', () => {
-	const children = ( { onClose } ) => <MenuItem onClick={ onClose } />;
+	it( 'should not render when neither controls nor children are assigned', () => {
+		render( <DropdownMenu /> );
+
+		// The button toggle should not even be rendered
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render when controls are empty and children is not specified', () => {
+		render( <DropdownMenu controls={ [] } /> );
+
+		// The button toggle should not even be rendered
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should open menu when pressing arrow down on the toggle and the controls prop is used to define menu items', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-	let controls;
-	beforeEach( () => {
-		controls = [
+		const controls = [
 			{
 				title: 'Up',
 				icon: arrowUp,
@@ -49,62 +57,50 @@ describe( 'DropdownMenu', () => {
 				onClick: jest.fn(),
 			},
 		];
-	} );
 
-	describe( 'basic rendering', () => {
-		it( 'should render a null element when neither controls nor children are assigned', () => {
-			const { container } = render( <DropdownMenu /> );
+		render( <DropdownMenu controls={ controls } /> );
 
-			expect( container.firstChild ).toBeNull();
-		} );
+		// Move focus on the toggle button
+		await user.tab();
 
-		it( 'should render a null element when controls are empty and children is not specified', () => {
-			const { container } = render( <DropdownMenu controls={ [] } /> );
+		await user.keyboard( '[ArrowDown]' );
 
-			expect( container.firstChild ).toBeNull();
+		let menu;
+		await waitFor( () => {
+			menu = screen.getByRole( 'menu' );
+			return expect( menu ).toBeVisible();
 		} );
 
-		it( 'should open menu on arrow down (controls)', () => {
-			const {
-				container: { firstChild: dropdownMenuContainer },
-			} = render( <DropdownMenu controls={ controls } /> );
-
-			const button = getMenuToggleButton( dropdownMenuContainer );
-			button.focus();
-			fireEvent.keyDown( button, {
-				keyCode: DOWN,
-				preventDefault: () => {},
-			} );
-			const menu = getNavigableMenu( dropdownMenuContainer );
-			expect( menu ).toBeTruthy();
-
-			expect(
-				dropdownMenuContainer.querySelectorAll(
-					'.components-dropdown-menu__menu-item'
-				)
-			).toHaveLength( controls.length );
-		} );
+		expect( within( menu ).getAllByRole( 'menuitem' ) ).toHaveLength(
+			controls.length
+		);
+	} );
 
-		it( 'should open menu on arrow down (children)', () => {
-			const {
-				container: { firstChild: dropdownMenuContainer },
-			} = render( <DropdownMenu children={ children } /> );
+	it( 'should open menu when pressing arrow down on the toggle and the children prop is used to define menu items', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-			const button = getMenuToggleButton( dropdownMenuContainer );
-			button.focus();
-			fireEvent.keyDown( button, {
-				keyCode: DOWN,
-				preventDefault: () => {},
-			} );
+		render(
+			<DropdownMenu
+				children={ ( { onClose } ) => <MenuItem onClick={ onClose } /> }
+			/>
+		);
 
-			expect( getNavigableMenu( dropdownMenuContainer ) ).toBeTruthy();
+		const button = screen.getByRole( 'button' );
+		button.focus();
 
-			const menuItem = dropdownMenuContainer.querySelector(
-				'.components-menu-item__button'
-			);
-			fireEvent.click( menuItem );
+		await user.keyboard( '[ArrowDown]' );
 
-			expect( getNavigableMenu( dropdownMenuContainer ) ).toBeNull();
+		let menu;
+		await waitFor( () => {
+			menu = screen.getByRole( 'menu' );
+			return expect( menu ).toBeVisible();
 		} );
+
+		// Clicking the menu item will close the dropdown menu
+		await user.click( within( menu ).getByRole( 'menuitem' ) );
+
+		expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 	} );
 } );

package/src/focal-point-picker/README.md

@@ -18,10 +18,6 @@ const Example = () => {
 	} );
 
 	const url = '/path/to/image';
-	const dimensions = {
-		width: 400,
-		height: 100,
-	};
 
 	/* Example function to render the CSS styles based on Focal Point Picker value */
 	const style = {
@@ -33,9 +29,10 @@ const Example = () => {
 		<>
 			<FocalPointPicker
 				url={ url }
-				dimensions={ dimensions }
 				value={ focalPoint }
-				onChange={ ( focalPoint ) => setFocalPoint( { focalPoint } ) }
+				onDragStart={ setFocalPoint }
+				onDrag={ setFocalPoint }
+				onChange={ setFocalPoint }
 			/>
 			<div style={ style } />
 		</>

package/src/focal-point-picker/controls.js

@@ -18,19 +18,19 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	onChange = noop,
-	percentages = {
+	point = {
 		x: 0.5,
 		y: 0.5,
 	},
 } ) {
-	const valueX = fractionToPercentage( percentages.x );
-	const valueY = fractionToPercentage( percentages.y );
+	const valueX = fractionToPercentage( point.x );
+	const valueY = fractionToPercentage( point.y );
 
 	const handleChange = ( value, axis ) => {
 		const num = parseInt( value, 10 );
 
 		if ( ! isNaN( num ) ) {
-			onChange( { ...percentages, [ axis ]: num / 100 } );
+			onChange( { ...point, [ axis ]: num / 100 } );
 		}
 	};
 

package/src/focal-point-picker/focal-point.js

@@ -13,18 +13,12 @@ import {
  */
 import classnames from 'classnames';
 
-export default function FocalPoint( {
-	coordinates = { left: '50%', top: '50%' },
-	...props
-} ) {
+export default function FocalPoint( { left = '50%', top = '50%', ...props } ) {
 	const classes = classnames(
 		'components-focal-point-picker__icon_container'
 	);
 
-	const style = {
-		left: coordinates.left,
-		top: coordinates.top,
-	};
+	const style = { left, top };
 
 	return (
 		<FocalPointWrapper { ...props } className={ classes } style={ style }>

package/src/focal-point-picker/grid.js

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -11,25 +6,16 @@ import {
 	GridLineX,
 	GridLineY,
 } from './styles/focal-point-picker-style';
-import { useUpdateEffect } from '../utils/hooks';
-
-export default function FocalPointPickerGrid( {
-	bounds = {},
-	value,
-	...props
-} ) {
-	const animationProps = useRevealAnimation( value );
-	const style = {
-		width: bounds.width,
-		height: bounds.height,
-	};
 
+export default function FocalPointPickerGrid( { bounds, ...props } ) {
 	return (
 		<GridView
 			{ ...props }
-			{ ...animationProps }
 			className="components-focal-point-picker__grid"
-			style={ style }
+			style={ {
+				width: bounds.width,
+				height: bounds.height,
+			} }
 		>
 			<GridLineX style={ { top: '33%' } } />
 			<GridLineX style={ { top: '66%' } } />
@@ -38,25 +24,3 @@ export default function FocalPointPickerGrid( {
 		</GridView>
 	);
 }
-
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-function useRevealAnimation( value ) {
-	const [ isActive, setIsActive ] = useState( false );
-
-	useUpdateEffect( () => {
-		setIsActive( true );
-		const timeout = window.setTimeout( () => {
-			setIsActive( false );
-		}, 600 );
-
-		return () => window.clearTimeout( timeout );
-	}, [ value ] );
-
-	return {
-		isActive,
-	};
-}