@wordpress/components 23.1.0 → 23.3.0

package/src/toolbar/test/index.js

@@ -6,8 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Toolbar from '../';
-import ToolbarButton from '../../toolbar-button';
+import { Toolbar, ToolbarButton } from '..';
 
 describe( 'Toolbar', () => {
 	describe( 'basic rendering', () => {

package/src/{toolbar-group/test/index.js → toolbar/test/toolbar-group.js}

@@ -6,7 +6,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import ToolbarGroup from '../';
+import { ToolbarGroup } from '..';
 
 describe( 'ToolbarGroup', () => {
 	describe( 'basic rendering', () => {

package/src/toolbar/toolbar/index.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarGroup from '../toolbar-group';
+import ToolbarContainer from './toolbar-container';
+
+/**
+ * Renders a toolbar.
+ *
+ * To add controls, simply pass `ToolbarButton` components as children.
+ *
+ * @param {Object} props             Component props.
+ * @param {string} [props.className] Class to set on the container div.
+ * @param {string} [props.label]     ARIA label for toolbar container.
+ * @param {Object} ref               React Element ref.
+ */
+function Toolbar( { className, label, ...props }, ref ) {
+	if ( ! label ) {
+		deprecated( 'Using Toolbar without label prop', {
+			since: '5.6',
+			alternative: 'ToolbarGroup component',
+			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
+		} );
+		return <ToolbarGroup { ...props } className={ className } />;
+	}
+	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
+	const finalClassName = classnames(
+		'components-accessible-toolbar',
+		className
+	);
+	return (
+		<ToolbarContainer
+			className={ finalClassName }
+			label={ label }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+}
+
+export default forwardRef( Toolbar );

package/src/{toolbar-button → toolbar/toolbar-button}/index.js

@@ -9,7 +9,7 @@ import { useContext, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
+import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
 import ToolbarButtonContainer from './toolbar-button-container';

package/src/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/index.js

@@ -8,7 +8,7 @@ import { forwardRef, useContext } from '@wordpress/element';
  */
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 
 function ToolbarDropdownMenu( props, ref ) {
 	const accessibleToolbarState = useContext( ToolbarContext );

package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.js

@@ -6,7 +6,7 @@ import { useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 import ToolbarContext from '../toolbar-context';
 import ToolbarItem from '../toolbar-item';
 

package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.native.js

@@ -9,7 +9,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 import styles from './style.scss';
 
 function ToolbarGroupCollapsed( {

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, {
@@ -150,12 +150,10 @@ function TreeGrid(
 							event.preventDefault();
 							return;
 						}
-						// If a row is focused, and it is expanded, focuses the rightmost cell in the row.
+						// If a row is focused, and it is expanded, focuses the next cell in the row.
 						const focusableItems = getRowFocusables( activeRow );
 						if ( focusableItems.length > 0 ) {
-							focusableItems[
-								focusableItems.length - 1
-							]?.focus();
+							focusableItems[ nextIndex ]?.focus();
 						}
 					}
 					// Prevent key use for anything else. For example, Voiceover

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

package/src/unit-control/test/index.tsx

@@ -16,8 +16,6 @@ import UnitControl from '..';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
 import type { UnitControlOnChangeCallback } from '../types';
 
-jest.useFakeTimers();
-
 const getInput = ( {
 	isInputTypeText = false,
 }: {
@@ -87,15 +85,6 @@ const ControlledSyncUnits = () => {
 };
 
 describe( 'UnitControl', () => {
-	beforeEach( () => {
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
 			render( <UnitControl /> );
@@ -147,9 +136,7 @@ describe( 'UnitControl', () => {
 
 	describe( 'Value', () => {
 		it( 'should update value on change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '50px';
 			const setState = jest.fn( ( value ) => ( state = value ) );
@@ -169,9 +156,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should increment value on UP press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | undefined = '50px';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -186,9 +171,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should increment value on UP + SHIFT press, with step', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | undefined = '50px';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -203,9 +186,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should decrement value on DOWN press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -220,9 +201,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -237,9 +216,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should cancel change when ESCAPE key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -268,9 +245,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should run onBlur callback when quantity input is blurred', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
@@ -303,9 +278,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onUnitChangeSpy = jest.fn();
 			const onChangeSpy = jest.fn();
@@ -348,9 +321,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should update value correctly when typed and blurred when a single unit is passed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 			render(
@@ -384,9 +355,7 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit', () => {
 		it( 'should update unit value on change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | undefined = '14rem';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -428,9 +397,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should reset value on unit change, if unit has default value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -461,9 +428,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not reset value on unit change, if disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -494,9 +459,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should set correct unit if single units', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | undefined = '50%';
 			const setState: UnitControlOnChangeCallback = ( value ) =>
@@ -518,9 +481,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should update unit value when a new raw value is passed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <ControlledSyncUnits /> );
 
@@ -550,9 +511,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should maintain the chosen non-default unit when value is cleared', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const units = [
 				{ value: 'pt', label: 'pt' },
@@ -571,9 +530,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should run onBlur callback when the unit select is blurred', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onUnitChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
@@ -604,9 +561,7 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit Parser', () => {
 		it( 'should parse unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
@@ -629,9 +584,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse PX unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
@@ -654,9 +607,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse EM unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
@@ -679,9 +630,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse % unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
@@ -704,9 +653,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse REM unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );

package/src/utils/hooks/test/use-latest-ref.js

@@ -13,8 +13,6 @@ import { useState } from '@wordpress/element';
  */
 import { useLatestRef } from '..';
 
-jest.useFakeTimers();
-
 function debounce( callback, timeout = 0 ) {
 	let timeoutId = 0;
 	return ( ...args ) => {
@@ -47,12 +45,6 @@ function Example() {
 	);
 }
 
-function sleep( milliseconds ) {
-	return new Promise( ( resolve ) =>
-		window.setTimeout( resolve, milliseconds )
-	);
-}
-
 function getCount() {
 	return screen.getByText( /Count:/ ).innerHTML;
 }
@@ -76,47 +68,52 @@ describe( 'useLatestRef', () => {
 		// Prove the example works as expected.
 		it( 'should start at 0', () => {
 			render( <Example /> );
+
 			expect( getCount() ).toEqual( 'Count: 0' );
 		} );
 
 		it( 'should increment immediately', () => {
 			render( <Example /> );
+
 			incrementCount();
+
 			expect( getCount() ).toEqual( 'Count: 1' );
 		} );
 
 		it( 'should increment after debouncing', async () => {
 			render( <Example /> );
+
 			incrementCountDebounced();
-			expect( getCount() ).toEqual( 'Count: 0' );
 
-			await waitFor( () => sleep( 0 ) );
-			expect( getCount() ).toEqual( 'Count: 1' );
+			expect( getCount() ).toEqual( 'Count: 0' );
+			await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
 		} );
 
 		it( 'should increment after debouncing with latest ref', async () => {
 			render( <Example /> );
+
 			incrementCountDebouncedRef();
-			expect( getCount() ).toEqual( 'Count: 0' );
 
-			await waitFor( () => sleep( 0 ) );
-			expect( getCount() ).toEqual( 'Count: 1' );
+			expect( getCount() ).toEqual( 'Count: 0' );
+			await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
 		} );
 	} );
 
 	it( 'should increment to one', async () => {
 		render( <Example /> );
+
 		incrementCountDebounced();
 		incrementCount();
-		await waitFor( () => sleep( 0 ) );
-		expect( getCount() ).toEqual( 'Count: 1' );
+
+		await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
 	} );
 
 	it( 'should increment to two', async () => {
 		render( <Example /> );
+
 		incrementCountDebouncedRef();
 		incrementCount();
-		await waitFor( () => sleep( 0 ) );
-		expect( getCount() ).toEqual( 'Count: 2' );
+
+		await waitFor( () => expect( getCount() ).toEqual( 'Count: 2' ) );
 	} );
 } );

package/tsconfig.json

@@ -24,6 +24,7 @@
 		{ "path": "../deprecated" },
 		{ "path": "../dom" },
 		{ "path": "../element" },
+		{ "path": "../html-entities" },
 		{ "path": "../hooks" },
 		{ "path": "../icons" },
 		{ "path": "../is-shallow-equal" },
@@ -43,7 +44,6 @@
 		"src/angle-picker-control",
 		"src/autocomplete",
 		"src/box-control",
-		"src/color-list-picker",
 		"src/combobox-control",
 		"src/custom-gradient-picker",
 		"src/dimension-control",
@@ -55,21 +55,11 @@
 		"src/higher-order/with-filters",
 		"src/higher-order/with-focus-return",
 		"src/higher-order/with-notices",
-		"src/keyboard-shortcuts",
 		"src/menu-items-choice",
 		"src/navigation",
-		"src/notice",
 		"src/palette-edit",
 		"src/panel",
-		"src/query-controls",
-		"src/responsive-wrapper",
-		"src/sandbox",
 		"src/toolbar",
-		"src/toolbar-button",
-		"src/toolbar-context",
-		"src/toolbar-dropdown-menu",
-		"src/toolbar-group",
-		"src/toolbar-item",
 		"src/tree-grid"
 	]
 }