@wordpress/components 23.5.0 → 23.7.0

package/src/navigation/item/{base-content.js → base-content.tsx}

@@ -3,7 +3,11 @@
  */
 import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';
 
-export default function NavigationItemBaseContent( props ) {
+import type { NavigationItemBaseContentProps } from '../types';
+
+export default function NavigationItemBaseContent(
+	props: NavigationItemBaseContentProps
+) {
 	const { badge, title } = props;
 
 	return (
@@ -11,7 +15,6 @@ export default function NavigationItemBaseContent( props ) {
 			{ title && (
 				<ItemTitleUI
 					className="components-navigation__item-title"
-					variant="body.small"
 					as="span"
 				>
 					{ title }

package/src/navigation/item/{base.js → base.tsx}

@@ -15,9 +15,11 @@ import { useNavigationContext } from '../context';
 import { useNavigationTreeItem } from './use-navigation-tree-item';
 import { ItemBaseUI } from '../styles/navigation-styles';
 
+import type { NavigationItemBaseProps } from '../types';
+
 let uniqueId = 0;
 
-export default function NavigationItemBase( props ) {
+export default function NavigationItemBase( props: NavigationItemBaseProps ) {
 	// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
 	const { children, className, title, href, ...restProps } = props;
 

package/src/navigation/item/{index.js → index.tsx}

@@ -18,9 +18,11 @@ import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
 import NavigationItemBaseContent from './base-content';
 import NavigationItemBase from './base';
 
+import type { NavigationItemProps } from '../types';
+
 const noop = () => {};
 
-export default function NavigationItem( props ) {
+export function NavigationItem( props: NavigationItemProps ) {
 	const {
 		badge,
 		children,
@@ -59,7 +61,9 @@ export default function NavigationItem( props ) {
 		'is-active': isActive,
 	} );
 
-	const onItemClick = ( event ) => {
+	const onItemClick: React.MouseEventHandler<
+		HTMLButtonElement | HTMLAnchorElement
+	> = ( event ) => {
 		if ( navigateToMenu ) {
 			setActiveMenu( navigateToMenu );
 		}
@@ -99,3 +103,5 @@ export default function NavigationItem( props ) {
 		</NavigationItemBase>
 	);
 }
+
+export default NavigationItem;

package/src/navigation/item/{use-navigation-tree-item.js → use-navigation-tree-item.tsx}

@@ -11,7 +11,12 @@ import { useNavigationGroupContext } from '../group/context';
 import { useNavigationMenuContext } from '../menu/context';
 import { normalizedSearch } from '../utils';
 
-export const useNavigationTreeItem = ( itemId, props ) => {
+import type { NavigationItemProps } from '../types';
+
+export const useNavigationTreeItem = (
+	itemId: string,
+	props: NavigationItemProps
+) => {
 	const {
 		activeMenu,
 		navigationTree: { addItem, removeItem },
@@ -22,7 +27,9 @@ export const useNavigationTreeItem = ( itemId, props ) => {
 	useEffect( () => {
 		const isMenuActive = activeMenu === menu;
 		const isItemVisible =
-			! search || normalizedSearch( props.title, search );
+			! search ||
+			( props.title !== undefined &&
+				normalizedSearch( props.title, search ) );
 
 		addItem( itemId, {
 			...props,

package/src/navigation/menu/context.tsx

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NavigationMenuContext as NavigationMenuContextType } from '../types';
+
+export const NavigationMenuContext = createContext< NavigationMenuContextType >(
+	{
+		menu: undefined,
+		search: '',
+	}
+);
+export const useNavigationMenuContext = () =>
+	useContext( NavigationMenuContext );

package/src/navigation/menu/{index.js → index.tsx}

@@ -21,7 +21,9 @@ import NavigationSearchNoResultsFound from './search-no-results-found';
 import { NavigableMenu } from '../../navigable-container';
 import { MenuUI } from '../styles/navigation-styles';
 
-export default function NavigationMenu( props ) {
+import type { NavigationMenuProps } from '../types';
+
+export function NavigationMenu( props: NavigationMenuProps ) {
 	const {
 		backButtonLabel,
 		children,
@@ -96,3 +98,5 @@ export default function NavigationMenu( props ) {
 		</NavigationMenuContext.Provider>
 	);
 }
+
+export default NavigationMenu;

package/src/navigation/menu/{menu-title-search.js → menu-title-search.tsx}

@@ -13,24 +13,26 @@ import { useNavigationContext } from '../context';
 import { MenuTitleSearchUI } from '../styles/navigation-styles';
 import { SEARCH_FOCUS_DELAY } from '../constants';
 
+import type { NavigationMenuTitleSearchProps } from '../types';
+
 function MenuTitleSearch( {
 	debouncedSpeak,
 	onCloseSearch,
 	onSearch,
 	search,
 	title,
-} ) {
+}: NavigationMenuTitleSearchProps ) {
 	const {
 		navigationTree: { items },
 	} = useNavigationContext();
 	const { menu } = useNavigationMenuContext();
-	const inputRef = useRef();
+	const inputRef = useRef< HTMLInputElement >( null );
 
 	// Wait for the slide-in animation to complete before autofocusing the input.
 	// This prevents scrolling to the input during the animation.
 	useEffect( () => {
 		const delayedFocus = setTimeout( () => {
-			inputRef.current.focus();
+			inputRef.current?.focus();
 		}, SEARCH_FOCUS_DELAY );
 
 		return () => {
@@ -57,16 +59,18 @@ function MenuTitleSearch( {
 	}, [ items, search ] );
 
 	const onClose = () => {
-		onSearch( '' );
+		onSearch?.( '' );
 		onCloseSearch();
 	};
 
-	function onKeyDown( event ) {
+	const onKeyDown: React.KeyboardEventHandler< HTMLInputElement > = (
+		event
+	) => {
 		if ( event.code === 'Escape' && ! event.defaultPrevented ) {
 			event.preventDefault();
 			onClose();
 		}
-	}
+	};
 
 	const inputId = `components-navigation__menu-title-search-${ menu }`;
 	const placeholder = sprintf(
@@ -81,7 +85,7 @@ function MenuTitleSearch( {
 				autoComplete="off"
 				className="components-navigation__menu-search-input"
 				id={ inputId }
-				onChange={ ( value ) => onSearch( value ) }
+				onChange={ ( value ) => onSearch?.( value ) }
 				onKeyDown={ onKeyDown }
 				placeholder={ placeholder }
 				onClose={ onClose }

package/src/navigation/menu/{menu-title.js → menu-title.tsx}

@@ -19,16 +19,18 @@ import {
 import { useNavigationMenuContext } from './context';
 import { SEARCH_FOCUS_DELAY } from '../constants';
 
+import type { NavigationMenuTitleProps } from '../types';
+
 export default function NavigationMenuTitle( {
 	hasSearch,
 	onSearch,
 	search,
 	title,
 	titleAction,
-} ) {
+}: NavigationMenuTitleProps ) {
 	const [ isSearching, setIsSearching ] = useState( false );
 	const { menu } = useNavigationMenuContext();
-	const searchButtonRef = useRef();
+	const searchButtonRef = useRef< HTMLElement >( null );
 
 	if ( ! title ) {
 		return null;
@@ -40,7 +42,7 @@ export default function NavigationMenuTitle( {
 		// Wait for the slide-in animation to complete before focusing the search button.
 		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 		setTimeout( () => {
-			searchButtonRef.current.focus();
+			searchButtonRef.current?.focus();
 		}, SEARCH_FOCUS_DELAY );
 	};
 

package/src/navigation/menu/{search-no-results-found.js → search-no-results-found.tsx}

@@ -9,7 +9,11 @@ import { __ } from '@wordpress/i18n';
 import { useNavigationContext } from '../context';
 import { ItemBaseUI, ItemUI } from '../styles/navigation-styles';
 
-export default function NavigationSearchNoResultsFound( { search } ) {
+import type { NavigationSearchNoResultsFoundProps } from '../types';
+
+export default function NavigationSearchNoResultsFound( {
+	search,
+}: NavigationSearchNoResultsFoundProps ) {
 	const {
 		navigationTree: { items },
 	} = useNavigationContext();

package/src/navigation/menu/{use-navigation-tree-menu.js → use-navigation-tree-menu.tsx}

@@ -9,7 +9,9 @@ import { useEffect } from '@wordpress/element';
 import { useNavigationContext } from '../context';
 import { ROOT_MENU } from '../constants';
 
-export const useNavigationTreeMenu = ( props ) => {
+import type { NavigationMenuProps } from '../types';
+
+export const useNavigationTreeMenu = ( props: NavigationMenuProps ) => {
 	const {
 		navigationTree: { addMenu, removeMenu },
 	} = useNavigationContext();

package/src/navigation/stories/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Navigation } from '..';
+import { NavigationBackButton } from '../back-button';
+import { NavigationGroup } from '../group';
+import { NavigationItem } from '../item';
+import { NavigationMenu } from '../menu';
+import { DefaultStory } from './utils/default';
+import { GroupStory } from './utils/group';
+import { ControlledStateStory } from './utils/controlled-state';
+import { SearchStory } from './utils/search';
+import { MoreExamplesStory } from './utils/more-examples';
+import { HideIfEmptyStory } from './utils/hide-if-empty';
+import './style.css';
+
+const meta: ComponentMeta< typeof Navigation > = {
+	title: 'Components (Experimental)/Navigation',
+	component: Navigation,
+	subcomponents: {
+		NavigationBackButton,
+		NavigationGroup,
+		NavigationItem,
+		NavigationMenu,
+	},
+	argTypes: {
+		activeItem: { control: { type: null } },
+		activeMenu: { control: { type: null } },
+		children: { control: { type: null } },
+		onActivateMenu: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+export const _default = DefaultStory.bind( {} );
+export const controlledState = ControlledStateStory.bind( {} );
+export const groups = GroupStory.bind( {} );
+export const search = SearchStory.bind( {} );
+export const moreExamples = MoreExamplesStory.bind( {} );
+export const hideIfEmpty = HideIfEmptyStory.bind( {} );

package/src/navigation/stories/utils/{controlled-state.js → controlled-state.tsx}

@@ -1,30 +1,46 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Navigation from '../..';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
+import Button from '../../../button';
+import { Navigation } from '../..';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
 
-export function ControlledStateStory() {
+export const ControlledStateStory: ComponentStory< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );
 	const [ activeMenu, setActiveMenu ] = useState( 'root' );
 
 	// Mock navigation link.
-	const MockLink = ( { href, children } ) => (
+	const MockLink = ( {
+		href,
+		children,
+	}: {
+		href: string;
+		children: React.ReactNode;
+	} ) => (
 		<Button
 			href={ href }
 			// Since we're not actually navigating pages, simulate it with onClick.
-			onClick={ ( event ) => {
-				event.preventDefault();
-				const item = href.replace( 'https://example.com/', '' );
-				setActiveItem( item );
-			} }
+			onClick={
+				( ( event ) => {
+					event.preventDefault();
+					const item = href.replace( 'https://example.com/', '' );
+					setActiveItem( item );
+				} ) as React.MouseEventHandler< HTMLAnchorElement >
+			}
 		>
 			{ children }
 		</Button>
@@ -33,9 +49,12 @@ export function ControlledStateStory() {
 	return (
 		<>
 			<Navigation
+				{ ...props }
 				activeItem={ activeItem }
 				activeMenu={ activeMenu }
-				className="navigation-story"
+				className={ [ 'navigation-story', className ]
+					.filter( Boolean )
+					.join( ' ' ) }
 				onActivateMenu={ setActiveMenu }
 			>
 				<NavigationMenu title="Home">
@@ -124,4 +143,4 @@ export function ControlledStateStory() {
 			</div>
 		</>
 	);
-}
+};

package/src/navigation/stories/utils/{default.js → default.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,15 +11,24 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '../..';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
+import { Navigation } from '../..';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
 
-export function DefaultStory() {
+export const DefaultStory: ComponentStory< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );
 
 	return (
-		<Navigation activeItem={ activeItem } className="navigation-story">
+		<Navigation
+			{ ...props }
+			activeItem={ activeItem }
+			className={ [ 'navigation-story', className ]
+				.filter( Boolean )
+				.join( ' ' ) }
+		>
 			<NavigationMenu title="Home">
 				<NavigationItem
 					item="item-1"
@@ -75,4 +89,4 @@ export function DefaultStory() {
 			</NavigationMenu>
 		</Navigation>
 	);
-}
+};

package/src/navigation/stories/utils/{group.js → group.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,16 +11,25 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '../..';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
-import NavigationGroup from '../../group';
+import { Navigation } from '../..';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
+import { NavigationGroup } from '../../group';
 
-export function GroupStory() {
+export const GroupStory: ComponentStory< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );
 
 	return (
-		<Navigation activeItem={ activeItem } className="navigation-story">
+		<Navigation
+			{ ...props }
+			activeItem={ activeItem }
+			className={ [ 'navigation-story', className ]
+				.filter( Boolean )
+				.join( ' ' ) }
+		>
 			<NavigationMenu title="Home">
 				<NavigationGroup title="Group 1">
 					<NavigationItem
@@ -44,4 +58,4 @@ export function GroupStory() {
 			</NavigationMenu>
 		</Navigation>
 	);
-}
+};

package/src/navigation/stories/utils/{hide-if-empty.js → hide-if-empty.tsx}

@@ -1,14 +1,27 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
-import Navigation from '../..';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
+import { Navigation } from '../..';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
 
-export function HideIfEmptyStory() {
+export const HideIfEmptyStory: ComponentStory< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
 	return (
 		<>
-			<Navigation className="navigation-story">
+			<Navigation
+				{ ...props }
+				className={ [ 'navigation-story', className ]
+					.filter( Boolean )
+					.join( ' ' ) }
+			>
 				<NavigationMenu title="Home" menu="root" isEmpty={ false }>
 					<NavigationItem
 						navigateToMenu="root-sub-1"
@@ -54,4 +67,4 @@ export function HideIfEmptyStory() {
 			</p>
 		</>
 	);
-}
+};

package/src/navigation/stories/utils/{more-examples.js → more-examples.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -7,14 +12,17 @@ import { Icon, wordpress, home } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Navigation from '../..';
-import NavigationGroup from '../../group';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
+import { Navigation } from '../..';
+import { NavigationGroup } from '../../group';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
 
-export function MoreExamplesStory() {
+export const MoreExamplesStory: ComponentStory< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
 	const [ activeItem, setActiveItem ] = useState( 'child-1' );
-	const [ delayedBadge, setDelayedBadge ] = useState();
+	const [ delayedBadge, setDelayedBadge ] = useState< number | undefined >();
 	useEffect( () => {
 		const timeout = setTimeout( () => setDelayedBadge( 2 ), 1500 );
 		return () => clearTimeout( timeout );
@@ -24,7 +32,13 @@ export function MoreExamplesStory() {
 		useState( 1 );
 
 	return (
-		<Navigation activeItem={ activeItem } className="navigation-story">
+		<Navigation
+			{ ...props }
+			activeItem={ activeItem }
+			className={ [ 'navigation-story', className ]
+				.filter( Boolean )
+				.join( ' ' ) }
+		>
 			<NavigationMenu title="Home">
 				<NavigationGroup title="Items without Active State">
 					<NavigationItem item="item-1" title="Item 1" />
@@ -126,10 +140,14 @@ export function MoreExamplesStory() {
 				menu="custom-back-click-handler-prevented-menu"
 				title="Custom back button click handler prevented"
 				parentMenu="root"
-				onBackButtonClick={ ( event ) => {
-					event.preventDefault();
-					setBackButtonPreventedBadge( backButtonPreventedBadge + 1 );
-				} }
+				onBackButtonClick={
+					( ( event ) => {
+						event.preventDefault();
+						setBackButtonPreventedBadge(
+							backButtonPreventedBadge + 1
+						);
+					} ) as React.MouseEventHandler
+				}
 				backButtonLabel="Increment badge"
 			>
 				<NavigationItem
@@ -140,4 +158,4 @@ export function MoreExamplesStory() {
 			</NavigationMenu>
 		</Navigation>
 	);
-}
+};

package/src/navigation/stories/utils/{search.js → search.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,10 +11,10 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '../..';
-import NavigationGroup from '../../group';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
+import { Navigation } from '../..';
+import { NavigationGroup } from '../../group';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
 import { normalizedSearch } from '../../utils';
 
 const searchItems = [
@@ -24,12 +29,21 @@ const searchItems = [
 	{ item: 'waldo', title: 'Waldo' },
 ];
 
-export function SearchStory() {
+export const SearchStory: ComponentStory< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );
 	const [ search, setSearch ] = useState( '' );
 
 	return (
-		<Navigation activeItem={ activeItem } className="navigation-story">
+		<Navigation
+			{ ...props }
+			activeItem={ activeItem }
+			className={ [ 'navigation-story', className ]
+				.filter( Boolean )
+				.join( ' ' ) }
+		>
 			<NavigationMenu hasSearch title="Home">
 				<NavigationGroup title="Items">
 					{ searchItems.map( ( { item, title } ) => (
@@ -74,4 +88,4 @@ export function SearchStory() {
 			</NavigationMenu>
 		</Navigation>
 	);
-}
+};

package/src/navigation/test/{index.js → index.tsx}

@@ -16,11 +16,19 @@ import Navigation from '..';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
-const TestNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
+const TestNavigation = ( {
+	activeItem,
+	rootTitle,
+	showBadge,
+}: {
+	activeItem?: string;
+	rootTitle?: string;
+	showBadge?: boolean;
+} ) => (
 	<Navigation activeItem={ activeItem }>
 		<NavigationMenu title={ rootTitle }>
 			<NavigationItem
-				badge={ showBadge && 21 }
+				badge={ showBadge ? 21 : undefined }
 				item="item-1"
 				title="Item 1"
 			/>
@@ -55,9 +63,14 @@ const TestNavigationControlled = () => {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );
 	const [ activeMenu, setActiveMenu ] = useState( 'root' );
 
-	const onMockLinkClick = ( event ) => {
+	const onMockLinkClick: React.MouseEventHandler< HTMLAnchorElement > = (
+		event
+	) => {
 		event.preventDefault();
-		const item = event.target.href.replace( 'https://example.com/', '' );
+		const item = ( event.target as HTMLAnchorElement ).href.replace(
+			'https://example.com/',
+			''
+		);
 		setActiveItem( item );
 	};