@wordpress/components 22.1.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>
 	);
@@ -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/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 }

package/src/range-control/test/index.tsx

@@ -1,24 +1,19 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import RangeControl from '../';
 
-const getRangeInput = (): HTMLInputElement | null =>
-	screen.getByRole( 'slider' ) as HTMLInputElement;
-const getNumberInput = (): HTMLInputElement | null =>
-	screen.getByRole( 'spinbutton' ) as HTMLInputElement;
-const getResetButton = (): HTMLButtonElement | null =>
-	screen.getByRole( 'button' ) as HTMLButtonElement;
+const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
+const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
+const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
 
-const fireChangeEvent = (
-	input: HTMLInputElement | null,
-	value?: number | string
-) => fireEvent.change( input as Element, { target: { value } } );
+const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
+	fireEvent.change( input, { target: { value } } );
 
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
@@ -30,10 +25,10 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			rangeInput?.focus();
+			act( () => rangeInput.focus() );
 			fireChangeEvent( rangeInput, '5' );
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '10' );
 
 			expect( onChange ).toHaveBeenCalledWith( 5 );
@@ -48,9 +43,11 @@ describe( 'RangeControl', () => {
 				/>
 			);
 
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const beforeIcon = container.querySelector(
 				'.dashicons-format-image'
 			);
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const afterIcon = container.querySelector(
 				'.dashicons-format-video'
 			);
@@ -68,9 +65,9 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '10' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).not.toBe( '10' );
+			expect( rangeInput.value ).not.toBe( '10' );
 		} );
 
 		it( 'should not apply if new value is greater than maximum', () => {
@@ -80,9 +77,9 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '21' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).not.toBe( '21' );
+			expect( rangeInput.value ).not.toBe( '21' );
 		} );
 
 		it( 'should not call onChange if new value is invalid', () => {
@@ -93,7 +90,7 @@ describe( 'RangeControl', () => {
 
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '25e' );
 
 			expect( onChange ).not.toHaveBeenCalled();
@@ -108,15 +105,15 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '-1.1' );
 
-			expect( numberInput?.value ).toBe( '-1.1' );
-			expect( rangeInput?.value ).toBe( '-1' );
+			expect( numberInput.value ).toBe( '-1.1' );
+			expect( rangeInput.value ).toBe( '-1' );
 
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 			expect( onChange ).toHaveBeenCalledWith( -1 );
-			expect( numberInput?.value ).toBe( '-1' );
+			expect( numberInput.value ).toBe( '-1' );
 		} );
 
 		it( 'should validate when provided a max or min of zero', () => {
@@ -125,11 +122,11 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '1' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).toBe( '0' );
+			expect( rangeInput.value ).toBe( '0' );
 		} );
 
 		it( 'should validate when min and max are negative', () => {
@@ -138,16 +135,16 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 
 			fireChangeEvent( numberInput, '-101' );
-			expect( rangeInput?.value ).toBe( '-100' );
+			expect( rangeInput.value ).toBe( '-100' );
 
 			fireChangeEvent( numberInput, '-49' );
-			expect( rangeInput?.value ).toBe( '-50' );
+			expect( rangeInput.value ).toBe( '-50' );
 
 			fireChangeEvent( numberInput, '-50' );
-			expect( rangeInput?.value ).toBe( '-50' );
+			expect( rangeInput.value ).toBe( '-50' );
 		} );
 
 		it( 'should take into account the step starting from min', () => {
@@ -163,16 +160,16 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '0.125' );
 
 			expect( onChange ).toHaveBeenCalledWith( 0.125 );
-			expect( rangeInput?.value ).toBe( '0.125' );
+			expect( rangeInput.value ).toBe( '0.125' );
 
 			fireChangeEvent( numberInput, '0.225' );
 
 			expect( onChange ).toHaveBeenCalledWith( 0.225 );
-			expect( rangeInput?.value ).toBe( '0.225' );
+			expect( rangeInput.value ).toBe( '0.225' );
 		} );
 	} );
 
@@ -182,7 +179,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '5' );
+			expect( rangeInput.value ).toBe( '5' );
 		} );
 
 		it( 'should render initialPosition if no value is provided', () => {
@@ -190,7 +187,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 		} );
 
 		it( 'should render value instead of initialPosition is provided', () => {
@@ -198,7 +195,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '10' );
+			expect( rangeInput.value ).toBe( '10' );
 		} );
 
 		it( 'should clamp initialPosition between min and max on first render, and on reset', () => {
@@ -216,19 +213,19 @@ describe( 'RangeControl', () => {
 			const resetButton = getResetButton();
 
 			// Value should be clamped on initial load
-			expect( numberInput?.value ).toBe( '100' );
-			expect( rangeInput?.value ).toBe( '100' );
+			expect( numberInput.value ).toBe( '100' );
+			expect( rangeInput.value ).toBe( '100' );
 
 			fireChangeEvent( numberInput, '50' );
 
-			expect( numberInput?.value ).toBe( '50' );
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( numberInput.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 
 			// Value should be clamped after resetting
-			fireEvent.click( resetButton as Element );
+			fireEvent.click( resetButton );
 
-			expect( numberInput?.value ).toBe( '100' );
-			expect( rangeInput?.value ).toBe( '100' );
+			expect( numberInput.value ).toBe( '100' );
+			expect( rangeInput.value ).toBe( '100' );
 		} );
 	} );
 
@@ -255,8 +252,8 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			expect( rangeInput?.value ).toBe( '0' );
-			expect( numberInput?.value ).toBe( '0' );
+			expect( rangeInput.value ).toBe( '0' );
+			expect( numberInput.value ).toBe( '0' );
 		} );
 
 		it( 'should update both field and range on change', () => {
@@ -265,17 +262,17 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			rangeInput?.focus();
+			act( () => rangeInput.focus() );
 			fireChangeEvent( rangeInput, 13 );
 
-			expect( rangeInput?.value ).toBe( '13' );
-			expect( numberInput?.value ).toBe( '13' );
+			expect( rangeInput.value ).toBe( '13' );
+			expect( numberInput.value ).toBe( '13' );
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, 7 );
 
-			expect( rangeInput?.value ).toBe( '7' );
-			expect( numberInput?.value ).toBe( '7' );
+			expect( rangeInput.value ).toBe( '7' );
+			expect( numberInput.value ).toBe( '7' );
 		} );
 
 		it( 'should reset input values if next value is removed', () => {
@@ -285,12 +282,12 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
 			// Reset to 50. Median value of min: 0, max: 100.
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 			// Input field should be blank.
-			expect( numberInput?.value ).toBe( '' );
+			expect( numberInput.value ).toBe( '' );
 		} );
 	} );
 
@@ -310,10 +307,10 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			fireEvent.click( resetButton as Element );
+			fireEvent.click( resetButton );
 
-			expect( rangeInput?.value ).toBe( '33' );
-			expect( numberInput?.value ).toBe( '33' );
+			expect( rangeInput.value ).toBe( '33' );
+			expect( numberInput.value ).toBe( '33' );
 			expect( spy ).toHaveBeenCalledWith( 33 );
 		} );
 
@@ -332,10 +329,10 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			fireEvent.click( resetButton as Element );
+			fireEvent.click( resetButton );
 
-			expect( rangeInput?.value ).toBe( '50' );
-			expect( numberInput?.value ).toBe( '' );
+			expect( rangeInput.value ).toBe( '50' );
+			expect( numberInput.value ).toBe( '' );
 		} );
 	} );
 } );