@wordpress/components 22.1.0 → 23.1.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
@@ -13,6 +13,8 @@ import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
  */
 import withFilters from '..';
 
+jest.useFakeTimers();
+
 describe( 'withFilters', () => {
 	const hookName = 'EnhancedComponent';
 	const MyComponent = () => <div>My component</div>;
@@ -64,11 +66,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',
@@ -83,24 +81,20 @@ describe( 'withFilters', () => {
 
 		const { container } = render( <EnhancedComponent /> );
 
-		expect( container ).toMatchSnapshot();
-
-		jest.runAllTimers();
+		act( () => jest.runAllTimers() );
 
-		expect( spy ).toHaveBeenCalledTimes( 1 );
+		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	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>;
-		};
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const { container } = render( <EnhancedComponent /> );
 
-		spy.mockClear();
+		SpiedComponent.mockClear();
+
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
@@ -111,23 +105,20 @@ describe( 'withFilters', () => {
 					</blockquote>
 				)
 		);
-		jest.runAllTimers();
 
-		expect( spy ).toHaveBeenCalledTimes( 1 );
+		act( () => 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>;
-		};
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const { container } = render( <EnhancedComponent /> );
 
-		spy.mockClear();
+		SpiedComponent.mockClear();
 
 		addFilter(
 			hookName,
@@ -149,22 +140,20 @@ describe( 'withFilters', () => {
 					</section>
 				)
 		);
-		jest.runAllTimers();
 
-		expect( spy ).toHaveBeenCalledTimes( 1 );
+		act( () => 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>;
-		};
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 		const { container } = render( <EnhancedComponent /> );
 
-		spy.mockClear();
+		SpiedComponent.mockClear();
+
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy',
@@ -175,21 +164,19 @@ describe( 'withFilters', () => {
 					</div>
 				)
 		);
-		jest.runAllTimers();
+
+		act( () => jest.runAllTimers() );
 
 		removeFilter( hookName, 'test/enhanced-component-spy' );
-		jest.runAllTimers();
 
-		expect( spy ).toHaveBeenCalledTimes( 2 );
+		act( () => 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>;
-		};
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const CombinedComponents = () => (
@@ -200,7 +187,8 @@ describe( 'withFilters', () => {
 		);
 		const { container } = render( <CombinedComponents /> );
 
-		spy.mockClear();
+		SpiedComponent.mockClear();
+
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
@@ -211,9 +199,10 @@ describe( 'withFilters', () => {
 					</blockquote>
 				)
 		);
-		jest.runAllTimers();
 
-		expect( spy ).toHaveBeenCalledTimes( 2 );
+		act( () => jest.runAllTimers() );
+
+		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();
 	} );
 } );

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

@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusOutside from '../';
 
+jest.useFakeTimers();
+
 let onFocusOutside;
 
 describe( 'withFocusOutside', () => {

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

@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusReturn from '../';
 
+jest.useFakeTimers();
+
 class Test extends Component {
 	render() {
 		const { className, focusHistory } = this.props;
@@ -88,7 +90,7 @@ describe( 'withFocusReturn()', () => {
 				advanceTimers: jest.advanceTimersByTime,
 			} );
 
-			const { container, unmount } = render( <Composite />, {
+			const { unmount } = render( <Composite />, {
 				container: document.body.appendChild(
 					document.createElement( 'div' )
 				),
@@ -103,9 +105,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

@@ -101,6 +101,7 @@ describe( 'withNotices operations', () => {
 		act( () => {
 			handle.current.createErrorNotice( message );
 		} );
+		// eslint-disable-next-line testing-library/no-node-access
 		expect( getByText( message )?.closest( '.is-error' ) ).not.toBeNull();
 	} );
 

package/src/icon/stories/index.tsx

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+import { wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '..';
+import { VStack } from '../../v-stack';
+
+const meta: ComponentMeta< typeof Icon > = {
+	title: 'Components/Icon',
+	component: Icon,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Icon > = ( args ) => (
+	<Icon { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	icon: wordpress,
+};
+
+export const FillColor: ComponentStory< typeof Icon > = ( args ) => {
+	return (
+		<div
+			style={ {
+				fill: 'blue',
+			} }
+		>
+			<Icon { ...args } />
+		</div>
+	);
+};
+FillColor.args = {
+	...Default.args,
+};
+
+export const WithAFunction = Template.bind( {} );
+WithAFunction.args = {
+	...Default.args,
+	icon: () => (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};
+
+const MyIconComponent = () => (
+	<SVG>
+		<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+	</SVG>
+);
+
+export const WithAComponent = Template.bind( {} );
+WithAComponent.args = {
+	...Default.args,
+	icon: MyIconComponent,
+};
+
+export const WithAnSVG = Template.bind( {} );
+WithAnSVG.args = {
+	...Default.args,
+	icon: (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};
+
+/**
+ * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
+ * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
+ * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
+ */
+export const WithADashicon: ComponentStory< typeof Icon > = ( args ) => {
+	return (
+		<VStack>
+			<Icon { ...args } />
+			<small>
+				This won’t show an icon if the Dashicons stylesheet isn’t
+				loaded.
+			</small>
+		</VStack>
+	);
+};
+WithADashicon.args = {
+	...Default.args,
+	icon: 'wordpress',
+};

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,
@@ -148,7 +148,6 @@ export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
-export { default as __experimentalTheme } from './theme';
 export { default as Tip } from './tip';
 export { default as ToggleControl } from './toggle-control';
 export {

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

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BaseInputControl from '../';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
@@ -50,6 +52,25 @@ 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(
+				// eslint-disable-next-line testing-library/no-node-access
+				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/isolated-event-container/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import IsolatedEventContainer from '../';
 
+jest.useFakeTimers();
+
 describe( 'IsolatedEventContainer', () => {
 	it( 'should pass props to container', async () => {
 		const user = userEvent.setup( {

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/picker-cell.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -23,7 +18,7 @@ export default function BottomSheetPickerCell( props ) {
 		onChangeValue( newValue );
 	};
 
-	const option = find( options, { value } );
+	const option = options.find( ( opt ) => opt.value === value );
 	const label = option ? option.label : value;
 
 	return (

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/global-styles-context/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,15 +29,18 @@ export const getMergedGlobalStyles = (
 	const baseGlobalColors = {
 		baseColors: baseGlobalStyles || {},
 	};
-	const blockStyleAttributes = pick(
-		blockAttributes,
-		BLOCK_STYLE_ATTRIBUTES
+	const blockStyleAttributes = Object.fromEntries(
+		Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) =>
+			BLOCK_STYLE_ATTRIBUTES.includes( key )
+		)
 	);
+
 	// This prevents certain wrapper styles from being applied to blocks that
 	// don't support them yet.
-	const wrapperPropsStyleFiltered = pick(
-		wrapperPropsStyle,
-		BLOCK_STYLE_ATTRIBUTES
+	const wrapperPropsStyleFiltered = Object.fromEntries(
+		Object.entries( wrapperPropsStyle ?? {} ).filter( ( [ key ] ) =>
+			BLOCK_STYLE_ATTRIBUTES.includes( key )
+		)
 	);
 
 	const mergedStyle = {