@wordpress/components 19.11.0 → 19.14.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/navigation/use-navigation-tree-nodes.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,14 +8,20 @@ export const useNavigationTreeNodes = () => {
 
 	const getNode = ( key ) => nodes[ key ];
 
-	const addNode = ( key, value ) =>
-		setNodes( ( original ) => ( {
+	const addNode = ( key, value ) => {
+		const { children, ...newNode } = value;
+		return setNodes( ( original ) => ( {
 			...original,
-			[ key ]: omit( value, 'children' ),
+			[ key ]: newNode,
 		} ) );
+	};
 
-	const removeNode = ( key ) =>
-		setNodes( ( original ) => omit( original, key ) );
+	const removeNode = ( key ) => {
+		return setNodes( ( original ) => {
+			const { [ key ]: removedNode, ...remainingNodes } = original;
+			return remainingNodes;
+		} );
+	};
 
 	return { nodes, getNode, addNode, removeNode };
 };

package/src/navigation/utils.js

@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
-import { deburr } from 'lodash';
+import removeAccents from 'remove-accents';
 
 // @see packages/block-editor/src/components/inserter/search-items.js
 export const normalizeInput = ( input ) =>
-	deburr( input ).replace( /^\//, '' ).toLowerCase();
+	removeAccents( input ).replace( /^\//, '' ).toLowerCase();
 
 export const normalizedSearch = ( title, search ) =>
 	-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );

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/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/number-control/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,29 +11,21 @@ import NumberControl from '../';
 export default {
 	title: 'Components (Experimental)/NumberControl',
 	component: NumberControl,
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		size: {
+			control: {
+				type: 'select',
+				options: [ 'default', 'small', '__unstable-large' ],
+			},
+		},
+		onChange: { action: 'onChange' },
 	},
 };
 
-function Example() {
+function Template( { onChange, ...props } ) {
 	const [ value, setValue ] = useState( '0' );
 	const [ isValidValue, setIsValidValue ] = useState( true );
 
-	const props = {
-		disabled: boolean( 'disabled', false ),
-		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
-		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
-		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
-		label: text( 'label', 'Number' ),
-		min: number( 'min', 0 ),
-		max: number( 'max', 100 ),
-		placeholder: text( 'placeholder', '0' ),
-		required: boolean( 'required', false ),
-		shiftStep: number( 'shiftStep', 10 ),
-		step: text( 'step', '1' ),
-	};
-
 	return (
 		<>
 			<NumberControl
@@ -47,6 +34,7 @@ function Example() {
 				onChange={ ( v, extra ) => {
 					setValue( v );
 					setIsValidValue( extra.event.target.validity.valid );
+					onChange( v, extra );
 				} }
 			/>
 			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
@@ -54,6 +42,18 @@ function Example() {
 	);
 }
 
-export const _default = () => {
-	return <Example />;
+export const Default = Template.bind( {} );
+Default.args = {
+	disabled: false,
+	hideLabelFromVision: false,
+	isPressEnterToChange: false,
+	isShiftStepEnabled: true,
+	label: 'Number',
+	min: 0,
+	max: 100,
+	placeholder: '0',
+	required: false,
+	shiftStep: 10,
+	size: 'default',
+	step: '1',
 };

package/src/panel/body.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +17,8 @@ import Button from '../button';
 import Icon from '../icon';
 import { useControlledState, useUpdateEffect } from '../utils';
 
+const noop = () => {};
+
 export function PanelBody(
 	{
 		buttonProps = {},

package/src/placeholder/README.md

@@ -11,9 +11,10 @@ const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
 
 ### Props
 
-| Name             | Type                | Default     | Description                                                       |
-| ---------------- | ------------------- | ----------- | ----------------------------------------------------------------- |
-| `icon`           | `string, WPElement` | `undefined` | If provided, renders an icon next to the label.                   |
-| `label`          | `string`            | `undefined` | Renders a label for the placeholder.                              |
-| `instructions`   | `string`            | `undefined` | Renders instruction text below label.                             |
-| `isColumnLayout` | `bool`              | `false`     | Changes placeholder children layout from flex-row to flex-column. |
+| Name              | Type                | Default     | Description                                                       |
+| ----------------  | ------------------- | ----------- | ----------------------------------------------------------------- |
+| `icon`            | `string, WPElement` | `undefined` | If provided, renders an icon next to the label.                   |
+| `label`           | `string`            | `undefined` | Renders a label for the placeholder.                              |
+| `instructions`    | `string`            | `undefined` | Renders instruction text below label.                             |
+| `isColumnLayout`  | `bool`              | `false`     | Changes placeholder children layout from flex-row to flex-column. |
+| `withIllustration`| `bool`              | `false`     | Outputs a placeholder illustration.                             |