@wordpress/components 22.0.0 → 23.0.0

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/higher-order/with-notices/test/index.js

@@ -49,7 +49,7 @@ const BaseComponent = ( { noticeOperations, noticeUI, notifications } ) => {
 				noticeOperations.createNotice( item )
 			);
 		}
-	}, [] );
+	}, [ noticeOperations, notifications ] );
 	return (
 		<div>
 			{ noticeUI }

package/src/icon/index.tsx

@@ -33,7 +33,7 @@ interface BaseProps< P > {
 	/**
 	 * The size (width and height) of the icon.
 	 *
-	 * @default 24
+	 * @default `20` when a Dashicon is rendered, `24` for all other icons.
 	 */
 	size?: number;
 }
@@ -48,13 +48,14 @@ export type Props< P > = BaseProps< P > & AdditionalProps< IconType< P > >;
 
 function Icon< P >( {
 	icon = null,
-	size = 24,
+	size = 'string' === typeof icon ? 20 : 24,
 	...additionalProps
 }: Props< P > ) {
 	if ( 'string' === typeof icon ) {
 		return (
 			<Dashicon
 				icon={ icon }
+				size={ size }
 				{ ...( additionalProps as HTMLProps< HTMLSpanElement > ) }
 			/>
 		);

package/src/icon/test/index.js

@@ -32,6 +32,16 @@ describe( 'Icon', () => {
 		);
 	} );
 
+	it( 'renders a dashicon with custom size', () => {
+		render(
+			<Icon data-testid={ testId } icon="format-image" size={ 10 } />
+		);
+
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'width:10px' );
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'height:10px' );
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'font-size:10px' );
+	} );
+
 	it( 'renders a function', () => {
 		render( <Icon icon={ () => <span data-testid={ testId } /> } /> );
 

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,
@@ -126,6 +126,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { positionToPlacement as __experimentalPopoverPositionToPlacement } from './popover/utils';
 export { default as QueryControls } from './query-controls';
 export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';

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

package/src/input-control/test/index.js

@@ -50,6 +50,24 @@ describe( 'InputControl', () => {
 
 			expect( input ).toBeInTheDocument();
 		} );
+
+		it( 'should render help text as description', () => {
+			render( <InputControl help="My help text" /> );
+			expect(
+				screen.getByRole( 'textbox', { description: 'My help text' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should render help as aria-details when not plain text', () => {
+			render( <InputControl help={ <a href="/foo">My help text</a> } /> );
+
+			const input = screen.getByRole( 'textbox' );
+			const help = screen.getByRole( 'link', { name: 'My help text' } );
+
+			expect(
+				help.closest( `#${ input.getAttribute( 'aria-details' ) }` )
+			).toBeVisible();
+		} );
 	} );
 
 	describe( 'Ensurance of focus for number inputs', () => {

package/src/input-control/types.ts

@@ -15,6 +15,7 @@ import type { useDrag } from '@use-gesture/react';
 import type { StateReducer } from './reducer/state';
 import type { WordPressComponentProps } from '../ui/context';
 import type { FlexProps } from '../flex/types';
+import type { BaseControlProps } from '../base-control/types';
 
 export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
 
@@ -171,6 +172,7 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 
 export interface InputControlProps
 	extends Omit< InputBaseProps, 'children' | 'isFocused' | keyof FlexProps >,
+		Pick< BaseControlProps, 'help' >,
 		/**
 		 * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the
 		 * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from

package/src/item-group/stories/index.js

@@ -150,7 +150,7 @@ const ItemWithChevron = ( {
 
 	const itemClassName = useMemo(
 		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className, cx ]
+		[ alwaysVisible, className, cx, appearingChevron ]
 	);
 
 	const chevronIconClassName = useMemo(

package/src/menu-group/{index.js → index.tsx}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -10,7 +9,27 @@ import classnames from 'classnames';
 import { Children } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
-export function MenuGroup( props ) {
+/**
+ * Internal dependencies
+ */
+import type { MenuGroupProps } from './types';
+
+/**
+ * `MenuGroup` wraps a series of related `MenuItem` components into a common
+ * section.
+ *
+ * ```jsx
+ * import { MenuGroup, MenuItem } from '@wordpress/components';
+ *
+ * const MyMenuGroup = () => (
+ *   <MenuGroup label="Settings">
+ *     <MenuItem>Setting 1</MenuItem>
+ *     <MenuItem>Setting 2</MenuItem>
+ *   </MenuGroup>
+ * );
+ * ```
+ */
+export function MenuGroup( props: MenuGroupProps ) {
 	const { children, className = '', label, hideSeparator } = props;
 	const instanceId = useInstanceId( MenuGroup );
 
@@ -34,7 +53,7 @@ export function MenuGroup( props ) {
 					{ label }
 				</div>
 			) }
-			<div role="group" aria-labelledby={ label ? labelId : null }>
+			<div role="group" aria-labelledby={ label ? labelId : undefined }>
 				{ children }
 			</div>
 		</div>

package/src/menu-group/types.ts

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type MenuGroupProps = {
+	/**
+	 * A CSS `class` to give to the container element.
+	 */
+	className?: string;
+	/**
+	 * Hide the top border on the container.
+	 */
+	hideSeparator?: boolean;
+	/**
+	 * Text to be displayed as the menu group header.
+	 */
+	label?: string;
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+};

package/src/menu-item/style.scss

@@ -45,7 +45,7 @@
 		// Override the button component's tertiary background and color.
 		&.is-tertiary {
 			background: none;
-			color: var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
 			opacity: 0.3;
 		}
 	}

package/src/mobile/bottom-sheet/cell.native.js

@@ -58,7 +58,7 @@ class BottomSheetCell extends Component {
 
 		AccessibilityInfo.isScreenReaderEnabled().then(
 			( isScreenReaderEnabled ) => {
-				if ( this.isCurrent ) {
+				if ( this.isCurrent && isScreenReaderEnabled ) {
 					this.setState( { isScreenReaderEnabled } );
 				}
 			}

package/src/mobile/bottom-sheet/switch-cell.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Switch } from 'react-native';
-import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -20,7 +20,7 @@ export default function BottomSheetSwitchCell( props ) {
 	};
 
 	const getAccessibilityLabel = () => {
-		if ( isEmpty( cellProps.help ) ) {
+		if ( ! cellProps.help ) {
 			return value
 				? sprintf(
 						/* translators: accessibility text. Switch setting ON state. %s: Switch title. */

package/src/mobile/bottom-sheet/test/range-cell.native.js

@@ -33,7 +33,7 @@ afterAll( () => {
 
 it( 'allows modifying units via a11y actions', async () => {
 	const mockOpenUnitPicker = jest.fn();
-	const { getByA11yLabel } = render(
+	const { getByLabelText } = render(
 		<RangeCell
 			label="Opacity"
 			minimumValue={ 0 }
@@ -44,7 +44,7 @@ it( 'allows modifying units via a11y actions', async () => {
 		/>
 	);
 
-	const opacityControl = getByA11yLabel( /Opacity/ );
+	const opacityControl = getByLabelText( /Opacity/ );
 	fireEvent( opacityControl, 'accessibilityAction', {
 		nativeEvent: { actionName: 'activate' },
 	} );
@@ -54,7 +54,7 @@ it( 'allows modifying units via a11y actions', async () => {
 
 describe( 'when range lacks an adjustable unit', () => {
 	it( 'disallows modifying units via a11y actions', async () => {
-		const { getByA11yLabel } = render(
+		const { getByLabelText } = render(
 			<RangeCell
 				label="Opacity"
 				minimumValue={ 0 }
@@ -64,7 +64,7 @@ describe( 'when range lacks an adjustable unit', () => {
 			/>
 		);
 
-		const opacityControl = getByA11yLabel( /Opacity/ );
+		const opacityControl = getByLabelText( /Opacity/ );
 		const { onAccessibilityAction } = opacityControl.props;
 		expect( () =>
 			onAccessibilityAction( { nativeEvent: { actionName: 'activate' } } )