@wordpress/components 23.0.0 → 23.2.0

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

@@ -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>;
@@ -79,14 +81,13 @@ describe( 'withFilters', () => {
 
 		const { container } = render( <EnhancedComponent /> );
 
-		expect( container ).toMatchSnapshot();
-
-		jest.runAllTimers();
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when new filter added after component was mounted', async () => {
+	it( 'should re-render component once when new filter added after component was mounted', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -94,25 +95,24 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+
+		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', async () => {
+	it( 'should re-render component once when two filters added in the same animation frame', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -120,65 +120,62 @@ describe( 'withFilters', () => {
 
 		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();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-2',
+			( FilteredComponent ) => () =>
+				(
+					<section>
+						<FilteredComponent />
+					</section>
+				)
+		);
+
+		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', async () => {
+	it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 		const { container } = render( <EnhancedComponent /> );
 
 		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();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy',
+			( FilteredComponent ) => () =>
+				(
+					<div>
+						<FilteredComponent />
+					</div>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
+
+		removeFilter( hookName, 'test/enhanced-component-spy' );
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render both components once each when one filter added', async () => {
+	it( 'should re-render both components once each when one filter added', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -192,19 +189,18 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+
+		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;

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

@@ -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 {
@@ -156,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/test/index.js

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BaseInputControl from '../';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
@@ -65,6 +67,7 @@ describe( 'InputControl', () => {
 			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();
 		} );

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/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;

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-+       class="components-item css-1ohjtsa-View-large-item e19lxcc00"
+-       class="components-item css-cl593w-View-medium-item e19lxcc00"
++       class="components-item css-1yvqxd-View-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -75,6 +75,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
 
 .emotion-3 {
   padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
+  box-sizing: border-box;
   width: 100%;
   display: block;
   margin: 0;
@@ -124,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-cl593w-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -152,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-cl593w-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >

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 (