@wordpress/components 23.1.0 → 23.3.0

package/src/guide/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { text, number } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -17,20 +12,19 @@ import Guide from '../';
 export default {
 	title: 'Components/Guide',
 	component: Guide,
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		contentLabel: { control: 'text' },
+		finishButtonText: { control: 'text' },
+		onFinish: { action: 'onFinish' },
 	},
 };
 
-const ModalExample = ( { numberOfPages, ...props } ) => {
+const Template = ( { onFinish, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 
 	const openGuide = () => setOpen( true );
 	const closeGuide = () => setOpen( false );
 
-	const loremIpsum =
-		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
-
 	return (
 		<>
 			<Button variant="secondary" onClick={ openGuide }>
@@ -39,40 +33,19 @@ const ModalExample = ( { numberOfPages, ...props } ) => {
 			{ isOpen && (
 				<Guide
 					{ ...props }
-					onFinish={ closeGuide }
-					pages={ Array.from( { length: numberOfPages } ).map(
-						( _, page ) => ( {
-							content: (
-								<>
-									<h1>
-										Page { page + 1 } of { numberOfPages }
-									</h1>
-									<p>{ loremIpsum }</p>
-								</>
-							),
-						} )
-					) }
+					onFinish={ ( ...finishArgs ) => {
+						closeGuide( ...finishArgs );
+						onFinish( ...finishArgs );
+					} }
 				/>
 			) }
 		</>
 	);
 };
 
-export const _default = () => {
-	const finishButtonText = text( 'finishButtonText', 'Finish' );
-	const contentLabel = text( 'title', 'Guide title' );
-	const numberOfPages = number( 'numberOfPages', 3, {
-		range: true,
-		min: 1,
-		max: 10,
-		step: 1,
-	} );
-
-	const modalProps = {
-		finishButtonText,
-		contentLabel,
-		numberOfPages,
-	};
-
-	return <ModalExample { ...modalProps } />;
+export const Default = Template.bind( {} );
+Default.args = {
+	pages: Array.from( { length: 3 } ).map( ( _, page ) => ( {
+		content: <p>{ `Page ${ page + 1 }` }</p>,
+	} ) ),
 };

package/src/guide/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import Guide from '../';
 
-jest.useFakeTimers();
-
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
 		render( <Guide pages={ [] } /> );
@@ -54,9 +52,7 @@ describe( 'Guide', () => {
 	} );
 
 	it( 'shows back button and shows finish button on the last page', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render(
 			<Guide
 				pages={ [
@@ -89,9 +85,7 @@ describe( 'Guide', () => {
 	} );
 
 	it( 'calls onFinish when the finish button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onFinish = jest.fn();
 		render(
 			<Guide
@@ -105,9 +99,7 @@ describe( 'Guide', () => {
 	} );
 
 	it( 'calls onFinish when the modal is closed', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onFinish = jest.fn();
 		render(
 			<Guide
@@ -158,9 +150,7 @@ describe( 'Guide', () => {
 		} );
 
 		it( 'sets the current page when a button is clicked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<Guide
@@ -202,9 +192,7 @@ describe( 'Guide', () => {
 		} );
 
 		it( 'allows navigating through the pages with the left and right arrows', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<Guide

package/src/h-stack/component.tsx

@@ -20,7 +20,6 @@ function UnconnectedHStack(
  *
  * `HStack` can render anything inside.
  *
- * @example
  * ```jsx
  * import {
  * 	__experimentalHStack as HStack,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -13,8 +13,6 @@ import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
  */
 import withFilters from '..';
 
-jest.useFakeTimers();
-
 describe( 'withFilters', () => {
 	const hookName = 'EnhancedComponent';
 	const MyComponent = () => <div>My component</div>;
@@ -65,7 +63,7 @@ describe( 'withFilters', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should not re-render component when new filter added before component was mounted', () => {
+	it( 'should not re-render component when new filter added before component was mounted', async () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		addFilter(
 			hookName,
@@ -81,13 +79,13 @@ describe( 'withFilters', () => {
 
 		const { container } = render( <EnhancedComponent /> );
 
-		act( () => jest.runAllTimers() );
-
-		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 1 )
+		);
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when new filter added after component was mounted', () => {
+	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 );
 
@@ -106,13 +104,13 @@ describe( 'withFilters', () => {
 				)
 		);
 
-		act( () => jest.runAllTimers() );
-
-		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 1 )
+		);
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when two filters added in the same animation frame', () => {
+	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 );
 
@@ -141,13 +139,13 @@ describe( 'withFilters', () => {
 				)
 		);
 
-		act( () => jest.runAllTimers() );
-
-		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 1 )
+		);
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
+	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 /> );
@@ -165,17 +163,19 @@ describe( 'withFilters', () => {
 				)
 		);
 
-		act( () => jest.runAllTimers() );
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 1 )
+		);
 
 		removeFilter( hookName, 'test/enhanced-component-spy' );
 
-		act( () => jest.runAllTimers() );
-
-		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 2 )
+		);
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render both components once each when one filter added', () => {
+	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 );
 
@@ -200,9 +200,9 @@ describe( 'withFilters', () => {
 				)
 		);
 
-		act( () => jest.runAllTimers() );
-
-		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 2 )
+		);
 		expect( container ).toMatchSnapshot();
 	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -14,8 +14,6 @@ import { Component } from '@wordpress/element';
  */
 import withFocusOutside from '../';
 
-jest.useFakeTimers();
-
 let onFocusOutside;
 
 describe( 'withFocusOutside', () => {
@@ -57,7 +55,7 @@ describe( 'withFocusOutside', () => {
 		document.hasFocus = origHasFocus;
 	} );
 
-	it( 'should not call handler if focus shifts to element within component', () => {
+	it( 'should not call handler if focus shifts to element within component', async () => {
 		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
 
 		const input = screen.getByRole( 'textbox' );
@@ -67,15 +65,11 @@ describe( 'withFocusOutside', () => {
 		input.blur();
 		button.focus();
 
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		await waitFor( () => expect( onFocusOutside ).not.toHaveBeenCalled() );
 	} );
 
 	it( 'should not call handler if focus transitions via click to button', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
 
 		const input = screen.getByRole( 'textbox' );
@@ -84,24 +78,20 @@ describe( 'withFocusOutside', () => {
 		input.focus();
 		await user.click( button );
 
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		await waitFor( () => expect( onFocusOutside ).not.toHaveBeenCalled() );
 	} );
 
-	it( 'should call handler if focus doesn’t shift to element within component', () => {
+	it( 'should call handler if focus doesn’t shift to element within component', async () => {
 		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
 
 		const input = screen.getByRole( 'textbox' );
 		input.focus();
 		input.blur();
 
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).toHaveBeenCalled();
+		await waitFor( () => expect( onFocusOutside ).toHaveBeenCalled() );
 	} );
 
-	it( 'should not call handler if focus shifts outside the component when the document does not have focus', () => {
+	it( 'should not call handler if focus shifts outside the component when the document does not have focus', async () => {
 		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
 
 		// Force document.hasFocus() to return false to simulate the window/document losing focus
@@ -112,12 +102,10 @@ describe( 'withFocusOutside', () => {
 		input.focus();
 		input.blur();
 
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		await waitFor( () => expect( onFocusOutside ).not.toHaveBeenCalled() );
 	} );
 
-	it( 'should cancel check when unmounting while queued', () => {
+	it( 'should cancel check when unmounting while queued', async () => {
 		const { rerender } = render(
 			<TestComponent onFocusOutside={ onFocusOutside } />
 		);
@@ -128,8 +116,6 @@ describe( 'withFocusOutside', () => {
 
 		rerender( <div /> );
 
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		await waitFor( () => expect( onFocusOutside ).not.toHaveBeenCalled() );
 	} );
 } );

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

@@ -14,8 +14,6 @@ import { Component } from '@wordpress/element';
  */
 import withFocusReturn from '../';
 
-jest.useFakeTimers();
-
 class Test extends Component {
 	render() {
 		const { className, focusHistory } = this.props;
@@ -86,9 +84,7 @@ describe( 'withFocusReturn()', () => {
 		} );
 
 		it( 'should switch focus back when unmounted while having focus', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const { unmount } = render( <Composite />, {
 				container: document.body.appendChild(

package/src/index.js

@@ -155,12 +155,14 @@ export {
 	ToggleGroupControlOption as __experimentalToggleGroupControlOption,
 	ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
 } from './toggle-group-control';
-export { default as Toolbar } from './toolbar';
-export { default as ToolbarButton } from './toolbar-button';
-export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
-export { default as __experimentalToolbarContext } from './toolbar-context';
-export { default as ToolbarGroup } from './toolbar-group';
-export { default as ToolbarItem } from './toolbar-item';
+export {
+	Toolbar,
+	ToolbarButton,
+	ToolbarContext as __experimentalToolbarContext,
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+} from './toolbar';
 export {
 	ToolsPanel as __experimentalToolsPanel,
 	ToolsPanelItem as __experimentalToolsPanelItem,

package/src/index.native.js

@@ -15,12 +15,14 @@ export { default as Dashicon } from './dashicon';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as FocalPointPicker } from './focal-point-picker';
-export { default as Toolbar } from './toolbar';
-export { default as ToolbarButton } from './toolbar-button';
-export { default as __experimentalToolbarContext } from './toolbar-context';
-export { default as ToolbarGroup } from './toolbar-group';
-export { default as ToolbarItem } from './toolbar-item';
-export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
+export {
+	Toolbar,
+	ToolbarButton,
+	ToolbarContext as __experimentalToolbarContext,
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+} from './toolbar';
 export { default as Tooltip } from './tooltip';
 export { default as Icon } from './icon';
 export { default as Spinner } from './spinner';

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

@@ -226,7 +226,9 @@ function InputField(
 			onMouseDown={ handleOnMouseDown }
 			ref={ ref }
 			inputSize={ size }
-			value={ value }
+			// Fallback to `''` to avoid "uncontrolled to controlled" warning.
+			// See https://github.com/WordPress/gutenberg/pull/47250 for details.
+			value={ value ?? '' }
 			type={ type }
 		/>
 	);

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

@@ -14,12 +14,7 @@ import { useState } from '@wordpress/element';
  */
 import BaseInputControl from '../';
 
-jest.useFakeTimers();
-
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
+const setupUser = () => userEvent.setup();
 
 const getInput = () => screen.getByTestId( 'input' );
 

package/src/isolated-event-container/test/index.js

@@ -9,13 +9,9 @@ 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( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const clickHandler = jest.fn();
 		render(
 			<IsolatedEventContainer
@@ -47,9 +43,7 @@ describe( 'IsolatedEventContainer', () => {
 	} );
 
 	it( 'should stop event propagation only for mousedown, but not for keydown', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const mousedownHandler = jest.fn();
 		const keydownHandler = jest.fn();

package/src/item-group/item/component.tsx

@@ -11,7 +11,7 @@ import { useItem } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 
-function Item(
+function UnconnectedItem(
 	props: WordPressComponentProps< ItemProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -24,4 +24,28 @@ function Item(
 	);
 }
 
-export default contextConnect( Item, 'Item' );
+/**
+ * `Item` is used in combination with `ItemGroup` to display a list of items
+ * grouped and styled together.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalItemGroup as ItemGroup,
+ *   __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ItemGroup>
+ *       <Item>Code</Item>
+ *       <Item>is</Item>
+ *       <Item>Poetry</Item>
+ *     </ItemGroup>
+ *   );
+ * }
+ * ```
+ */
+export const Item = contextConnect( UnconnectedItem, 'Item' );
+
+export default Item;

package/src/item-group/item-group/component.tsx

@@ -12,7 +12,7 @@ import { ItemGroupContext, useItemGroupContext } from '../context';
 import { View } from '../../view';
 import type { ItemGroupProps } from '../types';
 
-function ItemGroup(
+function UnconnectedItemGroup(
 	props: WordPressComponentProps< ItemGroupProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -40,4 +40,27 @@ function ItemGroup(
 	);
 }
 
-export default contextConnect( ItemGroup, 'ItemGroup' );
+/**
+ * `ItemGroup` displays a list of `Item`s grouped and styled together.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalItemGroup as ItemGroup,
+ *   __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ItemGroup>
+ *       <Item>Code</Item>
+ *       <Item>is</Item>
+ *       <Item>Poetry</Item>
+ *     </ItemGroup>
+ *   );
+ * }
+ * ```
+ */
+export const ItemGroup = contextConnect( UnconnectedItemGroup, 'ItemGroup' );
+
+export default ItemGroup;

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

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ItemGroup } from '../item-group/component';
+import { Item } from '../item/component';
+
+type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
+
+const meta: ComponentMeta< typeof ItemGroup > = {
+	component: ItemGroup,
+	title: 'Components (Experimental)/ItemGroup',
+	subcomponents: { Item },
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const mapPropsToItem = ( props: ItemProps, index: number ) => (
+	<Item { ...props } key={ index } />
+);
+
+const Template: ComponentStory< typeof ItemGroup > = ( props ) => (
+	<ItemGroup { ...props } />
+);
+
+export const Default: ComponentStory< typeof ItemGroup > = Template.bind( {} );
+Default.args = {
+	children: (
+		[
+			{
+				children: 'First item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'First item clicked' ),
+			},
+			{
+				children: 'Second item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'Second item clicked' ),
+			},
+			{
+				children: 'Third item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'Third item clicked' ),
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const NonClickableItems: ComponentStory< typeof ItemGroup > =
+	Template.bind( {} );
+NonClickableItems.args = {
+	children: (
+		[
+			{
+				children:
+					"This <Item /> is not click-able because it doesn't have an `onClick` prop",
+			},
+			{
+				children:
+					"This <Item /> is also not click-able because it doesn't have an `onClick` prop",
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const CustomItemSize: ComponentStory< typeof ItemGroup > = Template.bind(
+	{}
+);
+CustomItemSize.args = {
+	children: (
+		[
+			{
+				children:
+					'This <Item /> will inherit the size from <ItemGroup /> (try changing the size prop)',
+			},
+			{
+				children:
+					'This <Item /> has a hardcoded size="large", regardless of <ItemGroup />\'s size',
+				size: 'large',
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const WithBorder: ComponentStory< typeof ItemGroup > = Template.bind(
+	{}
+);
+WithBorder.args = {
+	...Default.args,
+	isBordered: true,
+	isSeparated: true,
+};

package/src/item-group/styles.ts

@@ -33,6 +33,7 @@ export const itemWrapper = css`
 `;
 
 export const item = css`
+	box-sizing: border-box;
 	width: 100%;
 	display: block;
 	margin: 0;