@wordpress/components 30.2.1-next.f34ab90e9.0 → 30.3.0

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

@@ -11,6 +11,8 @@ import type { ToggleGroupControlContextProps } from './types';
 const ToggleGroupControlContext = createContext(
 	{} as ToggleGroupControlContextProps
 );
+ToggleGroupControlContext.displayName = 'ToggleGroupControlContext';
+
 export const useToggleGroupControlContext = () =>
 	useContext( ToggleGroupControlContext );
 export default ToggleGroupControlContext;

package/src/toolbar/toolbar-context/index.ts

@@ -11,5 +11,6 @@ import { createContext } from '@wordpress/element';
 const ToolbarContext = createContext< Ariakit.ToolbarStore | undefined >(
 	undefined
 );
+ToolbarContext.displayName = 'ToolbarContext';
 
 export default ToolbarContext;

package/src/tools-panel/context.ts

@@ -22,6 +22,7 @@ export const ToolsPanelContext = createContext< ToolsPanelContextType >( {
 	deregisterResetAllFilter: noop,
 	areAllOptionalControlsHidden: true,
 } );
+ToolsPanelContext.displayName = 'ToolsPanelContext';
 
 export const useToolsPanelContext = () =>
 	useContext< ToolsPanelContextType >( ToolsPanelContext );

package/src/tools-panel/stories/index.story.tsx

@@ -54,7 +54,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 	const [ height, setHeight ] = useState< string | undefined >();
 	const [ minHeight, setMinHeight ] = useState< string | undefined >();
 	const [ width, setWidth ] = useState< string | undefined >();
-	const [ scale, setScale ] = useState< React.ReactText | undefined >();
+	const [ scale, setScale ] = useState< number | string | undefined >();
 
 	const resetAll: typeof resetAllProp = ( filters ) => {
 		setHeight( undefined );
@@ -414,7 +414,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 } ) => {
 	const [ attributes, setAttributes ] = useState< {
 		height?: string;
-		scale?: React.ReactText;
+		scale?: number | string;
 	} >( {} );
 	const { height, scale } = attributes;
 
@@ -512,7 +512,7 @@ export const WithConditionallyRenderedControl: StoryFn<
 > = ( { resetAll: resetAllProp, panelId, ...props } ) => {
 	const [ attributes, setAttributes ] = useState< {
 		height?: string;
-		scale?: React.ReactText;
+		scale?: number | string;
 	} >( {} );
 	const { height, scale } = attributes;
 

package/src/tooltip/index.tsx

@@ -30,6 +30,7 @@ import { positionToPlacement } from '../popover/utils';
 const TooltipInternalContext = createContext< TooltipInternalContextType >( {
 	isNestedInTooltip: false,
 } );
+TooltipInternalContext.displayName = 'TooltipInternalContext';
 
 /**
  * Time over anchor to wait before showing tooltip

package/src/tree-grid/roving-tab-index-context.ts

@@ -12,6 +12,8 @@ const RovingTabIndexContext = createContext<
 	  }
 	| undefined
 >( undefined );
+RovingTabIndexContext.displayName = 'RovingTabIndexContext';
+
 export const useRovingTabIndexContext = () =>
 	useContext( RovingTabIndexContext );
 export const RovingTabIndexProvider = RovingTabIndexContext.Provider;

package/src/utils/font-size.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, ReactText } from 'react';
+import type { CSSProperties } from 'react';
 
 /**
  * Internal dependencies
@@ -61,7 +61,7 @@ export function getFontSize(
 	return `calc(${ ratio } * ${ CONFIG.fontSize })`;
 }
 
-export function getHeadingFontSize( size: ReactText = 3 ): string {
+export function getHeadingFontSize( size: number | string = 3 ): string {
 	if ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {
 		return getFontSize( size );
 	}

package/src/utils/get-valid-children.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';
+import type { ReactNode, ReactElement, ReactPortal } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,9 @@ import { Children, isValidElement } from '@wordpress/element';
  */
 export function getValidChildren(
 	children: ReactNode
-): Array< ReactChild | ReactFragment | ReactPortal > {
+): Array<
+	ReactElement | number | string | Iterable< ReactNode > | ReactPortal
+> {
 	if ( typeof children === 'string' ) {
 		return [ children ];
 	}

package/src/validated-form-controls/components/stories/overview.story.tsx

@@ -1,12 +1,14 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { useRef, useCallback, useState } from '@wordpress/element';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react';
+import { useRef, useCallback, useState } from '@wordpress/element';
+import { debounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -14,7 +16,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ValidatedInputControl } from '..';
 import { formDecorator } from './story-utils';
 import type { ControlWithError } from '../../control-with-error';
-import { debounce } from '@wordpress/compose';
 
 const meta: Meta< typeof ControlWithError > = {
 	title: 'Components/Selection & Input/Validated Form Controls/Overview',
@@ -166,24 +167,19 @@ export const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {
 				} );
 
 				clearTimeout( timeoutRef.current );
-				timeoutRef.current = setTimeout(
-					() => {
-						if ( v?.toString().toLowerCase() === 'error' ) {
-							setCustomValidity( {
-								type: 'invalid',
-								message: 'The word "error" is not allowed.',
-							} );
-						} else {
-							setCustomValidity( {
-								type: 'valid',
-								message: 'Validated',
-							} );
-						}
-					},
-					// Mimics a random server response time.
-					// eslint-disable-next-line no-restricted-syntax
-					Math.random() < 0.5 ? 1500 : 300
-				);
+				timeoutRef.current = setTimeout( () => {
+					if ( v?.toString().toLowerCase() === 'error' ) {
+						setCustomValidity( {
+							type: 'invalid',
+							message: 'The word "error" is not allowed.',
+						} );
+					} else {
+						setCustomValidity( {
+							type: 'valid',
+							message: 'Validated',
+						} );
+					}
+				}, 1500 );
 			}, 500 ),
 			[]
 		);
@@ -200,9 +196,95 @@ export const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {
 			/>
 		);
 	},
+	args: {
+		label: 'Text',
+		help: 'The word "error" will trigger an error asynchronously.',
+		required: true,
+	},
 };
-AsyncValidation.args = {
-	label: 'Text',
-	help: 'The word "error" will trigger an error asynchronously.',
-	required: true,
+
+// Not exported - Only for testing purposes.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const AsyncValidationWithTest: StoryObj< typeof ValidatedInputControl > = {
+	...AsyncValidation,
+	play: async ( { canvasElement } ) => {
+		const canvas = within( canvasElement );
+		await userEvent.click( canvas.getByRole( 'textbox' ) );
+		await userEvent.type( canvas.getByRole( 'textbox' ), 'valid text', {
+			delay: 10,
+		} );
+		await userEvent.tab();
+
+		await waitFor(
+			() => {
+				expect( canvas.getByText( 'Validated' ) ).toBeVisible();
+			},
+			{ timeout: 2500 }
+		);
+
+		await new Promise( ( resolve ) => setTimeout( resolve, 500 ) );
+		await userEvent.clear( canvas.getByRole( 'textbox' ) );
+
+		// Should show validating state when transitioning from valid to invalid.
+		await waitFor(
+			() => {
+				expect( canvas.getByText( 'Validating...' ) ).toBeVisible();
+			},
+			{ timeout: 2500 }
+		);
+
+		await waitFor(
+			() => {
+				expect(
+					canvas.getByText( 'Please fill out this field.' )
+				).toBeVisible();
+			},
+			{ timeout: 2500 }
+		);
+
+		// Should not show validating state if there were no changes
+		// after a valid/invalid state was already shown.
+		await new Promise( ( resolve ) => setTimeout( resolve, 1500 ) );
+		await expect(
+			canvas.queryByText( 'Validating...' )
+		).not.toBeInTheDocument();
+
+		await userEvent.type( canvas.getByRole( 'textbox' ), 'e', {
+			delay: 10,
+		} );
+
+		// Should not show valid state if server has not yet responded.
+		await expect(
+			canvas.queryByText( 'Validated' )
+		).not.toBeInTheDocument();
+
+		// Should show validating state when transitioning from invalid to valid.
+		await waitFor(
+			() => {
+				expect( canvas.getByText( 'Validating...' ) ).toBeVisible();
+			},
+			{ timeout: 2500 }
+		);
+
+		await waitFor(
+			() => {
+				expect( canvas.getByText( 'Validated' ) ).toBeVisible();
+			},
+			{ timeout: 2500 }
+		);
+
+		await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
+		await userEvent.type( canvas.getByRole( 'textbox' ), 'rror', {
+			delay: 10,
+		} );
+
+		await waitFor(
+			() => {
+				expect(
+					canvas.getByText( 'The word "error" is not allowed.' )
+				).toBeVisible();
+			},
+			{ timeout: 2500 }
+		);
+	},
 };

package/src/validated-form-controls/control-with-error.tsx

@@ -1,11 +1,8 @@
 /**
  * WordPress dependencies
  */
+import { usePrevious } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-
-/**
- * External dependencies
- */
 import {
 	cloneElement,
 	forwardRef,
@@ -98,6 +95,7 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		| undefined
 	>();
 	const [ isTouched, setIsTouched ] = useState( false );
+	const previousCustomValidityType = usePrevious( customValidity?.type );
 
 	// Ensure that error messages are visible after user attemps to submit a form
 	// with multiple invalid fields.
@@ -116,7 +114,7 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		};
 	} );
 
-	useEffect( () => {
+	useEffect( (): ReturnType< React.EffectCallback > => {
 		if ( ! isTouched ) {
 			return;
 		}
@@ -134,6 +132,9 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 			case 'validating': {
 				// Wait before showing a validating state.
 				const timer = setTimeout( () => {
+					validityTarget?.setCustomValidity( '' );
+					setErrorMessage( undefined );
+
 					setStatusMessage( {
 						type: 'validating',
 						message: customValidity.message,
@@ -143,6 +144,12 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 				return () => clearTimeout( timer );
 			}
 			case 'valid': {
+				// Ensures that we wait for any async responses before showing
+				// a synchronously valid state.
+				if ( previousCustomValidityType === 'valid' ) {
+					break;
+				}
+
 				validityTarget?.setCustomValidity( '' );
 				setErrorMessage( validityTarget?.validationMessage );
 
@@ -150,7 +157,7 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 					type: 'valid',
 					message: customValidity.message,
 				} );
-				return;
+				break;
 			}
 			case 'invalid': {
 				validityTarget?.setCustomValidity(
@@ -159,7 +166,7 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 				setErrorMessage( validityTarget?.validationMessage );
 
 				setStatusMessage( undefined );
-				return undefined;
+				break;
 			}
 		}
 	}, [
@@ -167,9 +174,14 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		customValidity?.type,
 		customValidity?.message,
 		getValidityTarget,
+		previousCustomValidityType,
 	] );
 
 	const onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {
+		if ( isTouched ) {
+			return;
+		}
+
 		// Only consider "blurred from the component" if focus has fully left the wrapping div.
 		// This prevents unnecessary blurs from components with multiple focusable elements.
 		if (
@@ -177,17 +189,6 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 			! event.currentTarget.contains( event.relatedTarget )
 		) {
 			setIsTouched( true );
-
-			const validityTarget = getValidityTarget();
-
-			// Prevents a double flash of the native error tooltip when the control is already showing one.
-			if ( ! validityTarget?.validity.valid ) {
-				if ( ! errorMessage ) {
-					setErrorMessage( validityTarget?.validationMessage );
-				}
-				return;
-			}
-
 			onValidate?.();
 		}
 	};

package/src/validated-form-controls/test/control-with-error.tsx

@@ -0,0 +1,224 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedInputControl } from '../components';
+
+describe( 'ControlWithError', () => {
+	describe( 'Async Validation', () => {
+		beforeEach( () => {
+			jest.useFakeTimers();
+		} );
+
+		afterEach( () => {
+			jest.useRealTimers();
+		} );
+
+		const AsyncValidatedInputControl = ( {
+			serverDelayMs,
+			...restProps
+		}: {
+			serverDelayMs: number;
+		} & React.ComponentProps< typeof ValidatedInputControl > ) => {
+			const [ text, setText ] = useState( '' );
+			const [ customValidity, setCustomValidity ] =
+				useState<
+					React.ComponentProps<
+						typeof ValidatedInputControl
+					>[ 'customValidity' ]
+				>( undefined );
+
+			const onValidate = useCallback(
+				( value?: string ) => {
+					setCustomValidity( {
+						type: 'validating',
+						message: 'Validating...',
+					} );
+
+					// Simulate delayed server response
+					setTimeout( () => {
+						if ( value?.toLowerCase() === 'error' ) {
+							setCustomValidity( {
+								type: 'invalid',
+								message: 'The word "error" is not allowed.',
+							} );
+						} else {
+							setCustomValidity( {
+								type: 'valid',
+								message: 'Validated',
+							} );
+						}
+					}, serverDelayMs );
+				},
+				[ serverDelayMs ]
+			);
+
+			return (
+				<ValidatedInputControl
+					label="Text"
+					value={ text }
+					onChange={ ( newValue ) => {
+						setText( newValue ?? '' );
+					} }
+					onValidate={ onValidate }
+					customValidity={ customValidity }
+					{ ...restProps }
+				/>
+			);
+		};
+
+		it( 'should not show "validating" state if it takes less than 1000ms', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			render( <AsyncValidatedInputControl serverDelayMs={ 500 } /> );
+
+			const input = screen.getByRole( 'textbox' );
+
+			await user.type( input, 'valid text' );
+
+			// Blur to trigger validation
+			await user.tab();
+
+			// Fast-forward to right before the server response
+			act( () => jest.advanceTimersByTime( 499 ) );
+
+			// The validating state should not be shown
+			await waitFor( () => {
+				expect(
+					screen.queryByText( 'Validating...' )
+				).not.toBeInTheDocument();
+			} );
+
+			// Fast-forward past the server delay to show validation result
+			act( () => jest.advanceTimersByTime( 1 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validated' ) ).toBeVisible();
+			} );
+		} );
+
+		it( 'should show "validating" state if it takes more than 1000ms', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			render( <AsyncValidatedInputControl serverDelayMs={ 1200 } /> );
+
+			const input = screen.getByRole( 'textbox' );
+
+			await user.type( input, 'valid text' );
+
+			// Blur to trigger validation
+			await user.tab();
+
+			// Initially, no validating message should be shown (before 1s delay)
+			expect(
+				screen.queryByText( 'Validating...' )
+			).not.toBeInTheDocument();
+
+			// Fast-forward past the 1s delay to show validating state
+			act( () => jest.advanceTimersByTime( 1000 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validating...' ) ).toBeVisible();
+			} );
+
+			// Fast-forward past the server delay to show validation result
+			act( () => jest.advanceTimersByTime( 200 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validated' ) ).toBeVisible();
+			} );
+
+			// Test error case
+			await user.clear( input );
+			await user.type( input, 'error' );
+
+			// Blur to trigger validation
+			await user.tab();
+
+			act( () => jest.advanceTimersByTime( 1000 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validating...' ) ).toBeVisible();
+			} );
+
+			act( () => jest.advanceTimersByTime( 200 ) );
+
+			await waitFor( () => {
+				expect(
+					screen.getByText( 'The word "error" is not allowed.' )
+				).toBeVisible();
+			} );
+
+			// Test editing after error
+			await user.type( input, '{backspace}' );
+
+			act( () => jest.advanceTimersByTime( 1000 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validating...' ) ).toBeVisible();
+			} );
+
+			act( () => jest.advanceTimersByTime( 200 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validated' ) ).toBeVisible();
+			} );
+		} );
+
+		it( 'should not show a "valid" state until the server response is received, even if locally valid', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			render(
+				<AsyncValidatedInputControl serverDelayMs={ 1200 } required />
+			);
+
+			const input = screen.getByRole( 'textbox' );
+
+			await user.type( input, 'valid text' );
+
+			await user.tab();
+			act( () => jest.advanceTimersByTime( 1200 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validated' ) ).toBeVisible();
+			} );
+
+			await user.clear( input );
+
+			act( () => jest.advanceTimersByTime( 1000 ) );
+
+			await waitFor( () => {
+				expect(
+					screen.getByText( 'Constraints not satisfied' )
+				).toBeVisible();
+			} );
+
+			await user.type( input, 'error' );
+
+			act( () => jest.advanceTimersByTime( 200 ) );
+
+			expect( screen.queryByText( 'Validated' ) ).not.toBeInTheDocument();
+
+			act( () => jest.advanceTimersByTime( 1000 ) );
+
+			await waitFor( () => {
+				expect(
+					screen.getByText( 'The word "error" is not allowed.' )
+				).toBeVisible();
+			} );
+		} );
+	} );
+} );