@wordpress/components 25.15.1-next.79a6196f.0 → 25.16.0

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { click, type, press } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -9,6 +10,17 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import PaletteEdit, { getNameForPosition } from '..';
 import type { PaletteElement } from '../types';
 
+const noop = () => {};
+
+async function clearInput( input: HTMLInputElement ) {
+	await click( input );
+
+	// Press backspace as many times as the input's current value
+	for ( const _ of Array( input.value.length ) ) {
+		await press.Backspace();
+	}
+}
+
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
 		const slugPrefix = 'test-';
@@ -82,18 +94,322 @@ describe( 'getNameForPosition', () => {
 
 describe( 'PaletteEdit', () => {
 	const defaultProps = {
-		colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ],
-		onChange: jest.fn(),
 		paletteLabel: 'Test label',
-		emptyMessage: 'Test empty message',
-		canOnlyChangeValues: true,
-		canReset: true,
 		slugPrefix: '',
+		onChange: noop,
 	};
 
-	it( 'opens color selector for color palettes', () => {
-		render( <PaletteEdit { ...defaultProps } /> );
-		fireEvent.click( screen.getByLabelText( 'Color: Base' ) );
-		expect( screen.getByLabelText( 'Hex color' ) ).toBeInTheDocument();
+	const colors = [
+		{ color: '#1a4548', name: 'Primary', slug: 'primary' },
+		{ color: '#0000ff', name: 'Secondary', slug: 'secondary' },
+	];
+	const gradients = [
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+			name: 'Pale ocean',
+			slug: 'pale-ocean',
+		},
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+			name: 'Midnight',
+			slug: 'midnight',
+		},
+	];
+
+	it( 'shows heading label', () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		const paletteLabel = screen.getByRole( 'heading', {
+			level: 2,
+			name: 'Test label',
+		} );
+
+		expect( paletteLabel ).toBeVisible();
+	} );
+
+	it( 'shows heading label with custom heading level', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				paletteLabelHeadingLevel={ 5 }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', {
+				level: 5,
+				name: 'Test label',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'shows empty message', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				emptyMessage={ 'Test empty message' }
+			/>
+		);
+
+		expect( screen.getByText( 'Test empty message' ) ).toBeVisible();
+	} );
+
+	it( 'shows an option to remove all colors', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Remove all colors',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'shows a reset option when the `canReset` prop is enabled', async () => {
+		render(
+			<PaletteEdit { ...defaultProps } colors={ colors } canReset />
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'does not show a reset colors option when `canReset` is disabled', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'calls the `onChange` with the new color appended', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add color',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...colors,
+				{
+					color: '#000',
+					name: 'Color 1',
+					slug: 'color-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'calls the `onChange` with the new gradient appended', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				gradients={ gradients }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add gradient',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...gradients,
+				{
+					gradient:
+						'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)',
+					name: 'Color 1',
+					slug: 'color-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'can not add new colors when `canOnlyChangeValues` is enabled', () => {
+		render( <PaletteEdit { ...defaultProps } canOnlyChangeValues /> );
+
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Add color',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'can remove a color', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+		await click( screen.getByText( 'Primary' ) );
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Remove color',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [ colors[ 1 ] ] );
+		} );
+	} );
+
+	it( 'can update palette name', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+		await click( screen.getByText( 'Primary' ) );
+		const nameInput = screen.getByRole( 'textbox', {
+			name: 'Color name',
+		} );
+
+		await clearInput( nameInput as HTMLInputElement );
+
+		await type( 'Primary Updated' );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...colors[ 0 ],
+					name: 'Primary Updated',
+					slug: 'primary-updated',
+				},
+				colors[ 1 ],
+			] );
+		} );
+	} );
+
+	it( 'can update color palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Color: Primary' ) );
+		const hexInput = screen.getByRole( 'textbox', {
+			name: 'Hex color',
+		} );
+
+		await clearInput( hexInput as HTMLInputElement );
+
+		await type( '000000' );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...colors[ 0 ],
+					color: '#000000',
+				},
+				colors[ 1 ],
+			] );
+		} );
+	} );
+
+	it( 'can update gradient palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				gradients={ gradients }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Gradient: Pale ocean' ) );
+
+		// Select radial gradient option
+		await click(
+			screen.getByRole( 'combobox', {
+				name: 'Type',
+			} )
+		);
+		await click( screen.getByRole( 'option', { name: 'Radial' } ) );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...gradients[ 0 ],
+					gradient:
+						'radial-gradient(rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+				},
+				gradients[ 1 ],
+			] );
+		} );
 	} );
 } );

package/src/slot-fill/bubbles-virtually/use-slot-fills.ts

@@ -19,6 +19,6 @@ export default function useSlotFills( name: SlotKey ) {
 	const fills = useSnapshot( registry.fills, { sync: true } );
 	// The important bit here is that this call ensures that the hook
 	// only causes a re-render if the "fills" of a given slot name
-	// change change, not any fills.
+	// change, not any fills.
 	return fills.get( name );
 }

package/src/tabs/test/index.tsx

@@ -1260,7 +1260,9 @@ describe( 'Tabs', () => {
 
 				// Tab key should focus the currently selected tab, which is Beta.
 				await press.Tab();
-				expect( await getSelectedTab() ).toHaveFocus();
+				await waitFor( async () =>
+					expect( await getSelectedTab() ).toHaveFocus()
+				);
 
 				rerender(
 					<ControlledTabs

package/src/theme/styles.ts

@@ -30,4 +30,6 @@ export const colorVariables = ( { colors }: ThemeOutputValues ) => {
 	];
 };
 
-export const Wrapper = styled.div``;
+export const Wrapper = styled.div`
+	color: var( --wp-components-color-foreground, currentColor );
+`;

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -240,7 +240,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-8"
+        id="toggle-group-control-as-radio-group-10"
         role="radiogroup"
       >
         <div
@@ -254,7 +254,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-8-20"
+            id="toggle-group-control-as-radio-group-10-24"
             role="radio"
             type="button"
             value="uppercase"
@@ -292,7 +292,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-8-21"
+            id="toggle-group-control-as-radio-group-10-25"
             role="radio"
             type="button"
             value="lowercase"
@@ -488,7 +488,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-7"
+        id="toggle-group-control-as-radio-group-9"
         role="radiogroup"
       >
         <div
@@ -501,7 +501,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-7-18"
+            id="toggle-group-control-as-radio-group-9-22"
             role="radio"
             type="button"
             value="rigas"
@@ -523,7 +523,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-7-19"
+            id="toggle-group-control-as-radio-group-9-23"
             role="radio"
             type="button"
             value="jack"

package/src/toggle-group-control/test/index.tsx

@@ -117,6 +117,22 @@ describe.each( [
 			expect( container ).toMatchSnapshot();
 		} );
 	} );
+	it( 'should render with the correct option initially selected when `value` is defined', () => {
+		render(
+			<Component value="jack" label="Test Toggle Group Control">
+				{ options }
+			</Component>
+		);
+		expect( screen.getByRole( 'radio', { name: 'R' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
+	} );
+	it( 'should render without a selected option when `value` is `undefined`', () => {
+		render(
+			<Component label="Test Toggle Group Control">{ options }</Component>
+		);
+		expect( screen.getByRole( 'radio', { name: 'R' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'J' } ) ).not.toBeChecked();
+	} );
 	it( 'should call onChange with proper value', async () => {
 		const mockOnChange = jest.fn();
 
@@ -193,7 +209,7 @@ describe.each( [
 	} );
 
 	if ( mode === 'controlled' ) {
-		it( 'should reset values correctly', async () => {
+		it( 'should reset values correctly when default value is undefined', async () => {
 			render(
 				<Component label="Test Toggle Group Control">
 					{ options }
@@ -208,56 +224,77 @@ describe.each( [
 			expect( jackOption ).not.toBeChecked();
 			expect( rigasOption ).toBeChecked();
 
-			await press.ArrowRight();
-
-			expect( rigasOption ).not.toBeChecked();
-			expect( jackOption ).toBeChecked();
-
 			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( rigasOption ).not.toBeChecked();
 			expect( jackOption ).not.toBeChecked();
 		} );
 
-		it( 'should update correctly when triggered by external updates', async () => {
+		it( 'should reset values correctly when default value is defined', async () => {
 			render(
-				<Component
-					value="rigas"
-					label="Test Toggle Group Control"
-					extraButtonOptions={ [
-						{ name: 'Rigas', value: 'rigas' },
-						{ name: 'Jack', value: 'jack' },
-					] }
-				>
+				<Component label="Test Toggle Group Control" value="rigas">
 					{ options }
 				</Component>
 			);
 
-			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
-			expect(
-				screen.getByRole( 'radio', { name: 'J' } )
-			).not.toBeChecked();
-
-			await click( screen.getByRole( 'button', { name: 'Jack' } ) );
-			expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
-			expect(
-				screen.getByRole( 'radio', { name: 'R' } )
-			).not.toBeChecked();
+			const rigasOption = screen.getByRole( 'radio', {
+				name: 'R',
+			} );
+			const jackOption = screen.getByRole( 'radio', {
+				name: 'J',
+			} );
 
-			await click( screen.getByRole( 'button', { name: 'Rigas' } ) );
-			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
-			expect(
-				screen.getByRole( 'radio', { name: 'J' } )
-			).not.toBeChecked();
+			expect( rigasOption ).toBeChecked();
+			expect( jackOption ).not.toBeChecked();
 
 			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
-			expect(
-				screen.getByRole( 'radio', { name: 'R' } )
-			).not.toBeChecked();
-			expect(
-				screen.getByRole( 'radio', { name: 'J' } )
-			).not.toBeChecked();
+
+			expect( rigasOption ).not.toBeChecked();
+			expect( jackOption ).not.toBeChecked();
 		} );
+
+		describe.each( [
+			[ 'undefined', undefined ],
+			[ 'defined', 'rigas' ],
+		] )(
+			'should update correctly when triggered by external updates',
+			( defaultValueType, defaultValue ) => {
+				it( `when default value is ${ defaultValueType }`, async () => {
+					render(
+						<Component
+							value={ defaultValue }
+							label="Test Toggle Group Control"
+							extraButtonOptions={ [
+								{ name: 'Rigas', value: 'rigas' },
+								{ name: 'Jack', value: 'jack' },
+							] }
+						>
+							{ options }
+						</Component>
+					);
+
+					await click(
+						screen.getByRole( 'button', { name: 'Jack' } )
+					);
+					expect(
+						screen.getByRole( 'radio', { name: 'J' } )
+					).toBeChecked();
+					expect(
+						screen.getByRole( 'radio', { name: 'R' } )
+					).not.toBeChecked();
+
+					await click(
+						screen.getByRole( 'button', { name: 'Rigas' } )
+					);
+					expect(
+						screen.getByRole( 'radio', { name: 'R' } )
+					).toBeChecked();
+					expect(
+						screen.getByRole( 'radio', { name: 'J' } )
+					).not.toBeChecked();
+				} );
+			}
+		);
 	}
 
 	describe( 'isDeselectable', () => {

package/src/toggle-group-control/toggle-group-control/utils.ts

@@ -21,16 +21,21 @@ type ValueProp = ToggleGroupControlProps[ 'value' ];
 export function useComputeControlledOrUncontrolledValue(
 	valueProp: ValueProp
 ): { value: ValueProp; defaultValue: ValueProp } {
+	const isInitialRender = useRef( true );
 	const prevValueProp = usePrevious( valueProp );
 	const prevIsControlled = useRef( false );
 
+	useEffect( () => {
+		if ( isInitialRender.current ) {
+			isInitialRender.current = false;
+		}
+	}, [] );
+
 	// Assume the component is being used in controlled mode on the first re-render
 	// that has a different `valueProp` from the previous render.
 	const isControlled =
 		prevIsControlled.current ||
-		( prevValueProp !== undefined &&
-			valueProp !== undefined &&
-			prevValueProp !== valueProp );
+		( ! isInitialRender.current && prevValueProp !== valueProp );
 	useEffect( () => {
 		prevIsControlled.current = isControlled;
 	}, [ isControlled ] );