@wordpress/components 29.8.0 → 29.9.0

package/src/color-picker/test/index.tsx

@@ -3,6 +3,7 @@
  */
 import { fireEvent, screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -13,7 +14,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ColorPicker } from '..';
-import { click } from '@ariakit/test';
 
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
@@ -41,6 +41,34 @@ const legacyColorMatcher = {
 	source: 'hex',
 };
 
+// Without the controlled component, slider values don't update after changes.
+// Controlled component with state helps synchronize input box and slider during testing.
+const ControlledColorPicker = ( {
+	onChange: onChangeProp,
+	initialColor = '#000000',
+	...restProps
+}: React.ComponentProps< typeof ColorPicker > & { initialColor?: string } ) => {
+	const [ colorState, setColorState ] = useState( initialColor );
+
+	const internalOnChange: typeof onChangeProp = ( newColor ) => {
+		onChangeProp?.( newColor );
+		setColorState( newColor );
+	};
+
+	return (
+		<>
+			<ColorPicker
+				{ ...restProps }
+				onChange={ internalOnChange }
+				color={ colorState }
+			/>
+			<button onClick={ () => setColorState( '#4d87ba' ) }>
+				Set color to #4d87ba
+			</button>
+		</>
+	);
+};
+
 describe( 'ColorPicker', () => {
 	describe( 'legacy props', () => {
 		it( 'should fire onChangeComplete with the legacy color format', async () => {
@@ -144,31 +172,6 @@ describe( 'ColorPicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 
-			const ControlledColorPicker = ( {
-				onChange: onChangeProp,
-				...restProps
-			}: React.ComponentProps< typeof ColorPicker > ) => {
-				const [ colorState, setColorState ] = useState( '#000000' );
-
-				const internalOnChange: typeof onChangeProp = ( newColor ) => {
-					onChangeProp?.( newColor );
-					setColorState( newColor );
-				};
-
-				return (
-					<>
-						<ColorPicker
-							{ ...restProps }
-							onChange={ internalOnChange }
-							color={ colorState }
-						/>
-						<button onClick={ () => setColorState( '#4d87ba' ) }>
-							Set color to #4d87ba
-						</button>
-					</>
-				);
-			};
-
 			render(
 				<ControlledColorPicker
 					onChange={ onChange }
@@ -342,4 +345,78 @@ describe( 'ColorPicker', () => {
 			} );
 		} );
 	} );
+
+	describe.each( [
+		[ 'hsl', 'HSL' ],
+		[ 'rgb', 'RGB' ],
+	] )( 'Alpha-enabled %s format', ( format, formatLabel ) => {
+		it( `should update alpha correctly when ${ formatLabel } format is selected`, async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha
+					initialColor="#ffffff80"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+			await user.selectOptions( formatSelector, format );
+
+			const alphaInput = screen.getByRole( 'spinbutton', {
+				name: 'Alpha',
+			} );
+			expect( alphaInput ).toBeVisible();
+
+			const alphaSliders = screen.getAllByRole( 'slider', {
+				name: 'Alpha',
+			} );
+
+			expect( alphaSliders ).toHaveLength( 2 );
+
+			// Choose the second slider which is the actual slider of type: input[type="range"]
+			const alphaSlider = alphaSliders.at( -1 )!;
+
+			expect( alphaSlider ).toHaveValue( '50' );
+			expect( alphaInput ).toHaveValue( 50 );
+
+			expect( onChange ).not.toHaveBeenCalled();
+
+			// Test pattern 1: Update the slider
+			fireEvent.change( alphaSlider, {
+				target: { value: 75 },
+			} );
+
+			await waitFor( () => {
+				expect( onChange ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			expect( onChange ).toHaveBeenLastCalledWith( '#ffffffbf' );
+			expect( alphaInput ).toHaveValue( 75 );
+			expect( alphaSlider ).toHaveValue( '75' );
+
+			onChange.mockClear();
+
+			// Test pattern 2: Update the alphaInput
+			await user.clear( alphaInput );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+
+			// Initially type 7 in the alpha input, we expect it to be called with #ffffff12
+			await user.keyboard( '7' );
+
+			// Now with 75% opacity we expect it to be called with #ffffffbf
+			await user.keyboard( '5' );
+
+			// Called twice, once per key stroke (`7` and `5`)
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenNthCalledWith( 2, '#ffffff12' );
+			expect( onChange ).toHaveBeenNthCalledWith( 3, '#ffffffbf' );
+
+			expect( alphaSlider ).toHaveValue( '75' );
+			expect( alphaInput ).toHaveValue( 75 );
+		} );
+	} );
 } );

package/src/duotone-picker/style.scss

@@ -13,6 +13,10 @@
 		color: transparent;
 	}
 
+	&:hover:not(:disabled):not([aria-disabled="true"]) {
+		color: transparent;
+	}
+
 	&:not([aria-disabled="true"]):active {
 		color: transparent;
 	}

package/src/guide/README.md

@@ -59,6 +59,22 @@ Use this to customize the label of the _Finish_ button shown at the end of the g
 -   Required: No
 -	Default: `'Finish'`
 
+### nextButtonText
+
+Use this to customize the label of the _Next_ button shown on each page of the guide.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'Next'`
+
+### previousButtonText
+
+Use this to customize the label of the _Previous_ button shown on each page of the guide except the first.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'Previous'`
+
 ### onFinish
 
 A function which is called when the guide is finished. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.

package/src/guide/index.tsx

@@ -55,6 +55,8 @@ function Guide( {
 	className,
 	contentLabel,
 	finishButtonText = __( 'Finish' ),
+	nextButtonText = __( 'Next' ),
+	previousButtonText = __( 'Previous' ),
 	onFinish,
 	pages = [],
 }: GuideProps ) {
@@ -146,7 +148,7 @@ function Guide( {
 							onClick={ goBack }
 							__next40pxDefaultSize
 						>
-							{ __( 'Previous' ) }
+							{ previousButtonText }
 						</Button>
 					) }
 					{ canGoForward && (
@@ -156,7 +158,7 @@ function Guide( {
 							onClick={ goForward }
 							__next40pxDefaultSize
 						>
-							{ __( 'Next' ) }
+							{ nextButtonText }
 						</Button>
 					) }
 					{ ! canGoForward && (

package/src/guide/stories/index.story.tsx

@@ -20,6 +20,8 @@ const meta: Meta< typeof Guide > = {
 	argTypes: {
 		contentLabel: { control: 'text' },
 		finishButtonText: { control: 'text' },
+		nextButtonText: { control: 'text' },
+		previousButtonText: { control: 'text' },
 		onFinish: { action: 'onFinish' },
 	},
 };

package/src/guide/types.ts

@@ -40,6 +40,18 @@ export type GuideProps = {
 	 * @default 'Finish'
 	 */
 	finishButtonText?: string;
+	/**
+	 * Use this to customize the label of the _Next_ button shown on each page of the guide.
+	 *
+	 * @default 'Next'
+	 */
+	nextButtonText?: string;
+	/**
+	 * Use this to customize the label of the _Previous_ button shown on each page of the guide except the first.
+	 *
+	 * @default 'Previous'
+	 */
+	previousButtonText?: string;
 	/**
 	 * A function which is called when the guide is finished.
 	 */

package/src/item-group/styles.ts

@@ -65,7 +65,7 @@ export const separated = css`
 		border-bottom: 1px solid ${ CONFIG.surfaceBorderColor };
 	}
 
-	> *:last-of-type > *:not( :focus ) {
+	> *:last-of-type > * {
 		border-bottom-color: transparent;
 	}
 `;

package/src/item-group/test/__snapshots__/index.js.snap

@@ -115,7 +115,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-zgfros-PolymorphicDiv-separated-rounded e19lxcc00"
++     class="components-item-group css-1hvp0tq-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"

package/src/popover/index.tsx

@@ -71,6 +71,13 @@ import { StyleProvider } from '../style-provider';
  */
 export const SLOT_NAME = 'Popover';
 
+/**
+ * Virtual padding to account for overflow boundaries.
+ *
+ * @type {number}
+ */
+const OVERFLOW_PADDING = 8;
+
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.
 // Keeping the SVG's viewbox squared simplify the arrow positioning
@@ -224,6 +231,7 @@ const UnforwardedPopover = (
 		computedFlipProp && flipMiddleware(),
 		computedResizeProp &&
 			size( {
+				padding: OVERFLOW_PADDING,
 				apply( sizeProps ) {
 					const { firstElementChild } = refs.floating.current ?? {};
 
@@ -234,7 +242,10 @@ const UnforwardedPopover = (
 
 					// Reduce the height of the popover to the available space.
 					Object.assign( firstElementChild.style, {
-						maxHeight: `${ sizeProps.availableHeight }px`,
+						maxHeight: `${ Math.max(
+							0,
+							sizeProps.availableHeight
+						) }px`,
 						overflow: 'auto',
 					} );
 				},

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -54,7 +54,7 @@ function UnconnectedToggleGroupControl(
 	const [ controlElement, setControlElement ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
 	const selectedRect = useTrackElementOffsetRect(
-		value || value === 0 ? selectedElement : undefined
+		value !== null && value !== undefined ? selectedElement : undefined
 	);
 	useAnimatedOffsetRect( controlElement, selectedRect, {
 		prefix: 'selected',

package/src/unit-control/test/utils.ts

@@ -42,6 +42,42 @@ describe( 'UnitControl utils', () => {
 			] );
 		} );
 
+		it( 'should not mutate default units argument definiton', () => {
+			const unitsA = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 8, em: 0.5, rem: 0.5 },
+			} );
+
+			const unitsB = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 16, em: 1, rem: 1 },
+			} );
+
+			expect( unitsA ).not.toEqual( unitsB );
+		} );
+
+		it( 'should not mutate custon units argument definitons', () => {
+			const units = [
+				{ value: 'px', label: 'pixel' },
+				{ value: 'em', label: 'em' },
+				{ value: 'rem', label: 'rem' },
+			];
+
+			const unitsA = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 8, em: 0.5, rem: 0.5 },
+				units,
+			} );
+
+			const unitsB = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 16, em: 1, rem: 1 },
+				units,
+			} );
+
+			expect( unitsA ).not.toEqual( unitsB );
+		} );
+
 		it( 'should add default values to available units even if the default values are strings', () => {
 			// Although the public APIs of the component expect a `number` as the type of the
 			// default values, it's still good to test for strings (as it can happen in un-typed

package/src/unit-control/utils.ts

@@ -428,19 +428,16 @@ export const useCustomUnits = ( {
 		units
 	);
 
-	if ( defaultValues ) {
-		customUnitsToReturn.forEach( ( unit, i ) => {
-			if ( defaultValues[ unit.value ] ) {
-				const [ parsedDefaultValue ] = parseQuantityAndUnitFromRawValue(
-					defaultValues[ unit.value ]
-				);
-
-				customUnitsToReturn[ i ].default = parsedDefaultValue;
-			}
-		} );
+	if ( ! defaultValues ) {
+		return customUnitsToReturn;
 	}
 
-	return customUnitsToReturn;
+	return customUnitsToReturn.map( ( unit ) => {
+		const [ defaultValue ] = defaultValues[ unit.value ]
+			? parseQuantityAndUnitFromRawValue( defaultValues[ unit.value ] )
+			: [];
+		return { ...unit, default: defaultValue };
+	} );
 };
 
 /**