@wordpress/components 19.10.0 → 19.13.0

package/src/navigation/test/index.js

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -10,7 +16,7 @@ import Navigation from '..';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
-const testNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
+const TestNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
 	<Navigation activeItem={ activeItem }>
 		<NavigationMenu title={ rootTitle }>
 			<NavigationItem
@@ -45,92 +51,286 @@ const testNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
 	</Navigation>
 );
 
+const TestNavigationControlled = () => {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+	const [ activeMenu, setActiveMenu ] = useState( 'root' );
+
+	const onMockLinkClick = ( event ) => {
+		event.preventDefault();
+		const item = event.target.href.replace( 'https://example.com/', '' );
+		setActiveItem( item );
+	};
+
+	return (
+		<>
+			<Navigation
+				activeItem={ activeItem }
+				activeMenu={ activeMenu }
+				className="navigation-story"
+				onActivateMenu={ setActiveMenu }
+			>
+				<NavigationMenu title="Home">
+					<NavigationItem
+						item="item-1"
+						title="Item 1"
+						href="https://example.com/item-1"
+						onClick={ onMockLinkClick }
+					/>
+					<NavigationItem
+						item="item-2"
+						title="Item 2"
+						href="https://example.com/item-2"
+						onClick={ onMockLinkClick }
+					/>
+					<NavigationItem
+						item="item-sub-menu"
+						navigateToMenu="sub-menu"
+						title="Sub-Menu"
+					/>
+				</NavigationMenu>
+				<NavigationMenu
+					menu="sub-menu"
+					parentMenu="root"
+					title="Sub-Menu"
+				>
+					<NavigationItem
+						item="child-1"
+						onClick={ () => setActiveItem( 'child-1' ) }
+						title="Child 1"
+					/>
+					<NavigationItem
+						item="child-2"
+						onClick={ () => setActiveItem( 'child-2' ) }
+						title="Child 2"
+					/>
+					<NavigationItem
+						item="child-nested-sub-menu"
+						navigateToMenu="nested-sub-menu"
+						title="Nested Sub-Menu"
+					/>
+				</NavigationMenu>
+				<NavigationMenu
+					menu="nested-sub-menu"
+					parentMenu="sub-menu"
+					title="Nested Sub-Menu"
+				>
+					<NavigationItem
+						item="sub-child-1"
+						onClick={ () => setActiveItem( 'sub-child-1' ) }
+						title="Sub-Child 1"
+					/>
+					<NavigationItem
+						item="sub-child-2"
+						onClick={ () => setActiveItem( 'sub-child-2' ) }
+						title="Sub-Child 2"
+					/>
+				</NavigationMenu>
+			</Navigation>
+
+			<div className="navigation-story__aside">
+				<p>
+					Menu <code>{ activeMenu }</code> is active.
+					<br />
+					Item <code>{ activeItem }</code> is active.
+				</p>
+				<p>
+					<button
+						onClick={ () => {
+							setActiveMenu( 'nested-sub-menu' );
+						} }
+					>
+						Open the Nested Sub-Menu menu
+					</button>
+				</p>
+				<p>
+					<button
+						onClick={ () => {
+							setActiveItem( 'child-2' );
+							setActiveMenu( 'sub-menu' );
+						} }
+					>
+						Navigate to Child 2 item
+					</button>
+				</p>
+			</div>
+		</>
+	);
+};
+
 describe( 'Navigation', () => {
 	it( 'should render the panes and active item', async () => {
-		render( testNavigation( { activeItem: 'item-2' } ) );
+		render( <TestNavigation activeItem="item-2" /> );
 
 		const menuItems = screen.getAllByRole( 'listitem' );
 
-		expect( menuItems.length ).toBe( 4 );
-		expect( menuItems[ 0 ].textContent ).toBe( 'Item 1' );
-		expect( menuItems[ 1 ].textContent ).toBe( 'Item 2' );
-		expect( menuItems[ 2 ].textContent ).toBe( 'Category' );
-		expect( menuItems[ 3 ].textContent ).toBe( 'customize me' );
-		expect( menuItems[ 0 ].classList.contains( 'is-active' ) ).toBe(
-			false
-		);
-		expect( menuItems[ 1 ].classList.contains( 'is-active' ) ).toBe( true );
+		expect( menuItems ).toHaveLength( 4 );
+		expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
+		expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
+		expect( menuItems[ 2 ] ).toHaveTextContent( 'Category' );
+		expect( menuItems[ 3 ] ).toHaveTextContent( 'customize me' );
+
+		expect(
+			screen.getByRole( 'link', { current: 'page' } )
+		).toHaveTextContent( 'Item 2' );
 	} );
 
-	it( 'should render anchor links when menu item supplies an href', async () => {
-		render( testNavigation() );
+	it( 'should render anchor links when menu item supplies an href', () => {
+		render( <TestNavigation /> );
 
 		const linkItem = screen.getByRole( 'link', { name: 'Item 2' } );
 
-		expect( linkItem ).toBeDefined();
-		expect( linkItem.target ).toBe( '_blank' );
+		expect( linkItem ).toBeInTheDocument();
+		expect( linkItem ).toHaveAttribute( 'target', '_blank' );
 	} );
 
-	it( 'should render a custom component when menu item supplies one', async () => {
-		render( testNavigation() );
+	it( 'should render a custom component when menu item supplies one', () => {
+		render( <TestNavigation /> );
 
-		const customItem = screen.getByText( 'customize me' );
-
-		expect( customItem ).toBeDefined();
+		expect( screen.getByText( 'customize me' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should set an active category on click', async () => {
-		render( testNavigation() );
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Category' } ) );
-		const categoryTitle = screen.getByRole( 'heading' );
-		const menuItems = screen.getAllByRole( 'listitem' );
+		render( <TestNavigation /> );
+
+		await user.click( screen.getByRole( 'button', { name: 'Category' } ) );
 
-		expect( categoryTitle.textContent ).toBe( 'Category' );
-		expect( menuItems.length ).toBe( 2 );
-		expect( menuItems[ 0 ].textContent ).toBe( 'Child 1' );
-		expect( menuItems[ 1 ].textContent ).toBe( 'Child 2' );
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Category' );
+		const menuItems = screen.getAllByRole( 'listitem' );
+		expect( menuItems ).toHaveLength( 2 );
+		expect( menuItems[ 0 ] ).toHaveTextContent( 'Child 1' );
+		expect( menuItems[ 1 ] ).toHaveTextContent( 'Child 2' );
 	} );
 
-	it( 'should render the root title', async () => {
-		const { rerender } = render( testNavigation() );
+	it( 'should render the root title', () => {
+		const { rerender } = render( <TestNavigation /> );
 
-		const emptyTitle = screen.queryByRole( 'heading' );
-		expect( emptyTitle ).toBeNull();
+		expect( screen.queryByRole( 'heading' ) ).not.toBeInTheDocument();
 
-		rerender( testNavigation( { rootTitle: 'Home' } ) );
+		rerender( <TestNavigation rootTitle="Home" /> );
 
-		const rootTitle = screen.getByRole( 'heading' );
-		expect( rootTitle.textContent ).toBe( 'Home' );
+		expect( screen.getByRole( 'heading' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Home' );
 	} );
 
-	it( 'should render badges', async () => {
-		render( testNavigation( { showBadge: true } ) );
+	it( 'should render badges', () => {
+		render( <TestNavigation showBadge /> );
 
 		const menuItem = screen.getAllByRole( 'listitem' );
 		expect( menuItem[ 0 ].textContent ).toBe( 'Item 1' + '21' );
 	} );
 
-	it( 'should render menu titles when items exist', async () => {
+	it( 'should render menu titles when items exist', () => {
 		const { rerender } = render( <Navigation></Navigation> );
 
-		const emptyMenu = screen.queryByText( 'Menu title' );
-		expect( emptyMenu ).toBeNull();
+		expect( screen.queryByText( 'Menu title' ) ).not.toBeInTheDocument();
 
-		rerender( testNavigation( { rootTitle: 'Menu title' } ) );
+		rerender( <TestNavigation rootTitle="Menu title" /> );
 
-		const menuTitle = screen.queryByText( 'Menu title' );
-		expect( menuTitle ).not.toBeNull();
+		expect( screen.getByText( 'Menu title' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should navigate up a level when clicking the back button', async () => {
-		render( testNavigation( { rootTitle: 'Home' } ) );
-
-		fireEvent.click( screen.getByRole( 'button', { name: 'Category' } ) );
-		let menuTitle = screen.getByRole( 'heading' );
-		expect( menuTitle.textContent ).toBe( 'Category' );
-		fireEvent.click( screen.getByRole( 'button', { name: 'Home' } ) );
-		menuTitle = screen.getByRole( 'heading' );
-		expect( menuTitle.textContent ).toBe( 'Home' );
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render( <TestNavigation rootTitle="Home" /> );
+
+		await user.click( screen.getByRole( 'button', { name: 'Category' } ) );
+
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Category' );
+
+		await user.click( screen.getByRole( 'button', { name: 'Home' } ) );
+
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Home' );
+	} );
+
+	it( 'should navigate correctly when controlled', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render( <TestNavigationControlled /> );
+
+		// check root menu is shown and item 1 is selected
+		expect(
+			screen.getByRole( 'heading', { name: 'Home' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'link', { current: 'page' } )
+		).toHaveTextContent( 'Item 1' );
+
+		// click Item 2, check it's selected
+		await user.click( screen.getByRole( 'link', { name: 'Item 2' } ) );
+		expect(
+			screen.getByRole( 'link', { current: 'page' } )
+		).toHaveTextContent( 'Item 2' );
+
+		// click sub-menu, check new menu is shown
+		await user.click( screen.getByRole( 'button', { name: 'Sub-Menu' } ) );
+		expect(
+			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
+		).toBeInTheDocument();
+
+		// click Child 1, check it's selected
+		await user.click( screen.getByRole( 'button', { name: 'Child 1' } ) );
+		expect(
+			screen.getByRole( 'button', { current: 'page' } )
+		).toHaveTextContent( 'Child 1' );
+
+		// click nested sub-menu, check nested sub-menu is shown
+		await user.click(
+			screen.getByRole( 'button', { name: 'Nested Sub-Menu' } )
+		);
+		expect(
+			screen.getByRole( 'heading', { name: 'Nested Sub-Menu' } )
+		).toBeInTheDocument();
+
+		// click Sub Child 2, check it's selected
+		await user.click(
+			screen.getByRole( 'button', { name: 'Sub-Child 2' } )
+		);
+		expect(
+			screen.getByRole( 'button', { current: 'page' } )
+		).toHaveTextContent( 'Sub-Child 2' );
+
+		// click back, check sub-menu is shown
+		await user.click( screen.getByRole( 'button', { name: 'Sub-Menu' } ) );
+		expect(
+			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
+		).toBeInTheDocument();
+
+		// click back, check root menu is shown
+		await user.click( screen.getByRole( 'button', { name: 'Home' } ) );
+		expect(
+			screen.getByRole( 'heading', { name: 'Home' } )
+		).toBeInTheDocument();
+
+		// click the programmatic nested sub-menu button, check nested sub menu is shown
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Open the Nested Sub-Menu menu',
+			} )
+		);
+		expect(
+			screen.getByRole( 'heading', { name: 'Nested Sub-Menu' } )
+		).toBeInTheDocument();
+
+		// click navigate to child2 item button, check the correct menu is shown and the item is selected
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Navigate to Child 2 item',
+			} )
+		);
+		expect(
+			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', { current: 'page' } )
+		).toHaveTextContent( 'Child 2' );
 	} );
 } );

package/src/navigator/navigator-back-button/hook.ts

@@ -17,20 +17,22 @@ import type { NavigatorBackButtonProps } from '../types';
 export function useNavigatorBackButton(
 	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >
 ) {
-	const { onClick, as = Button, ...otherProps } = useContextSystem(
-		props,
-		'NavigatorBackButton'
-	);
+	const {
+		onClick,
+		as = Button,
+		...otherProps
+	} = useContextSystem( props, 'NavigatorBackButton' );
 
 	const { goBack } = useNavigator();
-	const handleClick: React.MouseEventHandler< HTMLButtonElement > = useCallback(
-		( e ) => {
-			e.preventDefault();
-			goBack();
-			onClick?.( e );
-		},
-		[ goBack, onClick ]
-	);
+	const handleClick: React.MouseEventHandler< HTMLButtonElement > =
+		useCallback(
+			( e ) => {
+				e.preventDefault();
+				goBack();
+				onClick?.( e );
+			},
+			[ goBack, onClick ]
+		);
 
 	return {
 		as,

package/src/navigator/navigator-button/hook.ts

@@ -32,19 +32,20 @@ export function useNavigatorButton(
 	const escapedPath = escapeAttribute( path );
 
 	const { goTo } = useNavigator();
-	const handleClick: React.MouseEventHandler< HTMLButtonElement > = useCallback(
-		( e ) => {
-			e.preventDefault();
-			goTo( escapedPath, {
-				focusTargetSelector: cssSelectorForAttribute(
-					attributeName,
-					escapedPath
-				),
-			} );
-			onClick?.( e );
-		},
-		[ goTo, onClick ]
-	);
+	const handleClick: React.MouseEventHandler< HTMLButtonElement > =
+		useCallback(
+			( e ) => {
+				e.preventDefault();
+				goTo( escapedPath, {
+					focusTargetSelector: cssSelectorForAttribute(
+						attributeName,
+						escapedPath
+					),
+				} );
+				onClick?.( e );
+			},
+			[ goTo, onClick ]
+		);
 
 	return {
 		as,

package/src/navigator/navigator-provider/component.tsx

@@ -30,12 +30,8 @@ function NavigatorProvider(
 	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
-	const {
-		initialPath,
-		children,
-		className,
-		...otherProps
-	} = useContextSystem( props, 'NavigatorProvider' );
+	const { initialPath, children, className, ...otherProps } =
+		useContextSystem( props, 'NavigatorProvider' );
 
 	const [ locationHistory, setLocationHistory ] = useState<
 		NavigatorLocation[]

package/src/navigator/navigator-screen/component.tsx

@@ -96,9 +96,9 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 		// If the previous query didn't run or find any element to focus, fallback
 		// to the first tabbable element in the screen (or the screen itself).
 		if ( ! elementToFocus ) {
-			const firstTabbable = ( focus.tabbable.find(
-				wrapperRef.current
-			) as HTMLElement[] )[ 0 ];
+			const firstTabbable = (
+				focus.tabbable.find( wrapperRef.current ) as HTMLElement[]
+			 )[ 0 ];
 
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}

package/src/navigator/stories/index.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import Button from '../../button';
 import { Card, CardBody, CardFooter, CardHeader } from '../../card';
 import { HStack } from '../../h-stack';
-import { Flyout } from '../../flyout';
+import Dropdown from '../../dropdown';
 import { useCx } from '../../utils/hooks/use-cx';
 import {
 	NavigatorProvider,
@@ -54,17 +54,23 @@ const MyNavigation = () => {
 								Navigate to screen with sticky content.
 							</NavigatorButton>
 
-							<Flyout
-								trigger={
-									<Button variant="primary">
+							<Dropdown
+								renderToggle={ ( { isOpen, onToggle } ) => (
+									<Button
+										onClick={ onToggle }
+										aria-expanded={ isOpen }
+										variant="primary"
+									>
 										Open test dialog
 									</Button>
-								}
-								placement="bottom-start"
-							>
-								<CardHeader>Go</CardHeader>
-								<CardBody>Stuff</CardBody>
-							</Flyout>
+								) }
+								renderContent={ () => (
+									<Card>
+										<CardHeader>Go</CardHeader>
+										<CardBody>Stuff</CardBody>
+									</Card>
+								) }
+							/>
 						</HStack>
 					</CardBody>
 				</Card>

package/src/notice/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -19,6 +18,8 @@ import { Button } from '../';
 
 /** @typedef {import('@wordpress/element').WPElement} WPElement */
 
+const noop = () => {};
+
 /**
  * Custom hook which announces the message with the given politeness, if a
  * valid message is provided.

package/src/notice/list.js

@@ -2,13 +2,15 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, omit } from 'lodash';
+import { omit } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import Notice from './';
 
+const noop = () => {};
+
 /**
  * Renders a list of notices.
  *

package/src/palette-edit/index.js

@@ -56,11 +56,36 @@ function NameInput( { value, onChange, label } ) {
 	);
 }
 
-function getNameForPosition( position ) {
+/**
+ * Returns a temporary name for a palette item in the format "Color + id".
+ * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
+ * It expects slugs to be in the format: slugPrefix + color- + number.
+ * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
+ *
+ * @param {string} elements   An array of color palette items.
+ * @param {string} slugPrefix The slug prefix used to match the element slug.
+ *
+ * @return {string} A unique name for a palette item.
+ */
+export function getNameForPosition( elements, slugPrefix ) {
+	const temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
+	const position = elements.reduce( ( previousValue, currentValue ) => {
+		if ( typeof currentValue?.slug === 'string' ) {
+			const matches = currentValue?.slug.match( temporaryNameRegex );
+			if ( matches ) {
+				const id = parseInt( matches[ 1 ], 10 );
+				if ( id >= previousValue ) {
+					return id + 1;
+				}
+			}
+		}
+		return previousValue;
+	}, 1 );
+
 	return sprintf(
 		/* translators: %s: is a temporary id for a custom color */
-		__( 'Color %s ' ),
-		position + 1
+		__( 'Color %s' ),
+		position
 	);
 }
 
@@ -131,7 +156,8 @@ function Option( {
 			</HStack>
 			{ isEditing && (
 				<Popover
-					position="bottom left"
+					placement="left-start"
+					offset={ 20 }
 					className="components-palette-edit__popover"
 				>
 					{ ! isGradient && (
@@ -163,9 +189,10 @@ function Option( {
 	);
 }
 
-function isTemporaryElement( slugPrefix, { slug, color, gradient }, index ) {
+function isTemporaryElement( slugPrefix, { slug, color, gradient } ) {
+	const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
 	return (
-		slug === slugPrefix + kebabCase( getNameForPosition( index ) ) &&
+		regex.test( slug ) &&
 		( ( !! color && color === DEFAULT_COLOR ) ||
 			( !! gradient && gradient === DEFAULT_GRADIENT ) )
 	);
@@ -193,8 +220,7 @@ function PaletteEditListView( {
 				)
 			) {
 				const newElements = elementsReference.current.filter(
-					( element, index ) =>
-						! isTemporaryElement( slugPrefix, element, index )
+					( element ) => ! isTemporaryElement( slugPrefix, element )
 				);
 				onChange( newElements.length ? newElements : undefined );
 			}
@@ -309,8 +335,10 @@ export default function PaletteEdit( {
 							}
 							onClick={ () => {
 								const tempOptionName = getNameForPosition(
-									elementsLength
+									elements,
+									slugPrefix
 								);
+
 								onChange( [
 									...elements,
 									{

package/src/palette-edit/style.scss

@@ -1,10 +1,3 @@
-@include break-medium() {
-	.components-palette-edit__popover.components-popover .components-popover__content.components-popover__content.components-popover__content {
-		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
-		margin-top: #{ -($grid-unit-60 + $border-width) };
-	}
-}
-
 .components-palette-edit__popover {
 	.components-custom-gradient-picker__gradient-bar {
 		margin-top: 0;