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

package/src/tabs/types.ts

@@ -78,8 +78,10 @@ export type TabListProps = {
 export type TabProps = {
 	/**
 	 * The id of the tab, which is prepended with the `Tabs` instanceId.
+	 * The value of this prop should match with the value of the `tabId` prop on
+	 * the corresponding `Tabs.TabPanel` component.
 	 */
-	id: string;
+	tabId: string;
 	/**
 	 * The children elements, generally the text to display on the tab.
 	 */
@@ -103,9 +105,12 @@ export type TabPanelProps = {
 	 */
 	children?: React.ReactNode;
 	/**
-	 * A unique identifier for the tabpanel, which is used to generate a unique `id` for the underlying element.
+	 * A unique identifier for the tabpanel, which is used to generate an
+	 * instanced id for the underlying element.
+	 * The value of this prop should match with the value of the `tabId` prop on
+	 * the corresponding `Tabs.Tab` component.
 	 */
-	id: string;
+	tabId: string;
 	/**
 	 * Determines whether or not the tabpanel element should be focusable.
 	 * If `false`, pressing the tab key will skip over the tabpanel, and instead

package/src/text-control/README.md

@@ -4,12 +4,6 @@ TextControl components let users enter and edit text.
 
 ![Unfilled and filled TextControl components](https://make.wordpress.org/design/files/2019/03/TextControl.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/textarea-control/README.md

@@ -4,12 +4,6 @@ TextareaControls are TextControls that allow for multiple lines of text, and wra
 
 ![An empty TextareaControl, and a focused TextareaControl with some content entered.](https://wordpress.org/gutenberg/files/2019/01/TextareaControl.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

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

@@ -47,9 +47,9 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -116,7 +116,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -198,7 +199,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
@@ -249,7 +251,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
             data-active-item=""
-            data-command=""
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -288,7 +289,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             aria-checked="false"
             aria-label="Lowercase"
             class="emotion-18 components-toggle-group-control-option-base"
-            data-command=""
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -374,9 +374,9 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -498,7 +498,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             aria-checked="false"
             aria-label="R"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-command=""
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -521,7 +520,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             aria-checked="false"
             aria-label="J"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-command=""
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -596,9 +594,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -665,7 +663,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -747,7 +746,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
@@ -798,7 +798,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
             data-active-item=""
-            data-command=""
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -837,7 +836,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             aria-checked="false"
             aria-label="Lowercase"
             class="emotion-18 components-toggle-group-control-option-base"
-            data-command=""
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -917,9 +915,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -1041,7 +1039,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             aria-checked="false"
             aria-label="R"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-command=""
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -1064,7 +1061,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             aria-checked="false"
             aria-label="J"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-command=""
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { press, click, hover, sleep } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -19,14 +19,22 @@ import {
 	ToggleGroupControlOption,
 	ToggleGroupControlOptionIcon,
 } from '../index';
+import { TOOLTIP_DELAY } from '../../tooltip';
 import type { ToggleGroupControlProps } from '../types';
-import cleanupTooltip from '../../tooltip/test/utils';
+
+const hoverOutside = async () => {
+	await hover( document.body );
+	await hover( document.body, { clientX: 10, clientY: 10 } );
+};
 
 const ControlledToggleGroupControl = ( {
 	value: valueProp,
 	onChange,
+	extraButtonOptions,
 	...props
-}: ToggleGroupControlProps ) => {
+}: ToggleGroupControlProps & {
+	extraButtonOptions?: { name: string; value: string }[];
+} ) => {
 	const [ value, setValue ] = useState( valueProp );
 
 	return (
@@ -40,6 +48,14 @@ const ControlledToggleGroupControl = ( {
 				value={ value }
 			/>
 			<Button onClick={ () => setValue( undefined ) }>Reset</Button>
+			{ extraButtonOptions?.map( ( obj ) => (
+				<Button
+					key={ obj.value }
+					onClick={ () => setValue( obj.value ) }
+				>
+					{ obj.name }
+				</Button>
+			) ) }
 		</>
 	);
 };
@@ -102,7 +118,6 @@ describe.each( [
 		} );
 	} );
 	it( 'should call onChange with proper value', async () => {
-		const user = userEvent.setup();
 		const mockOnChange = jest.fn();
 
 		render(
@@ -115,13 +130,12 @@ describe.each( [
 			</Component>
 		);
 
-		await user.click( screen.getByRole( 'radio', { name: 'R' } ) );
+		await click( screen.getByRole( 'radio', { name: 'R' } ) );
 
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
 
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
-		const user = userEvent.setup();
 		render(
 			<Component label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -132,19 +146,26 @@ describe.each( [
 			'Click for Delicious Gnocchi'
 		);
 
-		await user.hover( firstRadio );
+		await hover( firstRadio );
 
-		const tooltip = await screen.findByText(
-			'Click for Delicious Gnocchi'
-		);
+		const tooltip = await screen.findByRole( 'tooltip', {
+			name: 'Click for Delicious Gnocchi',
+		} );
 
 		await waitFor( () => expect( tooltip ).toBeVisible() );
 
-		await cleanupTooltip( user );
+		// hover outside of radio
+		await hoverOutside();
+
+		// Tooltip should hide
+		expect(
+			screen.queryByRole( 'tooltip', {
+				name: 'Click for Delicious Gnocchi',
+			} )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render tooltip', async () => {
-		const user = userEvent.setup();
 		render(
 			<Component label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -155,19 +176,24 @@ describe.each( [
 			'Click for Sumptuous Caponata'
 		);
 
-		await user.hover( secondRadio );
+		await hover( secondRadio );
 
-		await waitFor( () =>
-			expect(
-				screen.queryByText( 'Click for Sumptuous Caponata' )
-			).not.toBeInTheDocument()
-		);
+		// Tooltip shouldn't show
+		expect(
+			screen.queryByText( 'Click for Sumptuous Caponata' )
+		).not.toBeInTheDocument();
+
+		// Advance time by default delay
+		await sleep( TOOLTIP_DELAY );
+
+		// Tooltip shouldn't show.
+		expect(
+			screen.queryByText( 'Click for Sumptuous Caponata' )
+		).not.toBeInTheDocument();
 	} );
 
 	if ( mode === 'controlled' ) {
 		it( 'should reset values correctly', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Component label="Test Toggle Group Control">
 					{ options }
@@ -177,28 +203,67 @@ describe.each( [
 			const rigasOption = screen.getByRole( 'radio', { name: 'R' } );
 			const jackOption = screen.getByRole( 'radio', { name: 'J' } );
 
-			await user.click( rigasOption );
+			await click( rigasOption );
 
 			expect( jackOption ).not.toBeChecked();
 			expect( rigasOption ).toBeChecked();
 
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 
 			expect( rigasOption ).not.toBeChecked();
 			expect( jackOption ).toBeChecked();
 
-			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+			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 () => {
+			render(
+				<Component
+					value="rigas"
+					label="Test Toggle Group Control"
+					extraButtonOptions={ [
+						{ name: 'Rigas', value: 'rigas' },
+						{ name: 'Jack', value: 'jack' },
+					] }
+				>
+					{ 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();
+
+			await click( screen.getByRole( 'button', { name: 'Rigas' } ) );
+			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).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();
+		} );
 	}
 
 	describe( 'isDeselectable', () => {
 		describe( 'isDeselectable = false', () => {
 			it( 'should not be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup();
 
 				render(
 					<Component
@@ -214,31 +279,35 @@ describe.each( [
 					name: 'R',
 					checked: true,
 				} );
-				await user.click( rigas );
+				await click( rigas );
 				expect( mockOnChange ).toHaveBeenCalledTimes( 0 );
 			} );
 
 			it( 'should not tab to next radio option', async () => {
-				const user = userEvent.setup();
-
 				render(
-					<Component value="rigas" label="Test">
-						{ options }
-					</Component>
+					<>
+						<Component value="rigas" label="Test">
+							{ options }
+						</Component>
+						<button>After ToggleGroupControl</button>
+					</>
 				);
 
 				const rigas = screen.getByRole( 'radio', {
 					name: 'R',
 				} );
 
-				await user.tab();
+				await press.Tab();
 				expect( rigas ).toHaveFocus();
 
-				await user.tab();
+				await press.Tab();
 
+				// When in controlled mode, there is an additional "Reset" button.
 				const expectedFocusTarget =
 					mode === 'uncontrolled'
-						? rigas.ownerDocument.body
+						? screen.getByRole( 'button', {
+								name: 'After ToggleGroupControl',
+						  } )
 						: screen.getByRole( 'button', { name: 'Reset' } );
 
 				expect( expectedFocusTarget ).toHaveFocus();
@@ -248,7 +317,6 @@ describe.each( [
 		describe( 'isDeselectable = true', () => {
 			it( 'should be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup();
 
 				render(
 					<Component
@@ -261,7 +329,7 @@ describe.each( [
 					</Component>
 				);
 
-				await user.click(
+				await click(
 					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: true,
@@ -270,7 +338,7 @@ describe.each( [
 				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
 				expect( mockOnChange ).toHaveBeenLastCalledWith( undefined );
 
-				await user.click(
+				await click(
 					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: false,
@@ -281,15 +349,13 @@ describe.each( [
 			} );
 
 			it( 'should tab to the next option button', async () => {
-				const user = userEvent.setup();
-
 				render(
 					<Component isDeselectable value="rigas" label="Test">
 						{ options }
 					</Component>
 				);
 
-				await user.tab();
+				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'R',
@@ -297,7 +363,7 @@ describe.each( [
 					} )
 				).toHaveFocus();
 
-				await user.tab();
+				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'J',
@@ -306,7 +372,7 @@ describe.each( [
 				).toHaveFocus();
 
 				// Focus should not move with arrow keys
-				await user.keyboard( '{ArrowLeft}' );
+				await press.ArrowLeft();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'J',

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

@@ -47,6 +47,8 @@ function UnconnectedToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 
 	const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
+	const normalizedSize =
+		__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
 
 	const cx = useCx();
 
@@ -56,13 +58,12 @@ function UnconnectedToggleGroupControl(
 				styles.toggleGroupControl( {
 					isBlock,
 					isDeselectable,
-					size,
-					__next40pxDefaultSize,
+					size: normalizedSize,
 				} ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, size, __next40pxDefaultSize ]
+		[ className, cx, isBlock, isDeselectable, normalizedSize ]
 	);
 
 	const MainControl = isDeselectable
@@ -86,7 +87,7 @@ function UnconnectedToggleGroupControl(
 				label={ label }
 				onChange={ onChange }
 				ref={ forwardedRef }
-				size={ size }
+				size={ normalizedSize }
 				value={ value }
 			>
 				<LayoutGroup id={ baseId }>{ children }</LayoutGroup>

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

@@ -14,11 +14,7 @@ export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
-	__next40pxDefaultSize,
-}: Pick<
-	ToggleGroupControlProps,
-	'isBlock' | 'isDeselectable' | '__next40pxDefaultSize'
-> & {
+}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
@@ -26,10 +22,9 @@ export const toggleGroupControl = ( {
 	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
-	padding: 2px;
 	position: relative;
 
-	${ toggleGroupControlSize( size, __next40pxDefaultSize ) }
+	${ toggleGroupControlSize( size ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
@@ -57,21 +52,20 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 };
 
 export const toggleGroupControlSize = (
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >,
-	__next40pxDefaultSize: ToggleGroupControlProps[ '__next40pxDefaultSize' ]
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
 ) => {
-	const heights = {
-		default: '40px',
-		'__unstable-large': '40px',
+	const styles = {
+		default: css`
+			min-height: 36px;
+			padding: 2px;
+		`,
+		'__unstable-large': css`
+			min-height: 40px;
+			padding: 3px;
+		`,
 	};
 
-	if ( ! __next40pxDefaultSize ) {
-		heights.default = '36px';
-	}
-
-	return css`
-		min-height: ${ heights[ size ] };
-	`;
+	return styles[ size ];
 };
 
 export const block = css`

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

@@ -21,30 +21,25 @@ type ValueProp = ToggleGroupControlProps[ 'value' ];
 export function useComputeControlledOrUncontrolledValue(
 	valueProp: ValueProp
 ): { value: ValueProp; defaultValue: ValueProp } {
-	const hasEverBeenUsedInControlledMode = useRef( false );
-	const previousValueProp = usePrevious( valueProp );
+	const prevValueProp = usePrevious( valueProp );
+	const prevIsControlled = useRef( 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 );
 	useEffect( () => {
-		if ( ! hasEverBeenUsedInControlledMode.current ) {
-			// Assume the component is being used in controlled mode if:
-			// - the `value` prop is not `undefined`
-			// - the `value` prop was not previously `undefined` and was given a new value
-			hasEverBeenUsedInControlledMode.current =
-				valueProp !== undefined &&
-				previousValueProp !== undefined &&
-				valueProp !== previousValueProp;
-		}
-	}, [ valueProp, previousValueProp ] );
+		prevIsControlled.current = isControlled;
+	}, [ isControlled ] );
 
-	let value, defaultValue;
-
-	if ( hasEverBeenUsedInControlledMode.current ) {
+	if ( isControlled ) {
 		// When in controlled mode, use `''` instead of `undefined`
-		value = valueProp ?? '';
-	} else {
-		// When in uncontrolled mode, the `value` should be intended as the initial value
-		defaultValue = valueProp;
+		return { value: valueProp ?? '', defaultValue: undefined };
 	}
 
-	return { value, defaultValue };
+	// When in uncontrolled mode, the `value` should be intended as the initial value
+	return { value: undefined, defaultValue: valueProp };
 }

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`]((/packages/components/src/toggle-group-control/toggle-group-control/README.md)).
+`ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 
 
 ## Usage

package/src/toggle-group-control/toggle-group-control-option-base/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, generic component for any children of [`ToggleGroupControl`](<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+`ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, generic component for any children of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 
 ## Props
 

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -102,12 +102,13 @@ const isIconStyles = ( {
 }: Pick< ToggleGroupControlProps, 'size' > ) => {
 	const iconButtonSizes = {
 		default: '30px',
-		'__unstable-large': '34px',
+		'__unstable-large': '32px',
 	};
 
 	return css`
 		color: ${ COLORS.gray[ 900 ] };
-		width: ${ iconButtonSizes[ size ] };
+		height: ${ iconButtonSizes[ size ] };
+		aspect-ratio: 1;
 		padding-left: 0;
 		padding-right: 0;
 	`;