@wordpress/components 25.13.0 → 25.14.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/toggle-group-control/test/index.tsx

@@ -25,8 +25,11 @@ import cleanupTooltip from '../../tooltip/test/utils';
 const ControlledToggleGroupControl = ( {
 	value: valueProp,
 	onChange,
+	extraButtonOptions,
 	...props
-}: ToggleGroupControlProps ) => {
+}: ToggleGroupControlProps & {
+	extraButtonOptions?: { name: string; value: string }[];
+} ) => {
 	const [ value, setValue ] = useState( valueProp );
 
 	return (
@@ -40,6 +43,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>
+			) ) }
 		</>
 	);
 };
@@ -192,6 +203,48 @@ describe.each( [
 			expect( rigasOption ).not.toBeChecked();
 			expect( jackOption ).not.toBeChecked();
 		} );
+
+		it( 'should update correctly when triggered by external updates', async () => {
+			const user = userEvent.setup();
+
+			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 user.click( screen.getByRole( 'button', { name: 'Jack' } ) );
+			expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'R' } )
+			).not.toBeChecked();
+
+			await user.click( screen.getByRole( 'button', { name: 'Rigas' } ) );
+			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
+
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+			expect(
+				screen.getByRole( 'radio', { name: 'R' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
+		} );
 	}
 
 	describe( 'isDeselectable', () => {

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/tools-panel/tools-panel-item/hook.ts

@@ -52,11 +52,14 @@ export function useToolsPanelItem(
 		__experimentalLastVisibleItemClass,
 	} = useToolsPanelContext();
 
-	const hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );
-	const resetAllFilterCallback = useCallback( resetAllFilter, [
-		panelId,
-		resetAllFilter,
-	] );
+	// hasValue is a new function on every render, so do not add it as a
+	// dependency to the useCallback hook! If needed, we should use a ref.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const hasValueCallback = useCallback( hasValue, [ panelId ] );
+	// resetAllFilter is a new function on every render, so do not add it as a
+	// dependency to the useCallback hook! If needed, we should use a ref.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
 	const previousPanelId = usePrevious( currentPanelId );
 
 	const hasMatchingPanel =
@@ -126,27 +129,13 @@ export function useToolsPanelItem(
 	const newValueSet = isValueSet && ! wasValueSet;
 
 	// Notify the panel when an item's value has been set.
-	//
-	// 1. For default controls, this is so "reset" appears beside its menu item.
-	// 2. For optional controls, when the panel ID is `null`, it allows the
-	// panel to ensure the item is toggled on for display in the menu, given the
-	// value has been set external to the control.
 	useEffect( () => {
 		if ( ! newValueSet ) {
 			return;
 		}
 
-		if ( isShownByDefault || currentPanelId === null ) {
-			flagItemCustomization( label, menuGroup );
-		}
-	}, [
-		currentPanelId,
-		newValueSet,
-		isShownByDefault,
-		menuGroup,
-		label,
-		flagItemCustomization,
-	] );
+		flagItemCustomization( label, menuGroup );
+	}, [ newValueSet, menuGroup, label, flagItemCustomization ] );
 
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.