@wordpress/components 21.2.0 → 21.3.0

package/src/navigator/navigator-screen/component.tsx

@@ -4,13 +4,12 @@
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { motion, MotionProps } from 'framer-motion';
-import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
 import { focus } from '@wordpress/dom';
-import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
+import { useContext, useEffect, useRef } from '@wordpress/element';
 import {
 	useReducedMotion,
 	useMergeRefs,
@@ -27,7 +26,6 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
-import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import type { NavigatorScreenProps } from '../types';
@@ -44,7 +42,10 @@ type Props = Omit<
 	keyof MotionProps
 >;
 
-function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
+function UnconnectedNavigatorScreen(
+	props: Props,
+	forwardedRef: ForwardedRef< any >
+) {
 	const { children, className, path, ...otherProps } = useContextSystem(
 		props,
 		'NavigatorScreen'
@@ -57,21 +58,6 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 
 	const previousLocation = usePrevious( location );
 
-	const cx = useCx();
-	const classes = useMemo(
-		() =>
-			cx(
-				css( {
-					// Ensures horizontal overflow is visually accessible.
-					overflowX: 'auto',
-					// In case the root has a height, it should not be exceeded.
-					maxHeight: '100%',
-				} ),
-				className
-			),
-		[ className, cx ]
-	);
-
 	// Focus restoration
 	const isInitialLocation = location.isInitial && ! location.isBack;
 	useEffect( () => {
@@ -79,14 +65,20 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 		// - if the current location is not the initial one (to avoid moving focus on page load)
 		// - when the screen becomes visible
 		// - if the wrapper ref has been assigned
-		if ( isInitialLocation || ! isMatch || ! wrapperRef.current ) {
+		// - if focus hasn't already been restored for the current location
+		if (
+			isInitialLocation ||
+			! isMatch ||
+			! wrapperRef.current ||
+			location.hasRestoredFocus
+		) {
 			return;
 		}
 
 		const activeElement = wrapperRef.current.ownerDocument.activeElement;
 
 		// If an element is already focused within the wrapper do not focus the
-		// element. This prevents inputs or buttons from losing focus unecessarily.
+		// element. This prevents inputs or buttons from losing focus unnecessarily.
 		if ( wrapperRef.current.contains( activeElement ) ) {
 			return;
 		}
@@ -110,10 +102,12 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}
 
+		location.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
 		isInitialLocation,
 		isMatch,
+		location.hasRestoredFocus,
 		location.isBack,
 		previousLocation?.focusTargetSelector,
 	] );
@@ -128,7 +122,7 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 		return (
 			<View
 				ref={ mergedWrapperRef }
-				className={ classes }
+				className={ className }
 				{ ...otherProps }
 			>
 				{ children }
@@ -174,7 +168,7 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 	return (
 		<motion.div
 			ref={ mergedWrapperRef }
-			className={ classes }
+			className={ className }
 			{ ...otherProps }
 			{ ...animatedProps }
 		>
@@ -217,9 +211,9 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
  * );
  * ```
  */
-const ConnectedNavigatorScreen = contextConnect(
-	NavigatorScreen,
+export const NavigatorScreen = contextConnect(
+	UnconnectedNavigatorScreen,
 	'NavigatorScreen'
 );
 
-export default ConnectedNavigatorScreen;
+export default NavigatorScreen;

package/src/navigator/navigator-screen/index.ts

@@ -1 +1 @@
-export { default } from './component';
+export { default as NavigatorScreen } from './component';

package/src/navigator/stories/index.tsx

@@ -0,0 +1,210 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { Card, CardBody, CardFooter, CardHeader } from '../../card';
+import { HStack } from '../../h-stack';
+import Dropdown from '../../dropdown';
+import {
+	NavigatorProvider,
+	NavigatorScreen,
+	NavigatorButton,
+	NavigatorBackButton,
+} from '..';
+
+const meta: ComponentMeta< typeof NavigatorProvider > = {
+	component: NavigatorProvider,
+	title: 'Components (Experimental)/Navigator',
+	subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: null } },
+		initialPath: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof NavigatorProvider > = ( {
+	style,
+	...props
+} ) => (
+	<NavigatorProvider
+		style={ { ...style, height: '100vh', maxHeight: '450px' } }
+		{ ...props }
+	>
+		<NavigatorScreen path="/">
+			<Card>
+				<CardBody>
+					<p>This is the home screen.</p>
+
+					<HStack justify="flex-start" wrap>
+						<NavigatorButton variant="secondary" path="/child">
+							Navigate to child screen.
+						</NavigatorButton>
+
+						<NavigatorButton
+							variant="secondary"
+							path="/overflow-child"
+						>
+							Navigate to screen with horizontal overflow.
+						</NavigatorButton>
+
+						<NavigatorButton variant="secondary" path="/stickies">
+							Navigate to screen with sticky content.
+						</NavigatorButton>
+
+						<Dropdown
+							renderToggle={ ( {
+								isOpen,
+								onToggle,
+							}: {
+								// TODO: remove once `Dropdown` is refactored to TypeScript
+								isOpen: boolean;
+								onToggle: () => void;
+							} ) => (
+								<Button
+									onClick={ onToggle }
+									aria-expanded={ isOpen }
+									variant="primary"
+								>
+									Open test dialog
+								</Button>
+							) }
+							renderContent={ () => (
+								<Card>
+									<CardHeader>Go</CardHeader>
+									<CardBody>Stuff</CardBody>
+								</Card>
+							) }
+						/>
+					</HStack>
+				</CardBody>
+			</Card>
+		</NavigatorScreen>
+
+		<NavigatorScreen path="/child">
+			<Card>
+				<CardBody>
+					<p>This is the child screen.</p>
+					<NavigatorBackButton variant="secondary">
+						Go back
+					</NavigatorBackButton>
+				</CardBody>
+			</Card>
+		</NavigatorScreen>
+
+		<NavigatorScreen path="/overflow-child">
+			<Card>
+				<CardBody>
+					<NavigatorBackButton variant="secondary">
+						Go back
+					</NavigatorBackButton>
+					<div
+						style={ {
+							display: 'inline-block',
+							background: 'papayawhip',
+						} }
+					>
+						<span
+							style={ {
+								color: 'palevioletred',
+								whiteSpace: 'nowrap',
+								fontSize: '42vw',
+							} }
+						>
+							¯\_(ツ)_/¯
+						</span>
+					</div>
+				</CardBody>
+			</Card>
+		</NavigatorScreen>
+
+		<NavigatorScreen path="/stickies">
+			<Card>
+				<CardHeader style={ getStickyStyles( { zIndex: 2 } ) }>
+					<NavigatorBackButton variant="secondary">
+						Go back
+					</NavigatorBackButton>
+				</CardHeader>
+				<CardBody>
+					<div
+						style={ getStickyStyles( {
+							top: 69,
+							bgColor: 'peachpuff',
+						} ) }
+					>
+						<h2>A wild sticky element appears</h2>
+					</div>
+					<MetaphorIpsum quantity={ 3 } />
+				</CardBody>
+				<CardBody>
+					<div
+						style={ getStickyStyles( {
+							top: 69,
+							bgColor: 'paleturquoise',
+						} ) }
+					>
+						<h2>Another wild sticky element appears</h2>
+					</div>
+					<MetaphorIpsum quantity={ 3 } />
+				</CardBody>
+				<CardFooter
+					style={ getStickyStyles( {
+						bgColor: 'mistyrose',
+					} ) }
+				>
+					<Button variant="primary">Primary noop</Button>
+				</CardFooter>
+			</Card>
+		</NavigatorScreen>
+	</NavigatorProvider>
+);
+
+export const Default: ComponentStory< typeof NavigatorProvider > =
+	Template.bind( {} );
+Default.args = {
+	initialPath: '/',
+};
+
+function getStickyStyles( {
+	bottom = 0,
+	bgColor = 'whitesmoke',
+	top = 0,
+	zIndex = 1,
+} ): React.CSSProperties {
+	return {
+		display: 'flex',
+		position: 'sticky',
+		top,
+		bottom,
+		zIndex,
+		backgroundColor: bgColor,
+	};
+}
+
+function MetaphorIpsum( { quantity }: { quantity: number } ) {
+	const list = [
+		'A loopy clarinet’s year comes with it the thought that the fenny step-son is an ophthalmologist. The literature would have us believe that a glabrate country is not but a rhythm. A beech is a rub from the right perspective. In ancient times few can name an unglossed walrus that isn’t an unspilt trial.',
+		'Authors often misinterpret the afterthought as a roseless mother-in-law, when in actuality it feels more like an uncapped thunderstorm. In recent years, some posit the tarry bottle to be less than acerb. They were lost without the unkissed timbale that composed their customer. A donna is a springtime breath.',
+		'It’s an undeniable fact, really; their museum was, in this moment, a snotty beef. The swordfishes could be said to resemble prowessed lasagnas. However, the rainier authority comes from a cureless soup. Unfortunately, that is wrong; on the contrary, the cover is a powder.',
+	];
+	quantity = Math.min( list.length, quantity );
+	return (
+		<>
+			{ list.slice( 0, quantity ).map( ( text, key ) => (
+				<p style={ { maxWidth: '20em' } } key={ key }>
+					{ text }
+				</p>
+			) ) }
+		</>
+	);
+}