@wordpress/components 22.0.0 → 23.0.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>
 	);
@@ -229,6 +245,9 @@ function PaletteEditListView( {
 				onChange( newElements.length ? newElements : undefined );
 			}
 		};
+		// Disable reason: adding the missing dependency here would cause breaking changes that will require
+		// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const debounceOnChange = useDebounce( onChange, 100 );
@@ -310,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>
@@ -388,9 +421,7 @@ export default function PaletteEdit( {
 													} }
 													className="components-palette-edit__menu-button"
 												>
-													{ isGradient
-														? __( 'Edit gradients' )
-														: __( 'Edit colors' ) }
+													{ __( 'Show details' ) }
 												</Button>
 											) }
 											{ ! canOnlyChangeValues && (
@@ -451,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/style.scss

@@ -91,7 +91,7 @@
 	height: auto;
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		border-radius: 0;
 	}
 

package/src/popover/index.tsx

@@ -379,6 +379,17 @@ const UnforwardedPopover = (
 
 	// When any of the possible anchor "sources" change,
 	// recompute the reference element (real or virtual) and its owner document.
+
+	const anchorRefTop = ( anchorRef as PopoverAnchorRefTopBottom | undefined )
+		?.top;
+	const anchorRefBottom = (
+		anchorRef as PopoverAnchorRefTopBottom | undefined
+	 )?.bottom;
+	const anchorRefStartContainer = ( anchorRef as Range | undefined )
+		?.startContainer;
+	const anchorRefCurrent = ( anchorRef as PopoverAnchorRefReference )
+		?.current;
+
 	useLayoutEffect( () => {
 		const resultingReferenceOwnerDoc = getReferenceOwnerDocument( {
 			anchor,
@@ -401,11 +412,11 @@ const UnforwardedPopover = (
 		setReferenceOwnerDocument( resultingReferenceOwnerDoc );
 	}, [
 		anchor,
-		anchorRef as Element | undefined,
-		( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top,
-		( anchorRef as PopoverAnchorRefTopBottom | undefined )?.bottom,
-		( anchorRef as Range | undefined )?.startContainer,
-		( anchorRef as PopoverAnchorRefReference )?.current,
+		anchorRef,
+		anchorRefTop,
+		anchorRefBottom,
+		anchorRefStartContainer,
+		anchorRefCurrent,
 		anchorRect,
 		getAnchorRect,
 		fallbackReferenceElement,
@@ -420,7 +431,7 @@ const UnforwardedPopover = (
 			// Reference and root documents are the same.
 			referenceOwnerDocument === document ||
 			// Reference and floating are in the same document.
-			referenceOwnerDocument === refs?.floating?.current?.ownerDocument ||
+			referenceOwnerDocument === refs.floating.current?.ownerDocument ||
 			// The reference's document has no view (i.e. window)
 			// or frame element (ie. it's not an iframe).
 			! referenceOwnerDocument?.defaultView?.frameElement
@@ -442,7 +453,7 @@ const UnforwardedPopover = (
 		return () => {
 			defaultView.removeEventListener( 'resize', updateFrameOffset );
 		};
-	}, [ referenceOwnerDocument, update ] );
+	}, [ referenceOwnerDocument, update, refs.floating ] );
 
 	const mergedFloatingRef = useMergeRefs( [
 		floating,
@@ -461,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'
@@ -477,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 }

package/src/range-control/styles/range-control-styles.ts

@@ -174,7 +174,7 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 				background-color: ${ COLORS.gray[ 400 ] };
 		  `
 		: css`
-				background-color: var( --wp-admin-theme-color );
+				background-color: ${ COLORS.ui.theme };
 		  `;
 
 export const ThumbWrapper = styled.span`
@@ -205,7 +205,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 				&::before {
 					content: ' ';
 					position: absolute;
-					background-color: var( --wp-admin-theme-color );
+					background-color: ${ COLORS.ui.theme };
 					opacity: 0.4;
 					border-radius: 50%;
 					height: ${ thumbSize + 8 }px;