@wordpress/components 19.15.0 → 20.0.0

package/src/tooltip/stories/index.js

@@ -35,19 +35,34 @@ export const _default = () => {
 	const position = select( 'Position', positionOptions, 'top center' );
 	const delay = number( 'Delay', 700 );
 	return (
-		<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-			<div
-				style={ {
-					margin: '50px auto',
-					width: '200px',
-					padding: '20px',
-					textAlign: 'center',
-					border: '1px solid #ccc',
-				} }
-			>
-				Hover for more information
-			</div>
-		</Tooltip>
+		<>
+			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
+				<div
+					style={ {
+						margin: '50px auto',
+						width: '200px',
+						padding: '20px',
+						textAlign: 'center',
+						border: '1px solid #ccc',
+					} }
+				>
+					Hover for more information
+				</div>
+			</Tooltip>
+			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
+				<div
+					style={ {
+						margin: '50px auto',
+						width: 'min-content',
+						padding: '4px',
+						textAlign: 'center',
+						border: '1px solid #ccc',
+					} }
+				>
+					Small target
+				</div>
+			</Tooltip>
+		</>
 	);
 };
 

package/src/tooltip/style.scss

@@ -2,7 +2,7 @@
 	z-index: z-index(".components-tooltip");
 
 	.components-popover__content {
-		min-width: 0;
+		min-width: min-content;
 	}
 }
 

package/src/tooltip/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -11,254 +12,269 @@ import Tooltip from '../';
  * WordPress dependencies
  */
 import { TOOLTIP_DELAY } from '../index.js';
-import { act } from '@testing-library/react';
 
 describe( 'Tooltip', () => {
 	describe( '#render()', () => {
-		it( 'should render children (abort) if multiple children passed', () => {
-			// Mount: Enzyme shallow does not support wrapping multiple nodes.
-			const wrapper = mount(
-				<Tooltip>
-					<div />
-					<div />
+		it( 'should not render the tooltip if multiple children are passed', () => {
+			render(
+				<Tooltip text="Help text">
+					<button>Button 1</button>
+					<button>Button 2</button>
 				</Tooltip>
 			);
 
-			expect( wrapper.children() ).toHaveLength( 2 );
+			const button = screen.getByText( 'Button 1' );
+			button.focus();
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'should render children', () => {
-			const wrapper = shallow(
-				<Tooltip position="bottom right" text="Help text">
+			render(
+				<Tooltip text="Help text">
 					<button>Hover Me!</button>
 				</Tooltip>
 			);
 
-			const button = wrapper.find( 'button' );
-			expect( wrapper.type() ).toBe( 'button' );
-			expect( button.children() ).toHaveLength( 1 );
-			expect( button.childAt( 0 ).text() ).toBe( 'Hover Me!' );
+			expect(
+				screen.getByRole( 'button', { name: 'Hover Me!' } )
+			).toBeInTheDocument();
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
 
-		it( 'should render children with additional popover when over', () => {
-			const wrapper = shallow(
-				<Tooltip position="bottom right" text="Help text">
-					<button>Hover Me!</button>
+		it( 'should render children with additional tooltip when focused', () => {
+			const mockOnFocus = jest.fn();
+
+			render(
+				<Tooltip text="Help text">
+					<button onFocus={ mockOnFocus }>Hover Me!</button>
 				</Tooltip>
 			);
 
-			const event = { type: 'focus', currentTarget: {} };
-			wrapper.simulate( 'focus', event );
-
-			const button = wrapper.find( 'button' );
-			const popover = wrapper.find( 'ForwardRef(Popover)' );
-			expect( wrapper.type() ).toBe( 'button' );
-			expect( button.children() ).toHaveLength( 2 );
-			expect( button.childAt( 0 ).text() ).toBe( 'Hover Me!' );
-			expect( button.childAt( 1 ).name() ).toBe( 'ForwardRef(Popover)' );
-			expect( popover.prop( 'focusOnMount' ) ).toBe( false );
-			expect( popover.prop( 'position' ) ).toBe( 'bottom right' );
-			expect( popover.children().first().text() ).toBe( 'Help text' );
+			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
+			expect( button ).toBeInTheDocument();
+
+			// Before focus, the tooltip is not shown.
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+
+			button.focus();
+
+			// Tooltip is shown after focusing the anchor.
+			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
+			expect( mockOnFocus ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					type: 'focus',
+				} )
+			);
 		} );
 
-		it( 'should show popover on focus', () => {
-			const originalFocus = jest.fn();
-			const event = { type: 'focus', currentTarget: {} };
-			const wrapper = shallow(
+		it( 'should render children with additional tooltip when hovered', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
 				<Tooltip text="Help text">
-					<button
-						onMouseEnter={ originalFocus }
-						onFocus={ originalFocus }
-					>
-						Hover Me!
-					</button>
+					<button>Hover Me!</button>
 				</Tooltip>
 			);
 
-			const button = wrapper.find( 'button' );
-			button.simulate( 'focus', event );
+			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
+			expect( button ).toBeInTheDocument();
 
-			const popover = wrapper.find( 'ForwardRef(Popover)' );
-			expect( originalFocus ).toHaveBeenCalledWith( event );
-			expect( popover ).toHaveLength( 1 );
+			await user.hover( button );
+
+			// Tooltip hasn't appeared yet
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+
+			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+
+			// Tooltip shows after the delay
+			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
 		} );
 
-		it( 'should show not popover on focus as result of mousedown', async () => {
-			const originalOnMouseDown = jest.fn();
-			const originalOnMouseUp = jest.fn();
-			const wrapper = mount(
+		it( 'should not show tooltip on focus as result of mouse click', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			const mockOnFocus = jest.fn();
+
+			render(
 				<Tooltip text="Help text">
-					<button
-						onMouseDown={ originalOnMouseDown }
-						onMouseUp={ originalOnMouseUp }
-					>
-						Hover Me!
-					</button>
+					<button onFocus={ mockOnFocus }>Hover Me!</button>
 				</Tooltip>
 			);
 
-			const button = wrapper.find( 'button' );
+			const button = screen.getByRole( 'button', { text: 'Hover Me!' } );
+			expect( button ).toBeInTheDocument();
 
-			let event;
+			await user.click( button );
 
-			event = { type: 'mousedown' };
-			button.simulate( event.type, event );
-			expect( originalOnMouseDown ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					type: event.type,
-				} )
-			);
+			// Tooltip hasn't appeared yet
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 
-			event = { type: 'focus', currentTarget: {} };
-			button.simulate( event.type, event );
+			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
 
-			const popover = wrapper.find( 'Popover' );
-			expect( popover ).toHaveLength( 0 );
-
-			event = new window.MouseEvent( 'mouseup' );
-			await act( async () => document.dispatchEvent( event ) );
-			expect( originalOnMouseUp ).toHaveBeenCalledWith(
+			// Tooltip still hasn't appeared yet, even though the component was focused
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+			expect( mockOnFocus ).toHaveBeenCalledWith(
 				expect.objectContaining( {
-					type: event.type,
+					type: 'focus',
 				} )
 			);
 		} );
 
-		it( 'should show popover on delayed mouseenter', () => {
-			const originalMouseEnter = jest.fn();
-			jest.useFakeTimers();
-			const wrapper = mount(
-				<Tooltip text="Help text">
+		it( 'should respect custom delay prop when showing tooltip', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const TEST_DELAY = TOOLTIP_DELAY * 2;
+			const mockOnMouseEnter = jest.fn();
+			const mockOnFocus = jest.fn();
+
+			render(
+				<Tooltip text="Help text" delay={ TEST_DELAY }>
 					<button
-						onMouseEnter={ originalMouseEnter }
-						onFocus={ originalMouseEnter }
+						onMouseEnter={ mockOnMouseEnter }
+						onFocus={ mockOnFocus }
 					>
 						<span>Hover Me!</span>
 					</button>
 				</Tooltip>
 			);
 
-			const button = wrapper.find( 'button' );
-			button.simulate( 'mouseenter', { type: 'mouseenter' } );
+			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
+			expect( button ).toBeInTheDocument();
 
-			const popoverBeforeTimeout = wrapper.find( 'Popover' );
-			expect( popoverBeforeTimeout ).toHaveLength( 0 );
-			expect( originalMouseEnter ).toHaveBeenCalledTimes( 1 );
+			await user.hover( button );
 
-			// Force delayedSetIsOver to be called.
-			setTimeout( () => {
-				const popoverAfterTimeout = wrapper.find( 'Popover' );
-				expect( popoverAfterTimeout ).toHaveLength( 1 );
+			// Tooltip hasn't appeared yet
+			expect( mockOnMouseEnter ).toHaveBeenCalledTimes( 1 );
 
-				jest.runOnlyPendingTimers();
-				jest.useRealTimers();
-			}, TOOLTIP_DELAY );
-		} );
+			// Advance by the usual TOOLTIP_DELAY
+			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
 
-		it( 'should respect custom delay prop when showing popover', () => {
-			const originalMouseEnter = jest.fn();
-			jest.useFakeTimers();
-			const wrapper = mount(
-				<Tooltip text="Help text" delay={ 2000 }>
-					<button
-						onMouseEnter={ originalMouseEnter }
-						onFocus={ originalMouseEnter }
-					>
-						<span>Hover Me!</span>
-					</button>
-				</Tooltip>
-			);
-
-			const button = wrapper.find( 'button' );
-			button.simulate( 'mouseenter', { type: 'mouseenter' } );
+			// Tooltip hasn't appeared yet after the usual delay
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 
-			const popoverBeforeTimeout = wrapper.find( 'Popover' );
-			expect( popoverBeforeTimeout ).toHaveLength( 0 );
-			expect( originalMouseEnter ).toHaveBeenCalledTimes( 1 );
+			// Advance time again, so that we reach the full TEST_DELAY time
+			act( () => jest.advanceTimersByTime( TEST_DELAY - TOOLTIP_DELAY ) );
 
-			// Popover does not yet exist after default delay, because custom delay is passed.
-			setTimeout( () => {
-				const popoverBetweenTimeout = wrapper.find( 'Popover' );
-				expect( popoverBetweenTimeout ).toHaveLength( 0 );
-			}, TOOLTIP_DELAY );
+			// Tooltip shows after TEST_DELAY time
+			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
 
-			// Popover appears after custom delay.
-			setTimeout( () => {
-				const popoverAfterTimeout = wrapper.find( 'Popover' );
-				expect( popoverAfterTimeout ).toHaveLength( 1 );
-
-				jest.runOnlyPendingTimers();
-				jest.useRealTimers();
-			}, 2000 );
+			expect( mockOnFocus ).not.toHaveBeenCalled();
 		} );
 
-		it( 'should show tooltip when an element is disabled', () => {
-			const wrapper = mount(
+		it( 'should show tooltip when an element is disabled', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const { container } = render(
 				<Tooltip text="Show helpful text here">
 					<button disabled>Click me</button>
 				</Tooltip>
 			);
-			const button = wrapper.find( 'button[disabled]' );
-			const buttonNode = button.at( 0 ).getDOMNode();
-			const buttonRect = buttonNode.getBoundingClientRect();
-			const eventCatcher = wrapper.find( '.event-catcher' );
-			const eventCatcherNode = eventCatcher.at( 0 ).getDOMNode();
-			const eventCatcherRect = eventCatcherNode.getBoundingClientRect();
+
+			const button = screen.getByRole( 'button', { name: 'Click me' } );
+			expect( button ).toBeInTheDocument();
+			expect( button ).toBeDisabled();
+
+			// Note: this is testing for implementation details,
+			// but couldn't find a better way.
+			const buttonRect = button.getBoundingClientRect();
+			const eventCatcher = container.querySelector( '.event-catcher' );
+			const eventCatcherRect = eventCatcher.getBoundingClientRect();
 			expect( buttonRect ).toEqual( eventCatcherRect );
 
-			eventCatcher.simulate( 'mouseenter', {
-				type: 'mouseenter',
-				currentTarget: {},
-			} );
+			await user.hover( eventCatcher );
 
-			setTimeout( () => {
-				const popover = wrapper.find( 'Popover' );
-				expect( popover ).toHaveLength( 1 );
-			}, TOOLTIP_DELAY );
+			// Tooltip hasn't appeared yet
+			expect(
+				screen.queryByText( 'Show helpful text here' )
+			).not.toBeInTheDocument();
+
+			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+
+			// Tooltip shows after the delay
+			expect(
+				screen.getByText( 'Show helpful text here' )
+			).toBeInTheDocument();
 		} );
 
-		it( 'should not emit events back to children when they are disabled', () => {
-			const handleClick = jest.fn();
+		it( 'should not emit events back to children when they are disabled', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 
-			const wrapper = mount(
+			const onClickMock = jest.fn();
+			const { container } = render(
 				<Tooltip text="Show helpful text here">
-					<button disabled onClick={ handleClick }>
+					<button disabled onClick={ onClickMock }>
 						Click me
 					</button>
 				</Tooltip>
 			);
 
-			const eventCatcher = wrapper.find( '.event-catcher' );
-			eventCatcher.simulate( 'click', {
-				type: 'click',
-				currentTarget: {},
-			} );
-
-			expect( handleClick ).toHaveBeenCalledTimes( 0 );
+			const eventCatcher =
+				container.getElementsByClassName( 'event-catcher' )[ 0 ];
+			await user.click( eventCatcher );
+			expect( onClickMock ).not.toHaveBeenCalled();
 		} );
 
-		it( 'should cancel pending setIsOver on mouseleave', () => {
-			// Mount: Issues with using `setState` asynchronously with shallow-
-			// rendered components: https://github.com/airbnb/enzyme/issues/450
-			const originalMouseEnter = jest.fn();
-			const wrapper = mount(
-				<Tooltip text="Help text">
-					<button
-						onMouseEnter={ originalMouseEnter }
-						onFocus={ originalMouseEnter }
-					>
-						Hover Me!
-					</button>
-				</Tooltip>
+		it( 'should not show tooltip if the mouse leaves the anchor before the tooltip has shown', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
+			const onMouseEnterMock = jest.fn();
+			const onMouseLeaveMock = jest.fn();
+
+			render(
+				<>
+					<Tooltip text="Help text">
+						<button
+							onMouseEnter={ onMouseEnterMock }
+							onMouseLeave={ onMouseLeaveMock }
+						>
+							Hover Me!
+						</button>
+					</Tooltip>
+					<button>Hover me instead!</button>
+				</>
 			);
 
-			const button = wrapper.find( 'button' );
-			button.simulate( 'mouseenter' );
+			const externalButton = screen.getByRole( 'button', {
+				name: 'Hover me instead!',
+			} );
+			const tooltipButton = screen.getByRole( 'button', {
+				name: 'Hover Me!',
+			} );
+
+			await user.hover( tooltipButton );
+
+			// Tooltip hasn't appeared yet
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+
+			// Advance time by MOUSE_LEAVE_DELAY time
+			act( () => jest.advanceTimersByTime( MOUSE_LEAVE_DELAY ) );
+
+			// Hover the other button, meaning that the mouse will leave the tooltip anchor
+			await user.hover( externalButton );
+
+			// Tooltip still hasn't appeared yet
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+			expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
+
+			// Advance time again, so that we reach the full TOOLTIP_DELAY time
+			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
 
-			setTimeout( () => {
-				const popover = wrapper.find( 'Popover' );
-				expect( popover ).toHaveLength( 0 );
-			}, TOOLTIP_DELAY );
+			// Tooltip won't show, since the mouse has left the anchor
+			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
 	} );
 } );

package/src/tree-grid/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -68,7 +63,7 @@ function TreeGrid(
 
 			if (
 				hasModifierKeyPressed ||
-				! includes( [ UP, DOWN, LEFT, RIGHT, HOME, END ], keyCode )
+				! [ UP, DOWN, LEFT, RIGHT, HOME, END ].includes( keyCode )
 			) {
 				return;
 			}
@@ -92,7 +87,7 @@ function TreeGrid(
 				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
 				keyCode === RIGHT;
 
-			if ( includes( [ LEFT, RIGHT ], keyCode ) ) {
+			if ( [ LEFT, RIGHT ].includes( keyCode ) ) {
 				// Calculate to the next element.
 				let nextIndex;
 				if ( keyCode === LEFT ) {
@@ -177,7 +172,7 @@ function TreeGrid(
 				// Prevent key use for anything else. This ensures Voiceover
 				// doesn't try to handle key navigation.
 				event.preventDefault();
-			} else if ( includes( [ UP, DOWN ], keyCode ) ) {
+			} else if ( [ UP, DOWN ].includes( keyCode ) ) {
 				// Calculate the rowIndex of the next row.
 				const rows = Array.from(
 					treeGridElement.querySelectorAll( '[role="row"]' )
@@ -231,7 +226,7 @@ function TreeGrid(
 				// Prevent key use for anything else. This ensures Voiceover
 				// doesn't try to handle key navigation.
 				event.preventDefault();
-			} else if ( includes( [ HOME, END ], keyCode ) ) {
+			} else if ( [ HOME, END ].includes( keyCode ) ) {
 				// Calculate the rowIndex of the next row.
 				const rows = Array.from(
 					treeGridElement.querySelectorAll( '[role="row"]' )

package/src/tree-select/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { unescape as unescapeString, compact } from 'lodash';
+import { unescape as unescapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { SelectControl } from '../select-control';
-import type { TreeSelectProps, Tree, SelectOptions } from './types';
+import type { TreeSelectProps, Tree, SelectOptions, Truthy } from './types';
 
 function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
 	return tree.flatMap( ( treeNode ) => [
@@ -72,6 +72,7 @@ function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
  * }
  * ```
  */
+
 export function TreeSelect( {
 	label,
 	noOptionLabel,
@@ -81,10 +82,10 @@ export function TreeSelect( {
 	...props
 }: TreeSelectProps ) {
 	const options = useMemo( () => {
-		return compact( [
+		return [
 			noOptionLabel && { value: '', label: noOptionLabel },
 			...getSelectOptions( tree ),
-		] );
+		].filter( < T, >( option: T ): option is Truthy< T > => !! option );
 	}, [ noOptionLabel, tree ] );
 
 	return (

package/src/tree-select/types.ts

@@ -9,6 +9,10 @@ import type { ComponentProps } from 'react';
 import type SelectControl from '../select-control';
 import type { SelectControlProps } from '../select-control/types';
 
+export type Truthy< T > = T extends false | '' | 0 | null | undefined
+	? never
+	: T;
+
 export type SelectOptions = Required<
 	ComponentProps< typeof SelectControl >
 >[ 'options' ];

package/src/ui/context/context-connect.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { uniq } from 'lodash';
 import type { ForwardedRef, ReactChild, ReactNode } from 'react';
 
 /**
@@ -70,7 +69,9 @@ export function contextConnect< P >(
 	WrappedComponent.displayName = namespace;
 
 	// @ts-ignore internal property
-	WrappedComponent[ CONNECT_STATIC_NAMESPACE ] = uniq( mergedNamespace );
+	WrappedComponent[ CONNECT_STATIC_NAMESPACE ] = [
+		...new Set( mergedNamespace ),
+	];
 
 	// @ts-ignore WordPressComponent property
 	WrappedComponent.selector = `.${ getStyledClassNameFromKey( namespace ) }`;