@wordpress/components 22.1.0 → 23.1.0

package/src/palette-edit/index.js

@@ -6,7 +6,7 @@ import { kebabCase } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
 import {
@@ -89,6 +89,50 @@ export function getNameForPosition( elements, slugPrefix ) {
 	);
 }
 
+function ColorPickerPopover( {
+	isGradient,
+	element,
+	onChange,
+	onClose = () => {},
+} ) {
+	return (
+		<Popover
+			placement="left-start"
+			offset={ 20 }
+			className="components-palette-edit__popover"
+			onClose={ onClose }
+		>
+			{ ! isGradient && (
+				<ColorPicker
+					color={ element.color }
+					enableAlpha
+					onChange={ ( newColor ) =>
+						onChange( {
+							...element,
+							color: newColor,
+						} )
+					}
+				/>
+			) }
+			{ isGradient && (
+				<div className="components-palette-edit__popover-gradient-picker">
+					<CustomGradientPicker
+						__nextHasNoMargin
+						__experimentalIsRenderedInSidebar
+						value={ element.gradient }
+						onChange={ ( newGradient ) =>
+							onChange( {
+								...element,
+								gradient: newGradient,
+							} )
+						}
+					/>
+				</div>
+			) }
+		</Popover>
+	);
+}
+
 function Option( {
 	canOnlyChangeValues,
 	element,
@@ -155,39 +199,11 @@ function Option( {
 				) }
 			</HStack>
 			{ isEditing && (
-				<Popover
-					placement="left-start"
-					offset={ 20 }
-					className="components-palette-edit__popover"
-				>
-					{ ! isGradient && (
-						<ColorPicker
-							color={ value }
-							enableAlpha
-							onChange={ ( newColor ) =>
-								onChange( {
-									...element,
-									color: newColor,
-								} )
-							}
-						/>
-					) }
-					{ isGradient && (
-						<div className="components-palette-edit__popover-gradient-picker">
-							<CustomGradientPicker
-								__nextHasNoMargin
-								__experimentalIsRenderedInSidebar
-								value={ value }
-								onChange={ ( newGradient ) =>
-									onChange( {
-										...element,
-										gradient: newGradient,
-									} )
-								}
-							/>
-						</div>
-					) }
-				</Popover>
+				<ColorPickerPopover
+					isGradient={ isGradient }
+					onChange={ onChange }
+					element={ element }
+				/>
 			) }
 		</PaletteItem>
 	);
@@ -313,6 +329,20 @@ export default function PaletteEdit( {
 		! elements[ editingElement ].slug;
 	const elementsLength = elements.length;
 	const hasElements = elementsLength > 0;
+	const debounceOnChange = useDebounce( onChange, 100 );
+	const onSelectPaletteItem = useCallback(
+		( value, newEditingElementIndex ) => {
+			const selectedElement = elements[ newEditingElementIndex ];
+			const key = isGradient ? 'gradient' : 'color';
+			// Ensures that the index returned matches a known element value.
+			if ( !! selectedElement && selectedElement[ key ] === value ) {
+				setEditingElement( newEditingElementIndex );
+			} else {
+				setIsEditing( true );
+			}
+		},
+		[ isGradient, elements ]
+	);
 
 	return (
 		<PaletteEditStyles>
@@ -391,9 +421,7 @@ export default function PaletteEdit( {
 													} }
 													className="components-palette-edit__menu-button"
 												>
-													{ isGradient
-														? __( 'Edit gradients' )
-														: __( 'Edit colors' ) }
+													{ __( 'Show details' ) }
 												</Button>
 											) }
 											{ ! canOnlyChangeValues && (
@@ -454,19 +482,40 @@ export default function PaletteEdit( {
 							isGradient={ isGradient }
 						/>
 					) }
+					{ ! isEditing && editingElement !== null && (
+						<ColorPickerPopover
+							isGradient={ isGradient }
+							onClose={ () => setEditingElement( null ) }
+							onChange={ ( newElement ) => {
+								debounceOnChange(
+									elements.map(
+										( currentElement, currentIndex ) => {
+											if (
+												currentIndex === editingElement
+											) {
+												return newElement;
+											}
+											return currentElement;
+										}
+									)
+								);
+							} }
+							element={ elements[ editingElement ] }
+						/>
+					) }
 					{ ! isEditing &&
 						( isGradient ? (
 							<GradientPicker
 								__nextHasNoMargin
 								gradients={ gradients }
-								onChange={ () => {} }
+								onChange={ onSelectPaletteItem }
 								clearable={ false }
 								disableCustomGradients={ true }
 							/>
 						) : (
 							<ColorPalette
 								colors={ colors }
-								onChange={ () => {} }
+								onChange={ onSelectPaletteItem }
 								clearable={ false }
 								disableCustomColors={ true }
 							/>

package/src/palette-edit/test/index.js

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent, screen } from '@testing-library/react';
+
 /**
  * Internal dependencies
  */
-import { getNameForPosition } from '../';
+import PaletteEdit, { getNameForPosition } from '../';
 
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
@@ -61,3 +66,22 @@ describe( 'getNameForPosition', () => {
 		);
 	} );
 } );
+
+describe( 'PaletteEdit', () => {
+	const defaultProps = {
+		gradients: false,
+		colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ],
+		onChange: jest.fn(),
+		paletteLabel: 'Test label',
+		emptyMessage: 'Test empty message',
+		canOnlyChangeValues: true,
+		canReset: true,
+		slugPrefix: '',
+	};
+
+	it( 'opens color selector for color palettes', () => {
+		render( <PaletteEdit { ...defaultProps } /> );
+		fireEvent.click( screen.getByLabelText( 'Color: Base' ) );
+		expect( screen.getByLabelText( 'Hex color' ) ).toBeInTheDocument();
+	} );
+} );

package/src/panel/test/__snapshots__/body.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PanelBody basic rendering should render an empty div with the matching className 1`] = `
+<div>
+  <div
+    class="components-panel__body is-opened"
+  />
+</div>
+`;

package/src/panel/test/body.js

@@ -1,154 +1,163 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import { PanelBody } from '../body';
 
-const getPanelBody = ( container ) =>
-	container.querySelector( '.components-panel__body' );
-const getPanelBodyContent = ( container ) =>
-	container.querySelector( '.components-panel__body > div' );
-const getPanelToggle = ( container ) =>
-	container.querySelector( '.components-panel__body-toggle' );
+jest.useFakeTimers();
 
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {
 			const { container } = render( <PanelBody /> );
-			const panelBody = getPanelBody( container );
 
-			expect( panelBody ).toBeTruthy();
-			expect( panelBody.tagName ).toBe( 'DIV' );
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render inner content, if opened', () => {
-			const { container } = render(
-				<PanelBody opened={ true }>
-					<div className="inner-content">Content</div>
+			render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should be opened by default', () => {
-			const { container } = render(
+			render(
 				<PanelBody>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should render as initially opened, if specified', () => {
-			const { container } = render(
-				<PanelBody initialOpen={ true }>
-					<div>Content</div>
+			render(
+				<PanelBody initialOpen>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should call the children function, if specified', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
+			const { rerender } = render(
+				<PanelBody opened>
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			let panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeInTheDocument();
+			expect( panelContent ).not.toBeVisible();
 			expect( panelContent ).toHaveAttribute( 'hidden', '' );
 
 			rerender(
 				<PanelBody opened={ false }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
 				</PanelBody>
 			);
-			panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
 			expect( panelContent ).not.toHaveAttribute( 'hidden' );
 		} );
 	} );
 
 	describe( 'toggling', () => {
 		it( 'should toggle collapse with opened prop', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					<div>Content</div>
+			const { rerender } = render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			let panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
 
 			rerender(
 				<PanelBody opened={ false }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.queryByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).not.toBeInTheDocument();
 
 			rerender(
-				<PanelBody opened={ true }>
-					<div>Content</div>
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.getByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeTruthy();
+			expect( panelContent ).toBeVisible();
 		} );
 
-		it( 'should toggle when clicking header', () => {
-			const { container } = render(
+		it( 'should toggle when clicking header', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
 				<PanelBody title="Panel" initialOpen={ false }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
-			const panelToggle = getPanelToggle( container );
 
-			expect( panelContent ).toBeFalsy();
+			let panelContent = screen.queryByTestId( 'inner-content' );
+			const panelToggle = screen.getByRole( 'button', { name: 'Panel' } );
+
+			expect( panelContent ).not.toBeInTheDocument();
 
-			fireEvent.click( panelToggle );
+			await user.click( panelToggle );
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.getByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeTruthy();
+			expect( panelContent ).toBeVisible();
 
-			fireEvent.click( panelToggle );
+			await user.click( panelToggle );
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.queryByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).not.toBeInTheDocument();
 		} );
 
-		it( 'should pass button props to panel title', () => {
+		it( 'should pass button props to panel title', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 			const mock = jest.fn();
 
-			const { container } = render(
+			render(
 				<PanelBody title="Panel" buttonProps={ { onClick: mock } }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			const panelToggle = getPanelToggle( container );
-
-			fireEvent.click( panelToggle );
+			await user.click( screen.getByRole( 'button', { name: 'Panel' } ) );
 
 			expect( mock ).toHaveBeenCalled();
 		} );

package/src/placeholder/test/index.tsx

@@ -59,6 +59,7 @@ describe( 'Placeholder', () => {
 
 			// Test for empty label. When the label is empty, the only way to
 			// query the div is with `querySelector`.
+			// eslint-disable-next-line testing-library/no-node-access
 			const label = placeholder.querySelector(
 				'.components-placeholder__label'
 			);
@@ -67,6 +68,7 @@ describe( 'Placeholder', () => {
 
 			// Test for non existent instructions. When the instructions is
 			// empty, the only way to query the div is with `querySelector`.
+			// eslint-disable-next-line testing-library/no-node-access
 			const placeholderInstructions = placeholder.querySelector(
 				'.components-placeholder__instructions'
 			);
@@ -84,6 +86,7 @@ describe( 'Placeholder', () => {
 
 			const placeholder = getPlaceholder();
 			const icon = within( placeholder ).getByTestId( 'icon' );
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( icon.parentNode ).toHaveClass(
 				'components-placeholder__label'
 			);

package/src/popover/index.tsx

@@ -472,6 +472,7 @@ const UnforwardedPopover = (
 			placement={ computedPlacement }
 			className={ classnames( 'components-popover', className, {
 				'is-expanded': isExpanded,
+				'is-positioned': x !== null && y !== null,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.
 				[ `is-${
 					computedVariant === 'toolbar'
@@ -488,8 +489,15 @@ const UnforwardedPopover = (
 					? undefined
 					: {
 							position: strategy,
-							left: Number.isNaN( x ) ? 0 : x ?? undefined,
-							top: Number.isNaN( y ) ? 0 : y ?? undefined,
+							top: 0,
+							left: 0,
+							// `x` and `y` are framer-motion specific props and are shorthands
+							// for `translateX` and `translateY`. Currently it is not possible
+							// to use `translateX` and `translateY` because those values would
+							// be overridden by the return value of the
+							// `placementToMotionAnimationProps` function in `AnimatedWrapper`
+							x: Math.round( x ?? 0 ) || undefined,
+							y: Math.round( y ?? 0 ) || undefined,
 					  }
 			}
 		>

package/src/popover/style.scss

@@ -1,7 +1,13 @@
 $arrow-triangle-base-size: 14px;
 
+$shadow-popover-border-default: 0 0 0 $border-width $gray-400;
+$shadow-popover-border-default-alternate: 0 0 0 $border-width $gray-900;
+$shadow-popover-border-top-only: 0 #{-$border-width} 0 0 $gray-400;
+$shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
+
 .components-popover {
 	z-index: z-index(".components-popover");
+	will-change: transform;
 
 	&.is-expanded {
 		position: fixed;
@@ -15,26 +21,20 @@ $arrow-triangle-base-size: 14px;
 
 .components-popover__content {
 	background: $white;
-	// Using outline instead of border to avoid impacting
-	// popover computations.
-	outline: $border-width solid $gray-400;
-	box-shadow: $shadow-popover;
+	box-shadow: $shadow-popover-border-default, $shadow-popover;
 	border-radius: $radius-block-ui;
 	box-sizing: border-box;
 	width: min-content;
 
 	// Alternate treatment for popovers that put them at elevation zero with high contrast.
 	.is-alternate & {
-		outline: $border-width solid $gray-900;
-		box-shadow: none;
+		box-shadow: $shadow-popover-border-default-alternate;
 	}
 
 	// A style that gives the popover no visible ui.
 	.is-unstyled & {
 		background: none;
-		border: none;
 		border-radius: 0;
-		outline: none;
 		box-shadow: none;
 	}
 
@@ -43,9 +43,10 @@ $arrow-triangle-base-size: 14px;
 		height: calc(100% - #{ $panel-header-height });
 		overflow-y: visible;
 		width: auto;
-		border: none;
-		outline: none;
-		border-top: $border-width solid $gray-900;
+		box-shadow: $shadow-popover-border-top-only;
+	}
+	.components-popover.is-expanded.is-alternate & {
+		box-shadow: $shadow-popover-border-top-only-alternate;
 	}
 }
 

package/src/popover/test/index.tsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
-import type { CSSProperties } from 'react';
+import { act, render, screen } from '@testing-library/react';
+import type { CSSProperties, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
@@ -91,22 +91,30 @@ const ALL_POSITIONS_TO_EXPECTED_PLACEMENTS: PositionToPlacementTuple[] = [
 
 describe( 'Popover', () => {
 	describe( 'Component', () => {
+		// Render UI and then wait for the `floating-ui` effects inside `Popover` to finish running
+		// See also: https://floating-ui.com/docs/react-dom#testing
+		async function renderAsync( ui: ReactElement ) {
+			const view = render( ui );
+			await act( () => Promise.resolve() );
+			return view;
+		}
+
 		describe( 'basic behavior', () => {
-			it( 'should render content', () => {
-				render( <Popover>Hello</Popover> );
+			it( 'should render content', async () => {
+				await renderAsync( <Popover>Hello</Popover> );
 
 				expect( screen.getByText( 'Hello' ) ).toBeInTheDocument();
 			} );
 
-			it( 'should forward additional props to portaled element', () => {
-				render( <Popover role="tooltip">Hello</Popover> );
+			it( 'should forward additional props to portaled element', async () => {
+				await renderAsync( <Popover role="tooltip">Hello</Popover> );
 
 				expect( screen.getByRole( 'tooltip' ) ).toBeInTheDocument();
 			} );
 		} );
 
 		describe( 'anchor', () => {
-			it( 'should render correctly when anchor is provided', () => {
+			it( 'should render correctly when anchor is provided', async () => {
 				const PopoverWithAnchor = ( args: PopoverProps ) => {
 					// Use internal state instead of a ref to make sure that the component
 					// re-renders when the popover's anchor updates.
@@ -121,7 +129,7 @@ describe( 'Popover', () => {
 					);
 				};
 
-				render(
+				await renderAsync(
 					<PopoverWithAnchor>Popover content</PopoverWithAnchor>
 				);
 
@@ -132,16 +140,18 @@ describe( 'Popover', () => {
 		} );
 
 		describe( 'focus behavior', () => {
-			it( 'should focus the popover by default when opened', () => {
-				render( <Popover>Popover content</Popover> );
+			it( 'should focus the popover by default when opened', async () => {
+				await renderAsync(
+					<Popover data-testid="popover-element">
+						Popover content
+					</Popover>
+				);
 
-				expect(
-					screen.getByText( 'Popover content' ).parentElement
-				).toHaveFocus();
+				expect( screen.getByTestId( 'popover-element' ) ).toHaveFocus();
 			} );
 
-			it( 'should allow focus-on-open behavior to be disabled', () => {
-				render(
+			it( 'should allow focus-on-open behavior to be disabled', async () => {
+				await renderAsync(
 					<Popover focusOnMount={ false }>Popover content</Popover>
 				);
 

package/src/query-controls/index.js

@@ -107,6 +107,7 @@ export default function QueryControls( {
 		),
 		onNumberOfItemsChange && (
 			<RangeControl
+				__nextHasNoMarginBottom
 				key="query-controls-range-control"
 				label={ __( 'Number of items' ) }
 				value={ numberOfItems }