@wordpress/components 23.5.0 → 23.6.0

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