@wordpress/components 25.7.0 → 25.8.0

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

@@ -7,50 +7,76 @@ import userEvent from '@testing-library/user-event';
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
+import Button from '../../button';
 import {
 	ToggleGroupControl,
 	ToggleGroupControlOption,
 	ToggleGroupControlOptionIcon,
 } from '../index';
+import type { ToggleGroupControlProps } from '../types';
+import cleanupTooltip from '../../tooltip/test/utils';
 
-function getWrappingPopoverElement( element: HTMLElement ) {
-	return element.closest( '.components-popover' );
-}
+const ControlledToggleGroupControl = ( {
+	value: valueProp,
+	onChange,
+	...props
+}: ToggleGroupControlProps ) => {
+	const [ value, setValue ] = useState( valueProp );
 
-describe( 'ToggleGroupControl', () => {
-	const options = (
+	return (
 		<>
-			<ToggleGroupControlOption value="rigas" label="R" />
-			<ToggleGroupControlOption value="jack" label="J" />
-		</>
-	);
-	const optionsWithTooltip = (
-		<>
-			<ToggleGroupControlOption
-				value="gnocchi"
-				label="Delicious Gnocchi"
-				aria-label="Click for Delicious Gnocchi"
-				showTooltip={ true }
-			/>
-			<ToggleGroupControlOption
-				value="caponata"
-				label="Sumptuous Caponata"
-				aria-label="Click for Sumptuous Caponata"
+			<ToggleGroupControl
+				{ ...props }
+				onChange={ ( ...changeArgs ) => {
+					setValue( ...changeArgs );
+					onChange?.( ...changeArgs );
+				} }
+				value={ value }
 			/>
+			<Button onClick={ () => setValue( undefined ) }>Reset</Button>
 		</>
 	);
+};
+const options = (
+	<>
+		<ToggleGroupControlOption value="rigas" label="R" />
+		<ToggleGroupControlOption value="jack" label="J" />
+	</>
+);
+const optionsWithTooltip = (
+	<>
+		<ToggleGroupControlOption
+			value="gnocchi"
+			label="Delicious Gnocchi"
+			aria-label="Click for Delicious Gnocchi"
+			showTooltip={ true }
+		/>
+		<ToggleGroupControlOption
+			value="caponata"
+			label="Sumptuous Caponata"
+			aria-label="Click for Sumptuous Caponata"
+		/>
+	</>
+);
+
+describe.each( [
+	[ 'uncontrolled', ToggleGroupControl ],
+	[ 'controlled', ControlledToggleGroupControl ],
+] )( 'ToggleGroupControl %s', ( ...modeAndComponent ) => {
+	const [ mode, Component ] = modeAndComponent;
 
 	describe( 'should render correctly', () => {
 		it( 'with text options', () => {
 			const { container } = render(
-				<ToggleGroupControl label="Test Toggle Group Control">
+				<Component label="Test Toggle Group Control">
 					{ options }
-				</ToggleGroupControl>
+				</Component>
 			);
 
 			expect( container ).toMatchSnapshot();
@@ -58,10 +84,7 @@ describe( 'ToggleGroupControl', () => {
 
 		it( 'with icons', () => {
 			const { container } = render(
-				<ToggleGroupControl
-					value="uppercase"
-					label="Test Toggle Group Control"
-				>
+				<Component value="uppercase" label="Test Toggle Group Control">
 					<ToggleGroupControlOptionIcon
 						value="uppercase"
 						icon={ formatUppercase }
@@ -72,7 +95,7 @@ describe( 'ToggleGroupControl', () => {
 						icon={ formatLowercase }
 						label="Lowercase"
 					/>
-				</ToggleGroupControl>
+				</Component>
 			);
 
 			expect( container ).toMatchSnapshot();
@@ -83,13 +106,13 @@ describe( 'ToggleGroupControl', () => {
 		const mockOnChange = jest.fn();
 
 		render(
-			<ToggleGroupControl
+			<Component
 				value="jack"
 				onChange={ mockOnChange }
 				label="Test Toggle Group Control"
 			>
 				{ options }
-			</ToggleGroupControl>
+			</Component>
 		);
 
 		await user.click( screen.getByRole( 'radio', { name: 'R' } ) );
@@ -100,9 +123,9 @@ describe( 'ToggleGroupControl', () => {
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
 		const user = userEvent.setup();
 		render(
-			<ToggleGroupControl label="Test Toggle Group Control">
+			<Component label="Test Toggle Group Control">
 				{ optionsWithTooltip }
-			</ToggleGroupControl>
+			</Component>
 		);
 
 		const firstRadio = screen.getByLabelText(
@@ -115,21 +138,17 @@ describe( 'ToggleGroupControl', () => {
 			'Click for Delicious Gnocchi'
 		);
 
-		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( tooltip )
-			).toBePositionedPopover()
-		);
+		await waitFor( () => expect( tooltip ).toBeVisible() );
 
-		expect( tooltip ).toBeVisible();
+		await cleanupTooltip( user );
 	} );
 
 	it( 'should not render tooltip', async () => {
 		const user = userEvent.setup();
 		render(
-			<ToggleGroupControl label="Test Toggle Group Control">
+			<Component label="Test Toggle Group Control">
 				{ optionsWithTooltip }
-			</ToggleGroupControl>
+			</Component>
 		);
 
 		const secondRadio = screen.getByLabelText(
@@ -145,6 +164,36 @@ describe( 'ToggleGroupControl', () => {
 		);
 	} );
 
+	if ( mode === 'controlled' ) {
+		it( 'should reset values correctly', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<Component label="Test Toggle Group Control">
+					{ options }
+				</Component>
+			);
+
+			const rigasOption = screen.getByRole( 'radio', { name: 'R' } );
+			const jackOption = screen.getByRole( 'radio', { name: 'J' } );
+
+			await user.click( rigasOption );
+
+			expect( jackOption ).not.toBeChecked();
+			expect( rigasOption ).toBeChecked();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( rigasOption ).not.toBeChecked();
+			expect( jackOption ).toBeChecked();
+
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect( rigasOption ).not.toBeChecked();
+			expect( jackOption ).not.toBeChecked();
+		} );
+	}
+
 	describe( 'isDeselectable', () => {
 		describe( 'isDeselectable = false', () => {
 			it( 'should not be deselectable', async () => {
@@ -152,13 +201,13 @@ describe( 'ToggleGroupControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<ToggleGroupControl
+					<Component
 						value="rigas"
 						label="Test"
 						onChange={ mockOnChange }
 					>
 						{ options }
-					</ToggleGroupControl>
+					</Component>
 				);
 
 				const rigas = screen.getByRole( 'radio', {
@@ -173,9 +222,9 @@ describe( 'ToggleGroupControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<ToggleGroupControl value="rigas" label="Test">
+					<Component value="rigas" label="Test">
 						{ options }
-					</ToggleGroupControl>
+					</Component>
 				);
 
 				const rigas = screen.getByRole( 'radio', {
@@ -186,7 +235,13 @@ describe( 'ToggleGroupControl', () => {
 				expect( rigas ).toHaveFocus();
 
 				await user.tab();
-				expect( rigas.ownerDocument.body ).toHaveFocus();
+
+				const expectedFocusTarget =
+					mode === 'uncontrolled'
+						? rigas.ownerDocument.body
+						: screen.getByRole( 'button', { name: 'Reset' } );
+
+				expect( expectedFocusTarget ).toHaveFocus();
 			} );
 		} );
 
@@ -196,14 +251,14 @@ describe( 'ToggleGroupControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<ToggleGroupControl
+					<Component
 						value="rigas"
 						label="Test"
 						onChange={ mockOnChange }
 						isDeselectable
 					>
 						{ options }
-					</ToggleGroupControl>
+					</Component>
 				);
 
 				await user.click(
@@ -213,26 +268,25 @@ describe( 'ToggleGroupControl', () => {
 					} )
 				);
 				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-				expect( mockOnChange ).toHaveBeenCalledWith( undefined );
-				expect(
+				expect( mockOnChange ).toHaveBeenLastCalledWith( undefined );
+
+				await user.click(
 					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: false,
 					} )
-				).toBeVisible();
+				);
+				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'rigas' );
 			} );
 
 			it( 'should tab to the next option button', async () => {
 				const user = userEvent.setup();
 
 				render(
-					<ToggleGroupControl
-						isDeselectable
-						value="rigas"
-						label="Test"
-					>
+					<Component isDeselectable value="rigas" label="Test">
 						{ options }
-					</ToggleGroupControl>
+					</Component>
 				);
 
 				await user.tab();

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

@@ -77,7 +77,6 @@ Callback when a segment is selected.
 -   Required: No
 -   Default: `() => {}`
 
-
 ### `value`: `string | number`
 
 The value of the `ToggleGroupControl`.

package/src/toggle-group-control/toggle-group-control/as-button-group.tsx

@@ -1,28 +1,21 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-
 /**
  * WordPress dependencies
  */
-import {
-	useMergeRefs,
-	useInstanceId,
-	usePrevious,
-	useResizeObserver,
-} from '@wordpress/compose';
-import { forwardRef, useRef, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
-import ToggleGroupControlContext from '../context';
-import { useUpdateEffect } from '../../utils/hooks';
+import { useControlledValue } from '../../utils';
 import type { WordPressComponentProps } from '../../ui/context';
-import type { ToggleGroupControlMainControlProps } from '../types';
+import ToggleGroupControlContext from '../context';
+import { useComputeControlledOrUncontrolledValue } from './utils';
+import type {
+	ToggleGroupControlMainControlProps,
+	ToggleGroupControlContextProps,
+} from '../types';
 
 function UnforwardedToggleGroupControlAsButtonGroup(
 	{
@@ -31,67 +24,56 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 		label,
 		onChange,
 		size,
-		value,
+		value: valueProp,
+		id: idProp,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
 		'div',
 		false
 	>,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) {
-	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeObserver();
-	const baseId = useInstanceId(
+	const generatedId = useInstanceId(
 		ToggleGroupControlAsButtonGroup,
 		'toggle-group-control-as-button-group'
-	).toString();
-	const [ selectedValue, setSelectedValue ] = useState( value );
-	const groupContext = {
-		baseId,
-		state: selectedValue,
-		setState: setSelectedValue,
-	};
-	const previousValue = usePrevious( value );
+	);
+	const baseId = idProp || generatedId;
 
-	// Propagate groupContext.state change.
-	useUpdateEffect( () => {
-		// Avoid calling onChange if groupContext state changed
-		// from incoming value.
-		if ( previousValue !== groupContext.state ) {
-			onChange( groupContext.state );
-		}
-	}, [ groupContext.state ] );
+	// Use a heuristic to understand if the component is being used in controlled
+	// or uncontrolled mode, and consequently:
+	// - when controlled, convert `undefined` values to `''` (ie. "no value")
+	// - use the `value` prop as the `defaultValue` when uncontrolled
+	const { value, defaultValue } =
+		useComputeControlledOrUncontrolledValue( valueProp );
 
-	// Sync incoming value with groupContext.state.
-	useUpdateEffect( () => {
-		if ( value !== groupContext.state ) {
-			groupContext.setState( value );
-		}
-	}, [ value ] );
+	const [ selectedValue, setSelectedValue ] = useControlledValue( {
+		defaultValue,
+		value,
+		onChange,
+	} );
 
-	return (
-		<ToggleGroupControlContext.Provider
-			value={ {
-				...groupContext,
+	const groupContextValue = useMemo(
+		() =>
+			( {
+				baseId,
+				value: selectedValue,
+				setValue: setSelectedValue,
 				isBlock: ! isAdaptiveWidth,
 				isDeselectable: true,
 				size,
-			} }
-		>
+			} ) as ToggleGroupControlContextProps,
+		[ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]
+	);
+
+	return (
+		<ToggleGroupControlContext.Provider value={ groupContextValue }>
 			<View
 				aria-label={ label }
 				{ ...otherProps }
-				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+				ref={ forwardedRef }
 				role="group"
 			>
-				{ resizeListener }
-				<ToggleGroupControlBackdrop
-					state={ groupContext.state }
-					containerRef={ containerRef }
-					containerWidth={ sizes.width }
-					isAdaptiveWidth={ isAdaptiveWidth }
-				/>
 				{ children }
 			</View>
 		</ToggleGroupControlContext.Provider>

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -3,37 +3,35 @@
  */
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { RadioGroup, useRadioState } from 'reakit';
+import { RadioGroup, useRadioStore } from '@ariakit/react/radio';
 
 /**
  * WordPress dependencies
  */
-import {
-	useMergeRefs,
-	useInstanceId,
-	usePrevious,
-	useResizeObserver,
-} from '@wordpress/compose';
-import { forwardRef, useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
-import ToggleGroupControlContext from '../context';
-import { useUpdateEffect } from '../../utils/hooks';
 import type { WordPressComponentProps } from '../../ui/context';
-import type { ToggleGroupControlMainControlProps } from '../types';
+import ToggleGroupControlContext from '../context';
+import { useComputeControlledOrUncontrolledValue } from './utils';
+import type {
+	ToggleGroupControlMainControlProps,
+	ToggleGroupControlContextProps,
+} from '../types';
 
 function UnforwardedToggleGroupControlAsRadioGroup(
 	{
 		children,
 		isAdaptiveWidth,
 		label,
-		onChange,
+		onChange: onChangeProp,
 		size,
-		value,
+		value: valueProp,
+		id: idProp,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -42,52 +40,58 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 	>,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
-	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeObserver();
-	const baseId = useInstanceId(
+	const generatedId = useInstanceId(
 		ToggleGroupControlAsRadioGroup,
 		'toggle-group-control-as-radio-group'
-	).toString();
-	const radio = useRadioState( {
-		baseId,
-		state: value,
+	);
+	const baseId = idProp || generatedId;
+
+	// Use a heuristic to understand if the component is being used in controlled
+	// or uncontrolled mode, and consequently:
+	// - when controlled, convert `undefined` values to `''` (ie. "no value")
+	// - use the `value` prop as the `defaultValue` when uncontrolled
+	const { value, defaultValue } =
+		useComputeControlledOrUncontrolledValue( valueProp );
+
+	// `useRadioStore`'s `setValue` prop can be called with `null`, while
+	// the component's `onChange` prop only expects `undefined`
+	const wrappedOnChangeProp = onChangeProp
+		? ( v: string | number | null ) => {
+				onChangeProp( v ?? undefined );
+		  }
+		: undefined;
+
+	const radio = useRadioStore( {
+		defaultValue,
+		value,
+		setValue: wrappedOnChangeProp,
 	} );
-	const previousValue = usePrevious( value );
 
-	// Propagate radio.state change.
-	useUpdateEffect( () => {
-		// Avoid calling onChange if radio state changed
-		// from incoming value.
-		if ( previousValue !== radio.state ) {
-			onChange( radio.state );
-		}
-	}, [ radio.state ] );
+	const selectedValue = radio.useState( 'value' );
+	const setValue = radio.setValue;
 
-	// Sync incoming value with radio.state.
-	useUpdateEffect( () => {
-		if ( value !== radio.state ) {
-			radio.setState( value );
-		}
-	}, [ value ] );
+	const groupContextValue = useMemo(
+		() =>
+			( {
+				baseId,
+				isBlock: ! isAdaptiveWidth,
+				size,
+				value: selectedValue,
+				setValue,
+			} ) as ToggleGroupControlContextProps,
+		[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]
+	);
 
 	return (
-		<ToggleGroupControlContext.Provider
-			value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
-		>
+		<ToggleGroupControlContext.Provider value={ groupContextValue }>
 			<RadioGroup
-				{ ...radio }
+				store={ radio }
 				aria-label={ label }
 				as={ View }
 				{ ...otherProps }
-				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+				id={ baseId }
+				ref={ forwardedRef }
 			>
-				{ resizeListener }
-				<ToggleGroupControlBackdrop
-					state={ radio.state }
-					containerRef={ containerRef }
-					containerWidth={ sizes.width }
-					isAdaptiveWidth={ isAdaptiveWidth }
-				/>
 				{ children }
 			</RadioGroup>
 		</ToggleGroupControlContext.Provider>

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

@@ -2,9 +2,13 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { LayoutGroup } from 'framer-motion';
+
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 
@@ -21,8 +25,6 @@ import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 
-const noop = () => {};
-
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
@@ -36,18 +38,21 @@ function UnconnectedToggleGroupControl(
 		label,
 		hideLabelFromVision = false,
 		help,
-		onChange = noop,
+		onChange,
 		size = 'default',
 		value,
 		children,
 		...otherProps
 	} = useContextSystem( props, 'ToggleGroupControl' );
+
+	const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
+
 	const cx = useCx();
 
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.ToggleGroupControl( { isBlock, isDeselectable, size } ),
+				styles.toggleGroupControl( { isBlock, isDeselectable, size } ),
 				isBlock && styles.block,
 				className
 			),
@@ -70,7 +75,6 @@ function UnconnectedToggleGroupControl(
 			) }
 			<MainControl
 				{ ...otherProps }
-				children={ children }
 				className={ classes }
 				isAdaptiveWidth={ isAdaptiveWidth }
 				label={ label }
@@ -78,7 +82,9 @@ function UnconnectedToggleGroupControl(
 				ref={ forwardedRef }
 				size={ size }
 				value={ value }
-			/>
+			>
+				<LayoutGroup id={ baseId }>{ children }</LayoutGroup>
+			</MainControl>
 		</BaseControl>
 	);
 }