@wordpress/components 22.1.0 → 23.0.0

package/src/grid/test/grid.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,14 +12,14 @@ import CONFIG from '../../utils/config-values';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render(
-			<Grid>
+		render(
+			<Grid data-testid="grid">
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 2, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 3 )`,
@@ -27,15 +27,15 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render gap', () => {
-		const { container } = render(
-			<Grid columns={ 3 } gap={ 4 }>
+		render(
+			<Grid columns={ 3 } gap={ 4 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 4 )`,
@@ -43,60 +43,60 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render custom columns', () => {
-		const { container } = render(
-			<Grid columns={ 7 }>
+		render(
+			<Grid columns={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom rows', () => {
-		const { container } = render(
-			<Grid rows={ 7 }>
+		render(
+			<Grid rows={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
-			<Grid align="flex-start">
+		render(
+			<Grid align="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			alignItems: 'flex-start',
 			display: 'grid',
 		} );
 	} );
 
 	test( 'should render alignment spaced', () => {
-		const { container } = render(
-			<Grid alignment="spaced">
+		render(
+			<Grid alignment="spaced" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			alignItems: 'center',
 			justifyContent: 'space-between',
@@ -104,60 +104,60 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render justify', () => {
-		const { container } = render(
-			<Grid justify="flex-start">
+		render(
+			<Grid justify="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			justifyContent: 'flex-start',
 		} );
 	} );
 
 	test( 'should render isInline', () => {
-		const { container } = render(
-			<Grid columns={ 3 } isInline>
+		render(
+			<Grid columns={ 3 } isInline data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'inline-grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom templateColumns', () => {
-		const { container } = render(
-			<Grid templateColumns="1fr auto 1fr">
+		render(
+			<Grid templateColumns="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: '1fr auto 1fr',
 		} );
 	} );
 
 	test( 'should render custom templateRows', () => {
-		const { container } = render(
-			<Grid templateRows="1fr auto 1fr">
+		render(
+			<Grid templateRows="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: '1fr auto 1fr',
 		} );

package/src/higher-order/navigate-regions/style.scss

@@ -56,29 +56,9 @@
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
 	}
-
-	// Edit site Navigation Drawer.
-	.interface-interface-skeleton__drawer {
-		z-index: z-index(".edit-site-navigation-toggle");
-
-		.interface-navigable-region__stacker,
-		.edit-site-navigation-toggle {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-
-		.edit-site-navigation-toggle.is-open {
-			outline: none;
-		}
-
-		.edit-site-navigation-toggle__button {
-			z-index: -1;
-		}
-	}
 }
 
-// Fixes for edge cases.
-// Edit site Drawer.
-.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
+.interface-navigable-region__stacker {
 	height: 100%;
+	width: 100%;
 }

package/src/higher-order/with-fallback-styles/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,9 @@ export default ( mapNodeToProps ) =>
 						this.props
 					);
 
-					if ( ! isEqual( newFallbackStyles, fallbackStyles ) ) {
+					if (
+						! fastDeepEqual( newFallbackStyles, fallbackStyles )
+					) {
 						this.setState( {
 							fallbackStyles: newFallbackStyles,
 							grabStylesCompleted:

package/src/higher-order/with-filters/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -64,11 +64,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should not re-render component when new filter added before component was mounted', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
@@ -87,109 +83,103 @@ describe( 'withFilters', () => {
 
 		jest.runAllTimers();
 
-		expect( spy ).toHaveBeenCalledTimes( 1 );
+		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should re-render component once when new filter added after component was mounted', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
+	it( 'should re-render component once when new filter added after component was mounted', async () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const { container } = render( <EnhancedComponent /> );
 
-		spy.mockClear();
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
-		);
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 1 );
+		SpiedComponent.mockClear();
+
+		await act( () => {
+			addFilter(
+				hookName,
+				'test/enhanced-component-spy-1',
+				( FilteredComponent ) => () =>
+					(
+						<blockquote>
+							<FilteredComponent />
+						</blockquote>
+					)
+			);
+			jest.runAllTimers();
+		} );
+
+		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when two filters added in the same animation frame', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
+	it( 'should re-render component once when two filters added in the same animation frame', async () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const { container } = render( <EnhancedComponent /> );
 
-		spy.mockClear();
-
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
-		);
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-2',
-			( FilteredComponent ) => () =>
-				(
-					<section>
-						<FilteredComponent />
-					</section>
-				)
-		);
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 1 );
+		SpiedComponent.mockClear();
+
+		await act( () => {
+			addFilter(
+				hookName,
+				'test/enhanced-component-spy-1',
+				( FilteredComponent ) => () =>
+					(
+						<blockquote>
+							<FilteredComponent />
+						</blockquote>
+					)
+			);
+			addFilter(
+				hookName,
+				'test/enhanced-component-spy-2',
+				( FilteredComponent ) => () =>
+					(
+						<section>
+							<FilteredComponent />
+						</section>
+					)
+			);
+			jest.runAllTimers();
+		} );
+
+		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
+	it( 'should re-render component twice when new filter added and removed in two different animation frames', async () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 		const { container } = render( <EnhancedComponent /> );
 
-		spy.mockClear();
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy',
-			( FilteredComponent ) => () =>
-				(
-					<div>
-						<FilteredComponent />
-					</div>
-				)
-		);
-		jest.runAllTimers();
-
-		removeFilter( hookName, 'test/enhanced-component-spy' );
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 2 );
+		SpiedComponent.mockClear();
+
+		await act( () => {
+			addFilter(
+				hookName,
+				'test/enhanced-component-spy',
+				( FilteredComponent ) => () =>
+					(
+						<div>
+							<FilteredComponent />
+						</div>
+					)
+			);
+			jest.runAllTimers();
+		} );
+
+		await act( () => {
+			removeFilter( hookName, 'test/enhanced-component-spy' );
+			jest.runAllTimers();
+		} );
+
+		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render both components once each when one filter added', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
+	it( 'should re-render both components once each when one filter added', async () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const CombinedComponents = () => (
@@ -200,20 +190,23 @@ describe( 'withFilters', () => {
 		);
 		const { container } = render( <CombinedComponents /> );
 
-		spy.mockClear();
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
-		);
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 2 );
+		SpiedComponent.mockClear();
+
+		await act( () => {
+			addFilter(
+				hookName,
+				'test/enhanced-component-spy-1',
+				( FilteredComponent ) => () =>
+					(
+						<blockquote>
+							<FilteredComponent />
+						</blockquote>
+					)
+			);
+			jest.runAllTimers();
+		} );
+
+		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/higher-order/with-focus-return/test/index.js

@@ -88,7 +88,7 @@ describe( 'withFocusReturn()', () => {
 				advanceTimers: jest.advanceTimersByTime,
 			} );
 
-			const { container, unmount } = render( <Composite />, {
+			const { unmount } = render( <Composite />, {
 				container: document.body.appendChild(
 					document.createElement( 'div' )
 				),
@@ -103,9 +103,6 @@ describe( 'withFocusReturn()', () => {
 
 			// Should return to the activeElement saved with this component.
 			unmount();
-			render( <div></div>, {
-				container,
-			} );
 			expect( activeElement ).toHaveFocus();
 		} );
 	} );

package/src/index.js

@@ -17,13 +17,13 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion } from './animation';
+export { __unstableMotion, __unstableAnimatePresence } from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,
 	useAutocompleteProps as __unstableUseAutocompleteProps,
 } from './autocomplete';
-export { default as BaseControl } from './base-control';
+export { default as BaseControl, useBaseControlProps } from './base-control';
 export {
 	BorderBoxControl as __experimentalBorderBoxControl,
 	hasSplitBorders as __experimentalHasSplitBorders,

package/src/input-control/index.tsx

@@ -18,6 +18,7 @@ import InputField from './input-field';
 import type { InputControlProps } from './types';
 import { space } from '../ui/utils/space';
 import { useDraft } from './utils';
+import BaseControl from '../base-control';
 
 const noop = () => {};
 
@@ -35,6 +36,7 @@ export function UnforwardedInputControl(
 		__unstableInputWidth,
 		className,
 		disabled = false,
+		help,
 		hideLabelFromVision = false,
 		id: idProp,
 		isPressEnterToChange = false,
@@ -63,43 +65,55 @@ export function UnforwardedInputControl(
 		onChange,
 	} );
 
+	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
+	const helpPropName =
+		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
+	const helpProp = !! help ? { [ helpPropName ]: `${ id }__help` } : {};
+
 	return (
-		<InputBase
-			__next36pxDefaultSize={ __next36pxDefaultSize }
-			__unstableInputWidth={ __unstableInputWidth }
+		<BaseControl
 			className={ classes }
-			disabled={ disabled }
-			gap={ 3 }
-			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
 			id={ id }
-			isFocused={ isFocused }
-			justify="left"
-			label={ label }
-			labelPosition={ labelPosition }
-			prefix={ prefix }
-			size={ size }
-			style={ style }
-			suffix={ suffix }
+			__nextHasNoMarginBottom
 		>
-			<InputField
-				{ ...props }
+			<InputBase
 				__next36pxDefaultSize={ __next36pxDefaultSize }
-				className="components-input-control__input"
+				__unstableInputWidth={ __unstableInputWidth }
 				disabled={ disabled }
+				gap={ 3 }
+				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
 				isFocused={ isFocused }
-				isPressEnterToChange={ isPressEnterToChange }
-				onKeyDown={ onKeyDown }
-				onValidate={ onValidate }
-				paddingInlineStart={ prefix ? space( 2 ) : undefined }
-				paddingInlineEnd={ suffix ? space( 2 ) : undefined }
-				ref={ ref }
-				setIsFocused={ setIsFocused }
+				justify="left"
+				label={ label }
+				labelPosition={ labelPosition }
+				prefix={ prefix }
 				size={ size }
-				stateReducer={ stateReducer }
-				{ ...draftHookProps }
-			/>
-		</InputBase>
+				style={ style }
+				suffix={ suffix }
+			>
+				<InputField
+					{ ...props }
+					{ ...helpProp }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
+					className="components-input-control__input"
+					disabled={ disabled }
+					id={ id }
+					isFocused={ isFocused }
+					isPressEnterToChange={ isPressEnterToChange }
+					onKeyDown={ onKeyDown }
+					onValidate={ onValidate }
+					paddingInlineStart={ prefix ? space( 2 ) : undefined }
+					paddingInlineEnd={ suffix ? space( 2 ) : undefined }
+					ref={ ref }
+					setIsFocused={ setIsFocused }
+					size={ size }
+					stateReducer={ stateReducer }
+					{ ...draftHookProps }
+				/>
+			</InputBase>
+		</BaseControl>
 	);
 }
 

package/src/input-control/input-base.tsx

@@ -33,14 +33,21 @@ function useUniqueId( idProp?: string ) {
 
 // Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
-	const props: { direction?: string; gap?: number; justify?: string } = {};
+	const props: {
+		direction?: string;
+		gap?: number;
+		justify?: string;
+		expanded?: boolean;
+	} = {};
 	switch ( labelPosition ) {
 		case 'top':
 			props.direction = 'column';
+			props.expanded = false;
 			props.gap = 0;
 			break;
 		case 'bottom':
 			props.direction = 'column-reverse';
+			props.expanded = false;
 			props.gap = 0;
 			break;
 		case 'edge':

package/src/input-control/stories/index.tsx

@@ -40,6 +40,12 @@ Default.args = {
 	placeholder: 'Placeholder',
 };
 
+export const WithHelpText = Template.bind( {} );
+WithHelpText.args = {
+	...Default.args,
+	help: 'Help text to describe the control.',
+};
+
 /**
  * A `prefix` can be inserted before the input. By default, the prefix is aligned with the edge of the input border,
  * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided