@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

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-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 ) }`;

package/src/ui/context/test/context-system-provider.js

@@ -1,9 +1,14 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import styled from '@emotion/styled';
 
+/**
+ * WordPress dependencies
+ */
+import { cloneElement } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -101,3 +106,98 @@ describe( 'props', () => {
 		expect( el.innerHTML ).not.toContain( 'WordPress.org' );
 	} );
 } );
+
+describe( 'children', () => {
+	test( 'should pass through children', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		render(
+			<ContextSystemProvider>
+				<ConnectedComponent>Pass through</ConnectedComponent>
+			</ContextSystemProvider>
+		);
+
+		expect( screen.getByText( 'Pass through' ) ).toBeInTheDocument();
+	} );
+
+	test( 'should not accept children via `context`', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		render(
+			<ContextSystemProvider
+				context={ { Component: { children: 'Override' } } }
+			>
+				<ConnectedComponent />
+			</ContextSystemProvider>
+		);
+
+		expect( screen.queryByText( 'Override' ) ).not.toBeInTheDocument();
+	} );
+
+	// This matches the behavior for normal, non-context-connected components.
+	test( 'should not override inherent children', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref }>
+				Inherent
+			</View>
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+		const NormalComponent = ( props ) => <div { ...props }>Inherent</div>;
+
+		render(
+			<ContextSystemProvider>
+				<ConnectedComponent />
+				<ConnectedComponent>Explicit children</ConnectedComponent>
+				<NormalComponent />
+				<NormalComponent>Explicit children</NormalComponent>
+			</ContextSystemProvider>
+		);
+
+		expect( screen.getAllByText( 'Inherent' ) ).toHaveLength( 4 );
+	} );
+
+	describe( 'when connected component does a `cloneElement()`', () => {
+		// eslint-disable-next-line no-unused-vars
+		const ComponentThatClones = ( { content, ...props }, _ref ) =>
+			cloneElement(
+				content,
+				useContextSystem( props, 'ComponentThatClones' )
+			);
+		const ConnectedComponentThatClones = contextConnect(
+			ComponentThatClones,
+			'ComponentThatClones'
+		);
+
+		test( 'should not override cloned inherent children with implicit `undefined` children', () => {
+			render(
+				<ContextSystemProvider>
+					<ConnectedComponentThatClones
+						content={ <span>Inherent</span> }
+					/>
+				</ContextSystemProvider>
+			);
+			expect( screen.getByText( 'Inherent' ) ).toBeInTheDocument();
+		} );
+
+		test( 'should override cloned inherent children with explicit children', () => {
+			render(
+				<ContextSystemProvider>
+					<ConnectedComponentThatClones
+						content={ <span>Inherent</span> }
+					>
+						Explicit children
+					</ConnectedComponentThatClones>
+				</ContextSystemProvider>
+			);
+			expect(
+				screen.getByText( 'Explicit children' )
+			).toBeInTheDocument();
+		} );
+	} );
+} );

package/src/ui/context/use-context-system.js

@@ -71,8 +71,13 @@ export function useContextSystem( props, namespace ) {
 		finalComponentProps[ key ] = overrideProps[ key ];
 	}
 
-	// @ts-ignore
-	finalComponentProps.children = rendered;
+	// Setting an `undefined` explicitly can cause unintended overwrites
+	// when a `cloneElement()` is involved.
+	if ( rendered !== undefined ) {
+		// @ts-ignore
+		finalComponentProps.children = rendered;
+	}
+
 	finalComponentProps.className = classes;
 
 	return finalComponentProps;