Use the new navigator components

packages/components/package.json

@@ -55,9 +55,12 @@
 		"framer-motion": "^4.1.17",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
+		"history": "^4.9.0",
+		"hoist-non-react-statics": "^3.3.2",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
+		"path-to-regexp": "^0.1.7",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
 		"react-dates": "^17.1.1",

packages/components/src/index.js

@@ -96,6 +96,12 @@ export { default as __experimentalNavigationBackButton } from './navigation/back
 export { default as __experimentalNavigationGroup } from './navigation/group';
 export { default as __experimentalNavigationItem } from './navigation/item';
 export { default as __experimentalNavigationMenu } from './navigation/menu';
+export {
+	Navigator as __experimentalNavigator,
+	NavigatorScreen as __experimentalNavigatorScreen,
+	useNavigatorHistory as __experimentalUseNavigatorHistory,
+	NavigatorLink as __experimentalNavigatorLink,
+} from './navigator';
 export { default as Notice } from './notice';
 export { default as __experimentalNumberControl } from './number-control';
 export { default as NoticeList } from './notice/list';
@@ -157,6 +163,7 @@ export {
 	useCustomUnits as __experimentalUseCustomUnits,
 	parseUnit as __experimentalParseUnit,
 } from './unit-control';
+export { View as __experimentalView } from './view';
 export { VisuallyHidden } from './visually-hidden';
 export { VStack as __experimentalVStack } from './v-stack';
 export { default as IsolatedEventContainer } from './isolated-event-container';

packages/components/src/navigator/index.js

@@ -0,0 +1,14 @@
+export { default as Navigator } from './navigator';
+
+export { default as NavigatorBack } from './navigator-back';
+export { default as NavigatorButton } from './navigator-button';
+export { default as NavigatorLink } from './navigator-link';
+export { default as NavigatorRouter } from './navigator-router';
+export { default as NavigatorScreen } from './navigator-screen';
+export { default as NavigatorScreens } from './navigator-screens';
+export { default as NavigatorSwitch } from './navigator-switch';
+
+export { default as withNavigator } from './with-navigator';
+
+export * from './navigator-context';
+export * from './navigator-hooks';

packages/components/src/navigator/navigator-back.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { contextConnect, useContextSystem } from '../ui/context';
+import { useHistory } from './router';
+
+function NavigatorBack( props, forwardedRef ) {
+	const { ...otherProps } = useContextSystem( props, 'NavigatorBack' );
+	const history = useHistory();
+
+	return (
+		<Button
+			{ ...otherProps }
+			onClick={ history.goBack }
+			ref={ forwardedRef }
+		/>
+	);
+}
+
+export default contextConnect( NavigatorBack, 'NavigatorBack' );

packages/components/src/navigator/navigator-button.js

@@ -0,0 +1,65 @@
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { contextConnect, useContextSystem } from '../ui/context';
+import { useHistory } from './router';
+
+function NavigatorButton( props, forwardedRef ) {
+	/* eslint-disable no-unused-vars */
+	const {
+		as,
+		children,
+		exact,
+		href,
+		isBack,
+		isPlain,
+		params,
+		showArrow,
+		to,
+		...otherProps
+	} = useContextSystem( props, 'NavigatorButton' );
+	/* eslint-enable no-unused-vars */
+
+	const history = useHistory();
+
+	const handleOnClick = ( event ) => {
+		event.preventDefault();
+
+		if ( isBack ) {
+			if ( to ) {
+				history.push( to, { isBack: true } );
+			} else {
+				history.goBack();
+			}
+		} else {
+			history.push( to );
+		}
+	};
+
+	if ( ! to ) {
+		return (
+			<Button
+				href={ href || '#' }
+				ref={ forwardedRef }
+				{ ...otherProps }
+				onClick={ handleOnClick }
+			>
+				{ children }
+			</Button>
+		);
+	}
+
+	return (
+		<Button
+			{ ...otherProps }
+			exact={ exact }
+			onClick={ handleOnClick }
+			ref={ forwardedRef }
+		>
+			{ children }
+		</Button>
+	);
+}
+
+export default contextConnect( NavigatorButton, 'NavigatorButton' );

packages/components/src/navigator/navigator-context.js

@@ -0,0 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+export const NavigatorContext = createContext( {} );
+export const useNavigatorContext = () => useContext( NavigatorContext );

packages/components/src/navigator/navigator-hooks.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { useHistory, useLocation, useParams, useRouteMatch } from './router';
+
+export const useNavigatorHistory = useHistory;
+export const useNavigatorLocation = useLocation;
+export const useNavigatorParams = useParams;
+export const useNavigatorRouteMatch = useRouteMatch;

packages/components/src/navigator/navigator-link.js

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Children } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from './navigator-styles';
+import {
+	contextConnect,
+	ContextSystemProvider,
+	hasConnectNamespace,
+	useContextSystem,
+} from '../ui/context';
+import { NavLink, useHistory } from './router';
+
+function NavigatorLink( props, forwardedRef ) {
+	/* eslint-disable no-unused-vars */
+	const {
+		as,
+		children,
+		className,
+		exact,
+		href,
+		isBack,
+		isPlain,
+		params,
+		showArrow,
+		to,
+		...otherProps
+	} = useContextSystem( props, 'NavigatorLink' );
+	/* eslint-enable no-unused-vars */
+
+	const history = useHistory();
+	const [ child ] = Children.toArray( children );
+	const isWrappingMenuItem = hasConnectNamespace( child, [ 'MenuItem' ] );
+
+	const isLink = !! to || !! href;
+
+	const classes = classNames( {
+		[ styles.menuItemLink ]: isWrappingMenuItem,
+		className,
+	} );
+
+	const handleOnClick = ( event ) => {
+		if ( isBack ) {
+			event.preventDefault();
+			if ( to ) {
+				history.push( to, { isBack: true } );
+			} else {
+				history.goBack();
+			}
+		}
+	};
+
+	const content = (
+		<ContextSystemProvider
+			value={ {
+				MenuItem: {
+					isBack,
+					showArrow: isLink || showArrow,
+					tabIndex: -1,
+				},
+			} }
+		>
+			{ children }
+		</ContextSystemProvider>
+	);
+
+	if ( ! to ) {
+		return (
+			<a
+				href={ href || '#' }
+				ref={ forwardedRef }
+				{ ...otherProps }
+				className={ classes }
+				onClick={ handleOnClick }
+			>
+				{ content }
+			</a>
+		);
+	}
+
+	return (
+		<NavLink
+			{ ...otherProps }
+			activeClassName="is-active"
+			className={ classes }
+			exact={ exact }
+			onClick={ handleOnClick }
+			ref={ forwardedRef }
+			to={ to }
+		>
+			{ content }
+		</NavLink>
+	);
+}
+
+export default contextConnect( NavigatorLink, 'NavigatorLink' );

packages/components/src/navigator/navigator-router.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { memo, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigatorHistory } from './navigator-hooks';
+import { MemoryRouter } from './router';
+
+function NavigatorRouter( { children, initialPath } ) {
+	const history = useNavigatorHistory();
+	// Would only exist if nested within another <Navigator />
+	const location = history?.location;
+
+	// Redirect on load
+	useEffect( () => {} );
+
+	// No parent router
+	if ( ! location ) {
+		const initialEntry = initialPath ? [ initialPath ] : undefined;
+
+		return (
+			<MemoryRouter initialEntries={ initialEntry }>
+				{ children }
+			</MemoryRouter>
+		);
+	}
+
+	return children;
+}
+
+export default memo( NavigatorRouter );