Sort rebase issues

packages/components/src/navigation/context.js

@@ -31,9 +31,3 @@ export const NavigationContext = createContext( {
 	},
 } );
 export const useNavigationContext = () => useContext( NavigationContext );
-
-export const NavigationMenuContext = createContext( {
-	search: '',
-} );
-export const useNavigationMenuContext = () =>
-	useContext( NavigationMenuContext );

packages/components/src/navigation/item/index.js

@@ -2,21 +2,26 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
+import { deburr, noop } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { useRef } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Button from '../../button';
 import { useNavigationContext } from '../context';
-import { ItemBadgeUI, ItemTitleUI, ItemUI } from '../styles/navigation-styles';
-import { useNavigationTreeItem } from './use-navigation-tree-item';
 import { useNavigationMenuContext } from '../menu/context';
+import { useNavigationTreeItem } from './use-navigation-tree-item';
+import { ItemBadgeUI, ItemTitleUI, ItemUI } from '../styles/navigation-styles';
+
+// @see packages/block-editor/src/components/inserter/search-items.js
+const normalizeInput = ( input ) =>
+	deburr( input ).replace( /^\//, '' ).toLowerCase();
 
 export default function NavigationItem( props ) {
 	const {
@@ -32,7 +37,8 @@ export default function NavigationItem( props ) {
 	} = props;
 	useNavigationTreeItem( props );
 	const { activeItem, setActiveMenu } = useNavigationContext();
-	const { isActive } = useNavigationMenuContext();
+	const { isActive, search } = useNavigationMenuContext();
+	const itemRef = useRef( null );
 
 	// If this item is in an inactive menu, then we skip rendering
 	// We need to make sure this component gets mounted though
@@ -41,6 +47,22 @@ export default function NavigationItem( props ) {
 		return null;
 	}
 
+	if ( search ) {
+		const searchQuery = normalizeInput( search );
+		if ( title && -1 === normalizeInput( title ).indexOf( searchQuery ) ) {
+			return null;
+		}
+		if (
+			children &&
+			-1 ===
+				normalizeInput( itemRef?.current?.textContent ).indexOf(
+					searchQuery
+				)
+		) {
+			return null;
+		}
+	}
+
 	const classes = classnames( 'components-navigation__item', className, {
 		'is-active': item && activeItem === item,
 	} );
@@ -54,7 +76,7 @@ export default function NavigationItem( props ) {
 	};
 
 	return (
-		<ItemUI className={ classes }>
+		<ItemUI className={ classes } ref={ itemRef }>
 			{ children || (
 				<Button href={ href } onClick={ onItemClick } { ...restProps }>
 					{ title && (

packages/components/src/navigation/menu/context.js

@@ -4,8 +4,9 @@
 import { createContext, useContext } from '@wordpress/element';
 
 export const NavigationMenuContext = createContext( {
-	menu: undefined,
 	isActive: false,
+	menu: undefined,
+	search: '',
 } );
 export const useNavigationMenuContext = () =>
 	useContext( NavigationMenuContext );

packages/components/src/navigation/menu/index.js

@@ -6,44 +6,44 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { ROOT_MENU } from '../constants';
-import { useNavigationContext } from '../context';
-import {
-	MenuBackButtonUI,
-	MenuTitleUI,
-	MenuUI,
-} from '../styles/navigation-styles';
 import { NavigationMenuContext } from './context';
+import { useNavigationContext } from '../context';
 import { useNavigationTreeMenu } from './use-navigation-tree-menu';
+import NavigationMenuTitle from './menu-title';
+import { MenuBackButtonUI, MenuUI } from '../styles/navigation-styles';
 
 export default function NavigationMenu( props ) {
 	const {
 		backButtonLabel,
 		children,
 		className,
+		hasSearch,
 		menu = ROOT_MENU,
 		parentMenu,
 		title,
 	} = props;
+	const [ search, setSearch ] = useState( '' );
 	useNavigationTreeMenu( props );
 	const {
 		activeMenu,
 		setActiveMenu,
 		navigationTree,
 	} = useNavigationContext();
-	const isActive = activeMenu === menu;
 
-	const classes = classnames( 'components-navigation__menu', className );
+	const isActive = activeMenu === menu;
 
 	const context = {
-		menu,
 		isActive,
+		menu,
+		search,
 	};
 
 	// Keep the children rendered to make sure inactive items are included in the navigation tree
@@ -56,6 +56,7 @@ export default function NavigationMenu( props ) {
 	}
 
 	const parentMenuTitle = navigationTree.getMenu( parentMenu )?.title;
+	const classes = classnames( 'components-navigation__menu', className );
 
 	return (
 		<NavigationMenuContext.Provider value={ context }>
@@ -70,15 +71,14 @@ export default function NavigationMenu( props ) {
 						{ backButtonLabel || parentMenuTitle || __( 'Back' ) }
 					</MenuBackButtonUI>
 				) }
-				{ title && (
-					<MenuTitleUI
-						as="h2"
-						className="components-navigation__menu-title"
-						variant="subtitle"
-					>
-						{ title }
-					</MenuTitleUI>
-				) }
+
+				<NavigationMenuTitle
+					hasSearch={ hasSearch }
+					search={ search }
+					setSearch={ setSearch }
+					title={ title }
+				/>
+
 				<ul>{ children }</ul>
 			</MenuUI>
 		</NavigationMenuContext.Provider>

packages/components/src/navigation/menu-title.js → packages/components/src/navigation/menu/menu-title.js

@@ -8,10 +8,10 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Animate from '../animate';
-import Button from '../button';
-import { MenuTitleSearchUI, MenuTitleUI } from './styles/navigation-styles';
-import TextControl from '../text-control';
+import Animate from '../../animate';
+import Button from '../../button';
+import { MenuTitleSearchUI, MenuTitleUI } from '../styles/navigation-styles';
+import TextControl from '../../text-control';
 
 export default function NavigationMenuTitle( {
 	hasSearch,
@@ -41,6 +41,7 @@ export default function NavigationMenuTitle( {
 							<Icon icon={ searchIcon } />
 
 							<TextControl
+								autocomplete="off"
 								// eslint-disable-next-line jsx-a11y/no-autofocus
 								autoFocus
 								onChange={ ( value ) => setSearch( value ) }