@wordpress/components 23.2.0 → 23.3.1

package/src/tab-panel/test/index.tsx

@@ -9,12 +9,7 @@ import userEvent from '@testing-library/user-event';
  */
 import TabPanel from '..';
 
-jest.useFakeTimers();
-
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
+const setupUser = () => userEvent.setup();
 
 const TABS = [
 	{
@@ -147,7 +142,7 @@ describe( 'TabPanel', () => {
 		);
 	} );
 
-	it( 'should select `initialTabname` if defined', () => {
+	it( 'should select `initialTabName` if defined', () => {
 		const mockOnSelect = jest.fn();
 
 		render(
@@ -162,6 +157,39 @@ describe( 'TabPanel', () => {
 		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 	} );
 
+	it( 'waits for the tab with the `initialTabName` to become present in the `tabs` array before selecting it', () => {
+		const mockOnSelect = jest.fn();
+
+		const { rerender } = render(
+			<TabPanel
+				tabs={ TABS }
+				initialTabName="delta"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		// There should be no selected tab.
+		expect(
+			screen.queryByRole( 'tab', { selected: true } )
+		).not.toBeInTheDocument();
+
+		rerender(
+			<TabPanel
+				tabs={ [
+					{ name: 'delta', title: 'Delta', className: 'delta-class' },
+					...TABS,
+				] }
+				initialTabName="delta"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Delta' );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'delta' );
+	} );
+
 	it( 'should disable the tab when `disabled` is true', async () => {
 		const user = setupUser();
 		const mockOnSelect = jest.fn();

package/src/tab-panel/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 /**
  * Internal dependencies

package/src/theme/test/index.tsx

@@ -26,7 +26,7 @@ const MyThemableComponent = ( props: MyThemableComponentProps ) => {
 
 describe( 'Theme', () => {
 	describe( 'accent color', () => {
-		it( 'it does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
+		it( 'does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
 			render(
 				<Theme data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>
@@ -49,7 +49,7 @@ describe( 'Theme', () => {
 			} );
 		} );
 
-		it( 'it defines the accent color (and its variations) as a CSS variable', () => {
+		it( 'defines the accent color (and its variations) as a CSS variable', () => {
 			render(
 				<Theme accent="#123abc" data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>
@@ -66,7 +66,7 @@ describe( 'Theme', () => {
 	} );
 
 	describe( 'background color', () => {
-		it( 'it does not define the background color (and its dependent colors) as a CSS variable when the `background` prop is undefined', () => {
+		it( 'does not define the background color (and its dependent colors) as a CSS variable when the `background` prop is undefined', () => {
 			render(
 				<Theme data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>
@@ -91,7 +91,7 @@ describe( 'Theme', () => {
 			} );
 		} );
 
-		it( 'it defines the background color (and its dependent colors) as a CSS variable', () => {
+		it( 'defines the background color (and its dependent colors) as a CSS variable', () => {
 			render(
 				<Theme background="#ffffff" data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>

package/src/toggle-group-control/stories/index.tsx

@@ -48,6 +48,7 @@ const Template: ComponentStory< typeof ToggleGroupControl > = ( {
 
 	return (
 		<ToggleGroupControl
+			__nextHasNoMarginBottom
 			{ ...props }
 			onChange={ ( ...changeArgs ) => {
 				setValue( ...changeArgs );

package/src/toggle-group-control/test/index.tsx

@@ -18,8 +18,6 @@ import {
 	ToggleGroupControlOptionIcon,
 } from '../index';
 
-jest.useFakeTimers();
-
 function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
@@ -81,9 +79,7 @@ describe( 'ToggleGroupControl', () => {
 		} );
 	} );
 	it( 'should call onChange with proper value', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const mockOnChange = jest.fn();
 
 		render(
@@ -102,9 +98,7 @@ describe( 'ToggleGroupControl', () => {
 	} );
 
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -131,9 +125,7 @@ describe( 'ToggleGroupControl', () => {
 	} );
 
 	it( 'should not render tooltip', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -157,9 +149,7 @@ describe( 'ToggleGroupControl', () => {
 		describe( 'isDeselectable = false', () => {
 			it( 'should not be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ToggleGroupControl
@@ -180,9 +170,7 @@ describe( 'ToggleGroupControl', () => {
 			} );
 
 			it( 'should not tab to next radio option', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ToggleGroupControl value="rigas" label="Test">
@@ -205,9 +193,7 @@ describe( 'ToggleGroupControl', () => {
 		describe( 'isDeselectable = true', () => {
 			it( 'should be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ToggleGroupControl
@@ -237,9 +223,7 @@ describe( 'ToggleGroupControl', () => {
 			} );
 
 			it( 'should tab to the next option button', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ToggleGroupControl

package/src/toolbar/stories/index.js

@@ -12,15 +12,42 @@ import {
 	link,
 	more,
 	paragraph,
+	arrowUp,
+	arrowDown,
+	arrowLeft,
+	arrowRight,
+	chevronDown,
 } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarItem } from '..';
-import { SVG, Path, DropdownMenu } from '../../..';
+import {
+	Toolbar,
+	ToolbarButton,
+	ToolbarGroup,
+	ToolbarItem,
+	ToolbarDropdownMenu,
+} from '..';
+import { SVG, Path, DropdownMenu } from '../../';
 
-export default { title: 'Components/Toolbar', component: Toolbar };
+export default {
+	title: 'Components/Toolbar',
+	component: Toolbar,
+	subcomponents: {
+		ToolbarButton,
+		ToolbarGroup,
+		ToolbarItem,
+		ToolbarDropdownMenu,
+	},
+	argTypes: {
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
 
 function InlineImageIcon() {
 	return (
@@ -30,13 +57,20 @@ function InlineImageIcon() {
 	);
 }
 
-/* eslint-disable no-restricted-syntax */
-export const _default = () => {
-	return (
-		// id is required for server side rendering
-		<Toolbar label="Options" id="options-toolbar">
+const Template = ( props ) => (
+	<div style={ { height: 280 } }>
+		<Toolbar { ...props } />
+	</div>
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Options',
+	id: 'options-toolbar',
+	children: (
+		<>
 			<ToolbarGroup>
-				<ToolbarButton icon={ paragraph } label="Paragraph" />
+				<ToolbarButton icon={ paragraph } text="Paragraph" />
 			</ToolbarGroup>
 			<ToolbarGroup>
 				<ToolbarItem>
@@ -98,72 +132,41 @@ export const _default = () => {
 					{ icon: alignRight, title: 'Align right' },
 				] }
 			/>
-		</Toolbar>
-	);
+			<ToolbarDropdownMenu
+				icon={ chevronDown }
+				label="Select a direction"
+				controls={ [
+					{
+						title: 'Up',
+						icon: arrowUp,
+					},
+					{
+						title: 'Right',
+						icon: arrowRight,
+					},
+					{
+						title: 'Down',
+						icon: arrowDown,
+					},
+					{
+						title: 'Left',
+						icon: arrowLeft,
+					},
+				] }
+			/>
+		</>
+	),
 };
 
-export const withoutGroup = () => {
-	return (
-		// id is required for server side rendering
-		<Toolbar label="Options" id="options-toolbar-without-group">
+export const WithoutGroup = Template.bind( {} );
+WithoutGroup.args = {
+	label: 'Options',
+	id: 'options-toolbar-without-group',
+	children: (
+		<>
 			<ToolbarButton icon={ formatBold } label="Bold" isPressed />
 			<ToolbarButton icon={ formatItalic } label="Italic" />
 			<ToolbarButton icon={ link } label="Link" />
-		</Toolbar>
-	);
-};
-/* eslint-enable no-restricted-syntax */
-
-export const toolbars = () => {
-	return (
-		<div>
-			<div style={ { padding: '20px' } }>
-				<h2>Icon-only Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-					<ToolbarButton
-						icon={ formatItalic }
-						title="Italic"
-						isActive
-					/>
-					<ToolbarButton icon={ link } title="Link" />
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Text-only Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton>Bold Format</ToolbarButton>
-					<ToolbarButton isActive>Italic Format</ToolbarButton>
-					<ToolbarButton>Link Format</ToolbarButton>
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Text and Icon Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-					<ToolbarButton isActive>Bold Format</ToolbarButton>
-					<ToolbarButton icon={ formatItalic } title="Italic" />
-					<ToolbarButton>Italic Format</ToolbarButton>
-					<ToolbarButton icon={ link } title="Link" />
-					<ToolbarButton>Link Format</ToolbarButton>
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Single Icon Button Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Single Text Button toolbar</h2>
-				<Toolbar>
-					<ToolbarButton>Bold Toolbar</ToolbarButton>
-				</Toolbar>
-			</div>
-		</div>
-	);
+		</>
+	),
 };

package/src/tools-panel/stories/index.js

@@ -87,6 +87,7 @@ export const _default = () => {
 						onDeselect={ () => setScale( undefined ) }
 					>
 						<ToggleGroupControl
+							__nextHasNoMarginBottom
 							label="Scale"
 							value={ scale }
 							onChange={ ( next ) => setScale( next ) }
@@ -367,6 +368,7 @@ export const WithConditionalDefaultControl = () => {
 					isShownByDefault={ !! height }
 				>
 					<ToggleGroupControl
+						__nextHasNoMarginBottom
 						label="Scale"
 						value={ scale }
 						onChange={ ( next ) =>
@@ -456,6 +458,7 @@ export const WithConditionallyRenderedControl = () => {
 						isShownByDefault={ true }
 					>
 						<ToggleGroupControl
+							__nextHasNoMarginBottom
 							label="Scale"
 							value={ scale }
 							onChange={ ( next ) =>

package/src/tools-panel/test/index.js

@@ -582,7 +582,7 @@ describe( 'ToolsPanel', () => {
 			// registerPanelItem has still only been called once.
 			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
 			// deregisterPanelItem is called, given that we have switched panels.
-			expect( context.deregisterPanelItem ).toBeCalledWith(
+			expect( context.deregisterPanelItem ).toHaveBeenCalledWith(
 				altControlProps.label
 			);
 

package/src/tree-grid/index.js

@@ -16,7 +16,7 @@ import RovingTabIndexContainer from './roving-tab-index';
  *
  * @param {Element} rowElement The DOM element representing the row.
  *
- * @return {?Array} The array of focusables in the row.
+ * @return {Array | undefined} The array of focusables in the row.
  */
 function getRowFocusables( rowElement ) {
 	const focusablesInRow = focus.focusable.find( rowElement, {

package/src/tree-select/index.tsx

@@ -1,12 +1,9 @@
-/**
- * External dependencies
- */
-import { unescape as unescapeString } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+
 /**
  * Internal dependencies
  */
@@ -18,7 +15,7 @@ function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
 		{
 			value: treeNode.id,
 			label:
-				'\u00A0'.repeat( level * 3 ) + unescapeString( treeNode.name ),
+				'\u00A0'.repeat( level * 3 ) + decodeEntities( treeNode.name ),
 		},
 		...getSelectOptions( treeNode.children || [], level + 1 ),
 	] );

package/src/ui/context/test/context-connect.tsx

@@ -10,6 +10,7 @@ import { contextConnect, contextConnectWithoutRef } from '../context-connect';
 import type { WordPressComponentProps } from '../wordpress-component';
 
 // Static TypeScript tests
+/* eslint-disable jest/expect-expect */
 describe( 'ref forwarding', () => {
 	const ComponentWithRef = (
 		props: WordPressComponentProps< {}, 'div' >,
@@ -53,3 +54,4 @@ describe( 'ref forwarding', () => {
 		<NoRef foo={ null } />;
 	} );
 } );
+/* eslint-enable jest/expect-expect */

package/src/ui/context/test/wordpress-component.tsx

@@ -14,6 +14,7 @@ import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../wordpress-component';
 
 // Static TypeScript checks
+/* eslint-disable jest/expect-expect */
 describe( 'WordPressComponentProps', () => {
 	it( 'should not accept a ref', () => {
 		const Foo = ( props: WordPressComponentProps< {}, 'div' > ) => (
@@ -34,3 +35,4 @@ describe( 'WordPressComponentProps', () => {
 		<ForwardedFoo ref={ null } />;
 	} );
 } );
+/* eslint-enable jest/expect-expect */