@wordpress/components 20.0.0 → 21.0.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/flex/flex/hook.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
 import { space } from '../../ui/utils/space';
 import * as styles from '../styles';
-import { useCx, rtl } from '../../utils';
+import { useCx } from '../../utils';
 import type { FlexProps } from '../types';
 
 function useDeprecatedProps(
@@ -61,72 +61,24 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 		typeof direction === 'string' && direction.includes( 'reverse' );
 
 	const cx = useCx();
-	const rtlWatchResult = rtl.watch();
 
 	const classes = useMemo( () => {
-		const sx: {
-			Base?: SerializedStyles;
-			Items?: SerializedStyles;
-			WrapItems?: SerializedStyles;
-		} = {};
-
-		sx.Base = css( {
+		const base = css( {
 			alignItems: isColumn ? 'normal' : align,
 			flexDirection: direction,
 			flexWrap: wrap ? 'wrap' : undefined,
+			gap: space( gap ),
 			justifyContent: justify,
 			height: isColumn && expanded ? '100%' : undefined,
 			width: ! isColumn && expanded ? '100%' : undefined,
-			marginBottom: wrap ? `calc(${ space( gap ) } * -1)` : undefined,
 		} );
 
-		/**
-		 * Workaround to optimize DOM rendering.
-		 * We'll enhance alignment with naive parent flex assumptions.
-		 *
-		 * Trade-off:
-		 * Far less DOM less. However, UI rendering is not as reliable.
-		 */
-		sx.Items = css`
-			> * + *:not( marquee ) {
-				margin-top: ${ isColumn ? space( gap ) : undefined };
-				${ rtl( {
-					marginLeft:
-						! isColumn && ! isReverse ? space( gap ) : undefined,
-					marginRight:
-						! isColumn && isReverse ? space( gap ) : undefined,
-				} )() }
-			}
-		`;
-
-		sx.WrapItems = css`
-			> *:not( marquee ) {
-				margin-bottom: ${ space( gap ) };
-				${ rtl( {
-					marginLeft:
-						! isColumn && isReverse ? space( gap ) : undefined,
-					marginRight:
-						! isColumn && ! isReverse ? space( gap ) : undefined,
-				} )() }
-			}
-
-			> *:last-child:not( marquee ) {
-				${ rtl( {
-					marginLeft: ! isColumn && isReverse ? 0 : undefined,
-					marginRight: ! isColumn && ! isReverse ? 0 : undefined,
-				} )() }
-			}
-		`;
-
 		return cx(
 			styles.Flex,
-			sx.Base,
-			wrap ? sx.WrapItems : sx.Items,
+			base,
 			isColumn ? styles.ItemsColumn : styles.ItemsRow,
 			className
 		);
-		// rtlWatchResult is needed to refresh styles when the writing direction changes
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		align,
 		className,
@@ -138,7 +90,6 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 		isReverse,
 		justify,
 		wrap,
-		rtlWatchResult,
 	] );
 
 	return { ...otherProps, className: classes, isColumn };

package/src/flex/test/__snapshots__/index.tsx.snap

@@ -7,25 +7,25 @@ Snapshot Diff:
 
 @@ -1,22 +1,18 @@
   <div
-    class="components-flex css-1giw1wa-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+    class="components-flex css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
 -   data-testid="flex"
 +   data-testid="base-flex"
     data-wp-c16t="true"
     data-wp-component="Flex"
   >
     <div
-      class="components-flex-item css-mw3lhz-View-Item-sx-Base em57xhy0"
+      class="components-flex-item css-mw3lhz-View-Item-sx-Base e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
     >
       Item
     </div>
 -   <div
--     class="css-1mm2cvy-View em57xhy0"
+-     class="css-1mm2cvy-View e19lxcc00"
 -   />
 -   <div />
     <div
-      class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block em57xhy0"
+      class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
     >
@@ -53,9 +53,9 @@ Snapshot Diff:
 +     "align-items": "center",
       "display": "flex",
       "flex-direction": "row",
+      "gap": "calc(4px * 2)",
       "justify-content": "space-between",
       "width": "100%",
-    },
 `;
 
 exports[`props should render correctly 1`] = `
@@ -71,16 +71,13 @@ exports[`props should render correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   width: 100%;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-width: 0;
 }
@@ -147,6 +144,7 @@ Snapshot Diff:
       "align-items": "center",
       "display": "flex",
       "flex-direction": "row",
+      "gap": "calc(4px * 2)",
 -     "justify-content": "flex-start",
 +     "justify-content": "space-between",
       "width": "100%",
@@ -161,9 +159,6 @@ Snapshot Diff:
 
   Array [
     Object {
--     "margin-left": "calc(4px * 2)",
--   },
--   Object {
 -     "min-width": "0",
 -   },
 -   Object {
@@ -176,9 +171,6 @@ Snapshot Diff:
       "min-height": "0",
 +     "min-width": "0",
 +   },
-+   Object {
-+     "margin-left": "calc(4px * 5)",
-+   },
 +   Object {
       "min-width": "0",
     },

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

@@ -2,8 +2,8 @@
 
 Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image. This component addresses a specific problem: with large background images it is common to see undesirable crops, especially when viewing on smaller viewports such as mobile phones. This component allows the selection of the point with the most important visual information and returns it as a pair of numbers between 0 and 1. This value can be easily converted into the CSS `background-position` attribute, and will ensure that the focal point is never cropped out, regardless of viewport.
 
-Example focal point picker value: `{ x: 0.5, y: 0.1 }`
-Corresponding CSS: `background-position: 50% 10%;`
+- Example focal point picker value: `{ x: 0.5, y: 0.1 }`
+- Corresponding CSS: `background-position: 50% 10%;`
 
 ## Usage
 
@@ -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.tsx

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	StyledUnitControl,
+	ControlWrapper,
+} from './styles/focal-point-picker-style';
+import { fractionToPercentage } from './utils';
+import type {
+	UnitControlProps,
+	UnitControlOnChangeCallback,
+} from '../unit-control/types';
+import type { FocalPointAxis, FocalPointPickerControlsProps } from './types';
+
+const TEXTCONTROL_MIN = 0;
+const TEXTCONTROL_MAX = 100;
+const noop = () => {};
+
+export default function FocalPointPickerControls( {
+	__nextHasNoMarginBottom,
+	hasHelpText,
+	onChange = noop,
+	point = {
+		x: 0.5,
+		y: 0.5,
+	},
+}: FocalPointPickerControlsProps ) {
+	const valueX = fractionToPercentage( point.x );
+	const valueY = fractionToPercentage( point.y );
+
+	const handleChange = (
+		value: Parameters< UnitControlOnChangeCallback >[ 0 ],
+		axis: FocalPointAxis
+	) => {
+		if ( value === undefined ) return;
+
+		const num = parseInt( value, 10 );
+
+		if ( ! isNaN( num ) ) {
+			onChange( { ...point, [ axis ]: num / 100 } );
+		}
+	};
+
+	return (
+		<ControlWrapper
+			className="focal-point-picker__controls"
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			hasHelpText={ hasHelpText }
+		>
+			<FocalPointUnitControl
+				label={ __( 'Left' ) }
+				value={ [ valueX, '%' ].join( '' ) }
+				onChange={
+					( ( next ) =>
+						handleChange(
+							next,
+							'x'
+						) ) as UnitControlOnChangeCallback
+				}
+				dragDirection="e"
+			/>
+			<FocalPointUnitControl
+				label={ __( 'Top' ) }
+				value={ [ valueY, '%' ].join( '' ) }
+				onChange={
+					( ( next ) =>
+						handleChange(
+							next,
+							'y'
+						) ) as UnitControlOnChangeCallback
+				}
+				dragDirection="s"
+			/>
+		</ControlWrapper>
+	);
+}
+
+function FocalPointUnitControl( props: UnitControlProps ) {
+	return (
+		<StyledUnitControl
+			className="focal-point-picker__controls-position-unit-control"
+			labelPosition="top"
+			max={ TEXTCONTROL_MAX }
+			min={ TEXTCONTROL_MIN }
+			units={ [ { value: '%', label: '%' } ] }
+			{ ...props }
+		/>
+	);
+}

package/src/focal-point-picker/{focal-point.js → focal-point.tsx}

@@ -12,19 +12,19 @@ import {
  * External dependencies
  */
 import classnames from 'classnames';
+import type { FocalPointProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 export default function FocalPoint( {
-	coordinates = { left: '50%', top: '50%' },
+	left = '50%',
+	top = '50%',
 	...props
-} ) {
+}: WordPressComponentProps< FocalPointProps, 'div' > ) {
 	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.tsx

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import {
+	GridView,
+	GridLineX,
+	GridLineY,
+} from './styles/focal-point-picker-style';
+import type { FocalPointPickerGridProps } from './types';
+import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+
+export default function FocalPointPickerGrid( {
+	bounds,
+	...props
+}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {
+	return (
+		<GridView
+			{ ...props }
+			className="components-focal-point-picker__grid"
+			style={ {
+				width: bounds.width,
+				height: bounds.height,
+			} }
+		>
+			<GridLineX style={ { top: '33%' } } />
+			<GridLineX style={ { top: '66%' } } />
+			<GridLineY style={ { left: '33%' } } />
+			<GridLineY style={ { left: '66%' } } />
+		</GridView>
+	);
+}