newspack-components 4.6.2 → 4.7.0-alpha.1

package/src/drawer/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * Drawer
+ */
+
+/**
+ * Internal dependencies.
+ */
+import Action from './action';
+import CloseIcon from './close-icon';
+import Content from './content';
+import Footer from './footer';
+import Header from './header';
+import Root from './root';
+import Divider from './divider';
+import Title from './title';
+
+// A namespace object, not this package's usual flat exports. See the README.
+export const Drawer = {
+	Root,
+	Header,
+	Title,
+	CloseIcon,
+	Content,
+	Divider,
+	Footer,
+	Action,
+};
+
+Object.entries( Drawer ).forEach( ( [ name, part ] ) => {
+	( part as { displayName?: string } ).displayName = `Drawer.${ name }`;
+} );
+
+export default Drawer;

package/src/drawer/root.tsx

@@ -0,0 +1,328 @@
+/**
+ * WordPress dependencies.
+ */
+import { Modal, Popover, SlotFillProvider } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
+import { Children, forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import useConfirmDialog from '../hooks/use-confirm-dialog';
+import { DrawerContext } from './context';
+import Body from './body';
+import Content from './content';
+import Divider from './divider';
+import useExitAnimation from './use-exit-animation';
+import type { DrawerRootProps, DrawerTitleInfo } from './types';
+import './style.scss';
+
+const sizeClassMap = {
+	small: 'newspack-drawer--size-small',
+	medium: 'newspack-drawer--size-medium',
+	large: 'newspack-drawer--size-large',
+	'x-large': 'newspack-drawer--size-x-large',
+	full: 'newspack-drawer--size-full',
+};
+
+const captureOptions = { capture: true };
+
+const Root = forwardRef< HTMLDivElement, DrawerRootProps >( function Root(
+	{
+		isOpen = false,
+		size = 'medium',
+		onRequestClose,
+		isDirty = false,
+		confirmCloseMessage = __( 'You have unsaved changes that will be lost. Discard changes?', 'newspack-plugin' ),
+		confirmButtonText = __( 'Discard Changes', 'newspack-plugin' ),
+		requestConfirm,
+		contentLabel,
+		describedBy,
+		className,
+		style,
+		children,
+	},
+	forwardedRef
+) {
+	const [ title, setTitle ] = useState< DrawerTitleInfo | null >( null );
+
+	const titleRef = useRef< DrawerTitleInfo | null >( null );
+	const titlesRef = useRef< DrawerTitleInfo[] >( [] );
+	const registerTitle = useCallback( ( info: DrawerTitleInfo | null, forId?: string ) => {
+		if ( info ) {
+			const at = titlesRef.current.findIndex( entry => entry.id === info.id );
+			if ( at === -1 ) {
+				titlesRef.current = [ ...titlesRef.current, info ];
+			} else {
+				titlesRef.current = titlesRef.current.map( entry => ( entry.id === info.id ? info : entry ) );
+			}
+		} else if ( forId ) {
+			titlesRef.current = titlesRef.current.filter( entry => entry.id !== forId );
+		} else {
+			titlesRef.current = [];
+		}
+		const current = titlesRef.current[ titlesRef.current.length - 1 ] ?? null;
+		titleRef.current = current;
+		setTitle( current );
+	}, [] );
+
+	useEffect( () => {
+		if ( 'production' === process.env.NODE_ENV || ! isOpen ) {
+			return;
+		}
+		if ( ! titleRef.current && ! contentLabel ) {
+			// eslint-disable-next-line no-console
+			console.warn( 'Drawer: render a Drawer.Title or pass `contentLabel`. Without one the panel has no accessible name.' );
+		}
+	}, [ isOpen, title, contentLabel ] );
+
+	useEffect( () => {
+		if ( 'production' === process.env.NODE_ENV || sizeClassMap[ size ] ) {
+			return;
+		}
+		// eslint-disable-next-line no-console
+		console.warn( `Drawer: unknown size "${ size }", falling back to medium. Use one of ${ Object.keys( sizeClassMap ).join( ', ' ) }.` );
+	}, [ size ] );
+
+	// No `when`: it installs a history.block guard that fights the wizard's own.
+	const {
+		confirmDialog,
+		requestConfirm: ownRequestConfirm,
+		cancelConfirm: ownCancelConfirm,
+	} = useConfirmDialog( {
+		message: confirmCloseMessage,
+		confirmButtonText,
+		// Hidden, but still the dialog's accessible name.
+		title: __( 'Unsaved changes', 'newspack-plugin' ),
+		hideTitle: true,
+	} );
+
+	const confirm = requestConfirm || ownRequestConfirm;
+
+	const requestClose = useCallback( () => {
+		if ( ! isOpen ) {
+			return;
+		}
+		if ( isDirty ) {
+			let prompted = true;
+			confirm( () => {
+				prompted = false;
+				onRequestClose();
+			} );
+			if ( 'production' !== process.env.NODE_ENV && ! prompted ) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'Drawer: `requestConfirm` closed the panel without prompting, so `isDirty` is set while its own `when` is not. ' +
+						'Unsaved changes are being discarded silently. Drive both from the same state.'
+				);
+			}
+			return;
+		}
+		onRequestClose();
+	}, [ isOpen, isDirty, confirm, onRequestClose ] );
+
+	// Core fills its dismisser ref in a passive effect and siblings call it from
+	// theirs, so a closure would go stale by tree order. Layout effects run first.
+	const dismissRef = useRef( { isOpen, isDirty, onRequestClose } );
+	useLayoutEffect( () => {
+		dismissRef.current = { isOpen, isDirty, onRequestClose };
+	} );
+
+	// Core calls this as another Modal mounts. A dirty panel cannot answer: its own
+	// confirmation would land under that Modal, and a delegated one is that Modal.
+	const dismiss = useCallback( () => {
+		const current = dismissRef.current;
+		if ( current.isOpen && ! current.isDirty ) {
+			current.onRequestClose();
+		}
+	}, [] );
+
+	const onKeyDown = useCallback(
+		( event: React.KeyboardEvent ) => {
+			// Cancelling a CJK composition raises an Escape of its own.
+			if ( event.nativeEvent?.isComposing || 229 === event.keyCode ) {
+				return;
+			}
+			if ( ( 'Escape' !== event.key && 'Escape' !== event.code ) || event.defaultPrevented ) {
+				return;
+			}
+			event.preventDefault();
+			requestClose();
+		},
+		[ requestClose ]
+	);
+
+	const [ node, setNode ] = useState< HTMLElement | null >( null );
+	const frameRefs = useMergeRefs( [ setNode, forwardedRef ] );
+	const { isRendered, isExiting } = useExitAnimation( isOpen, node );
+
+	const openerRef = useRef< Element | null >( null );
+	const [ wasOpenForFocus, setWasOpenForFocus ] = useState( false );
+	if ( wasOpenForFocus !== isOpen ) {
+		setWasOpenForFocus( isOpen );
+		if ( isOpen ) {
+			// eslint-disable-next-line @wordpress/no-global-active-element
+			openerRef.current = typeof document === 'undefined' ? null : document.activeElement;
+		} else {
+			// During render, so it is gone in the commit that starts the exit rather
+			// than holding focus while the panel goes inert. Only ours to withdraw.
+			ownCancelConfirm();
+		}
+	}
+
+	const movedFocusOut = useRef( false );
+	useEffect( () => {
+		const frame = node?.querySelector< HTMLElement >( '.components-modal__frame' );
+		if ( ! frame ) {
+			if ( node && 'production' !== process.env.NODE_ENV ) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'Drawer: no .components-modal__frame inside the overlay. Focus return and `inert` are both off. ' +
+						'Check this against the installed @wordpress/components.'
+				);
+			}
+			return;
+		}
+		if ( isExiting ) {
+			// Focus goes home before `inert` blurs it, unless parked elsewhere:
+			// reclaiming it from a sibling frame would take it from an open modal.
+			const active = frame.ownerDocument.activeElement;
+			if ( frame.contains( active ) || ! active || active === frame.ownerDocument.body ) {
+				movedFocusOut.current = true;
+				const opener = openerRef.current as HTMLElement | null;
+				if ( opener?.isConnected ) {
+					opener.focus?.();
+				}
+			}
+			frame.toggleAttribute( 'inert', true );
+			return;
+		}
+		frame.toggleAttribute( 'inert', false );
+		// Reopened mid-exit: the same Modal instance, so focus-on-mount never re-runs.
+		const restore = movedFocusOut.current;
+		movedFocusOut.current = false;
+		if ( restore && frame.isConnected && ! frame.contains( frame.ownerDocument.activeElement ) ) {
+			frame.focus( { preventScroll: true } );
+		}
+	}, [ node, isExiting ] );
+
+	// Reduced motion has no exit to hand focus back during.
+	useLayoutEffect( () => {
+		if ( ! isRendered ) {
+			return;
+		}
+		return () => {
+			const opener = openerRef.current as HTMLElement | null;
+			if ( ! opener?.isConnected ) {
+				return;
+			}
+			const active = opener.ownerDocument.activeElement;
+			if ( active && active !== opener.ownerDocument.body && active.isConnected ) {
+				return;
+			}
+			opener.focus?.();
+		};
+	}, [ isRendered ] );
+
+	const pressedOverlay = useRef( false );
+	// On commit, not after paint: a release in the gap would close a drawer that
+	// has just turned dirty.
+	const requestCloseRef = useRef( requestClose );
+	useLayoutEffect( () => {
+		requestCloseRef.current = requestClose;
+	}, [ requestClose ] );
+	useEffect( () => {
+		if ( ! node ) {
+			return;
+		}
+		const { ownerDocument } = node;
+		pressedOverlay.current = false;
+		const onPointerDown = ( event: PointerEvent ) => {
+			pressedOverlay.current = 0 === event.button && event.target === node;
+			if ( pressedOverlay.current ) {
+				// Touch and pen capture implicitly, reporting the release on the overlay.
+				if ( 'function' === typeof node.hasPointerCapture && node.hasPointerCapture( event.pointerId ) ) {
+					node.releasePointerCapture( event.pointerId );
+				}
+				event.preventDefault();
+			}
+		};
+		const onPointerUp = ( event: PointerEvent ) => {
+			const closes = pressedOverlay.current && 0 === event.button && event.target === node;
+			pressedOverlay.current = false;
+			if ( closes ) {
+				requestCloseRef.current();
+			}
+		};
+		const onPointerCancel = () => {
+			pressedOverlay.current = false;
+		};
+		node.addEventListener( 'pointerdown', onPointerDown );
+		ownerDocument.addEventListener( 'pointerup', onPointerUp, captureOptions );
+		ownerDocument.addEventListener( 'pointercancel', onPointerCancel, captureOptions );
+		return () => {
+			pressedOverlay.current = false;
+			node.removeEventListener( 'pointerdown', onPointerDown );
+			ownerDocument.removeEventListener( 'pointerup', onPointerUp, captureOptions );
+			ownerDocument.removeEventListener( 'pointercancel', onPointerCancel, captureOptions );
+		};
+	}, [ node ] );
+
+	const contextValue = useMemo( () => ( { requestClose, title, setTitle: registerTitle } ), [ requestClose, title, registerTitle ] );
+
+	if ( ! isRendered ) {
+		return null;
+	}
+
+	const grouped: React.ReactNode[] = [];
+	let run: React.ReactNode[] = [];
+	let bodyIndex = 0;
+	const flushRun = () => {
+		if ( run.length ) {
+			grouped.push( <Body key={ `body-${ bodyIndex++ }` }>{ run }</Body> );
+			run = [];
+		}
+	};
+	Children.toArray( children ).forEach( child => {
+		if ( isValidElement( child ) && ( child.type === Content || child.type === Divider ) ) {
+			run.push( child );
+		} else {
+			flushRun();
+			grouped.push( child );
+		}
+	} );
+	flushRun();
+
+	return (
+		<DrawerContext.Provider value={ contextValue }>
+			<Modal
+				__experimentalHideHeader
+				ref={ frameRefs }
+				className={ classnames( 'newspack-drawer', sizeClassMap[ size ] || sizeClassMap.medium, isExiting && 'is-exiting', className ) }
+				overlayClassName={ classnames( 'newspack-drawer__overlay', isExiting && 'is-exiting' ) }
+				style={ style }
+				contentLabel={ title ? undefined : contentLabel }
+				aria={ { labelledby: title ? title.id : undefined, describedby: describedBy } }
+				shouldCloseOnEsc={ false }
+				shouldCloseOnClickOutside={ false }
+				onRequestClose={ dismiss }
+				onKeyDown={ onKeyDown }
+			>
+				{ /* Without a slot inside, a popover lands in an aria-hidden container. */ }
+				<SlotFillProvider>
+					{ grouped }
+					{ ! requestConfirm && confirmDialog }
+					<Popover.Slot />
+				</SlotFillProvider>
+			</Modal>
+		</DrawerContext.Provider>
+	);
+} );
+
+export default Root;

package/src/drawer/slots.test.js

@@ -0,0 +1,314 @@
+/**
+ * Internal dependencies.
+ */
+import { DrawerContext } from './context';
+import Header from './header';
+import Title from './title';
+import CloseIcon from './close-icon';
+import Content from './content';
+import Divider from './divider';
+import Footer from './footer';
+import Action from './action';
+
+/**
+ * External dependencies.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+const withContext = ( ui, value = {} ) =>
+	render( <DrawerContext.Provider value={ { requestClose: () => {}, title: null, setTitle: () => {}, ...value } }>{ ui }</DrawerContext.Provider> );
+
+describe( 'Drawer.Header', () => {
+	it( 'renders a container with its children', () => {
+		withContext( <Header className="custom">content</Header> );
+		const header = screen.getByText( 'content' );
+		expect( header ).toHaveClass( 'newspack-drawer__header', 'custom' );
+	} );
+} );
+
+describe( 'Drawer.Title', () => {
+	it( 'renders an h2 and registers its id and text', () => {
+		const setTitle = jest.fn();
+		withContext( <Title>Edit Styles</Title>, { setTitle } );
+		const heading = screen.getByRole( 'heading', { level: 2, name: 'Edit Styles' } );
+		expect( heading.id ).toBeTruthy();
+		expect( setTitle ).toHaveBeenCalledWith( { id: heading.id, text: 'Edit Styles' } );
+	} );
+
+	it( 'registers null text for non-string children and clears on unmount', () => {
+		const setTitle = jest.fn();
+		const { unmount } = withContext(
+			<Title>
+				<em>Rich</em>
+			</Title>,
+			{ setTitle }
+		);
+		expect( setTitle ).toHaveBeenCalledWith( expect.objectContaining( { text: null } ) );
+		unmount();
+		expect( setTitle ).toHaveBeenLastCalledWith( null, expect.any( String ) );
+	} );
+} );
+
+describe( 'Drawer.CloseIcon', () => {
+	it( 'is named "Close" without a title and funnels clicks to requestClose', () => {
+		const requestClose = jest.fn();
+		withContext( <CloseIcon />, { requestClose } );
+		const button = screen.getByRole( 'button', { name: 'Close' } );
+		fireEvent.click( button );
+		expect( requestClose ).toHaveBeenCalled();
+	} );
+
+	it( 'composes the label with a string title', () => {
+		withContext( <CloseIcon />, { title: { id: 't', text: 'Edit Styles' } } );
+		expect( screen.getByRole( 'button', { name: 'Close Edit Styles' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'accepts a label override', () => {
+		withContext( <CloseIcon label="Dismiss panel" />, { title: { id: 't', text: 'Edit Styles' } } );
+		expect( screen.getByRole( 'button', { name: 'Dismiss panel' } ) ).toBeInTheDocument();
+	} );
+} );
+
+describe( 'Drawer.Content', () => {
+	const sectionOf = container => container.querySelector( '.newspack-drawer__content' );
+
+	// jest-dom's toHaveStyle is unreliable for custom properties in jsdom.
+	it( 'defaults to padding 6 on the 4px scale', () => {
+		const { container } = render( <Content>body</Content> );
+		expect( sectionOf( container ).style.getPropertyValue( '--newspack-drawer-content-padding' ) ).toBe( '24px' );
+	} );
+
+	it( 'accepts padding 0 for a flush section', () => {
+		const { container } = render( <Content padding={ 0 }>flush</Content> );
+		expect( sectionOf( container ).style.getPropertyValue( '--newspack-drawer-content-padding' ) ).toBe( '0px' );
+	} );
+
+	it( 'renders each section as a VStack', () => {
+		const { container } = render( <Content>stacked</Content> );
+		expect( sectionOf( container ) ).toHaveClass( 'newspack-drawer__content', 'components-v-stack' );
+	} );
+
+	// VStack emits its spacing as a `calc()` on the 4px base, not as pixels.
+	it( 'spaces its children by 16px, and by the gap prop', () => {
+		const { container, rerender } = render( <Content>stacked</Content> );
+		expect( window.getComputedStyle( sectionOf( container ) ).gap ).toBe( 'calc(4px * 4)' );
+
+		rerender( <Content gap={ 2 }>stacked</Content> );
+		expect( window.getComputedStyle( sectionOf( container ) ).gap ).toBe( 'calc(4px * 2)' );
+	} );
+
+	// VStack keeps only elements, so these would otherwise vanish without warning.
+	it( 'keeps plain text sitting beside an element', () => {
+		render(
+			<Content>
+				Lead text
+				<span>an element</span>
+				{ 42 }
+			</Content>
+		);
+		expect( screen.getByText( 'Lead text' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'an element' ) ).toBeInTheDocument();
+		expect( screen.getByText( '42' ) ).toBeInTheDocument();
+	} );
+
+	it( 'keeps a run of text and interpolations on one row', () => {
+		const { container } = render( <Content>Edited by { 'Ada' } just now</Content> );
+		const rows = sectionOf( container ).children;
+		expect( rows ).toHaveLength( 1 );
+		expect( rows[ 0 ] ).toHaveTextContent( 'Edited by Ada just now' );
+	} );
+
+	it( 'starts a new row either side of an element', () => {
+		const { container } = render(
+			<Content>
+				before
+				<span>middle</span>
+				after
+			</Content>
+		);
+		expect( Array.from( sectionOf( container ).children ).map( row => row.textContent ) ).toEqual( [ 'before', 'middle', 'after' ] );
+	} );
+
+	it( 'emits no row for whitespace or empty text between elements', () => {
+		const { container } = render(
+			<Content>
+				<span>one</span> { '' }
+				<span>two</span>
+			</Content>
+		);
+		expect( Array.from( sectionOf( container ).children ).map( row => row.textContent ) ).toEqual( [ 'one', 'two' ] );
+	} );
+
+	it( 'keeps a lone string', () => {
+		render( <Content>on its own</Content> );
+		expect( screen.getByText( 'on its own' ) ).toBeInTheDocument();
+	} );
+} );
+
+describe( 'Drawer.Divider', () => {
+	it( 'renders a separator, merging className', () => {
+		const { container } = render( <Divider className="custom" /> );
+		const divider = container.querySelector( 'hr' );
+		expect( divider ).toHaveClass( 'newspack-drawer__divider', 'custom' );
+		expect( screen.getByRole( 'separator' ) ).toBe( divider );
+	} );
+} );
+
+describe( 'Drawer.Footer', () => {
+	it( 'renders a container with its children', () => {
+		render( <Footer>actions</Footer> );
+		expect( screen.getByText( 'actions' ) ).toHaveClass( 'newspack-drawer__footer' );
+	} );
+
+	it( 'renders its actions as direct children', () => {
+		const { container } = render(
+			<Footer>
+				<Action>One</Action>
+				<Action>Two</Action>
+				<Action>Three</Action>
+			</Footer>
+		);
+		const footer = container.querySelector( '.newspack-drawer__footer' );
+		expect( Array.from( footer.children ) ).toEqual( [
+			screen.getByRole( 'button', { name: 'One' } ),
+			screen.getByRole( 'button', { name: 'Two' } ),
+			screen.getByRole( 'button', { name: 'Three' } ),
+		] );
+	} );
+} );
+
+describe( 'Drawer.Action', () => {
+	it( 'renders a button with aria-label from ariaLabel', () => {
+		render( <Action ariaLabel="Save styles">Save</Action> );
+		expect( screen.getByRole( 'button', { name: 'Save styles' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'warns when ariaLabel does not contain the visible label', () => {
+		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		render( <Action ariaLabel="Apply changes">Save</Action> );
+		expect( warn ).toHaveBeenCalledWith( expect.stringContaining( 'Label in Name' ) );
+		warn.mockRestore();
+	} );
+
+	it( 'does not warn when ariaLabel contains the visible label', () => {
+		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		render( <Action ariaLabel="Save styles">Save</Action> );
+		expect( warn ).not.toHaveBeenCalled();
+		warn.mockRestore();
+	} );
+
+	it( 'hands the click event to onClick', () => {
+		const onClick = jest.fn();
+		render( <Action onClick={ onClick }>Save</Action> );
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Save' } ) );
+		expect( onClick ).toHaveBeenCalledWith( expect.objectContaining( { type: 'click' } ) );
+	} );
+
+	it( 'forwards the button props', () => {
+		render(
+			<Action variant="primary" isBusy isDestructive disabled>
+				Save
+			</Action>
+		);
+		const button = screen.getByRole( 'button', { name: 'Save' } );
+		expect( button ).toHaveClass( 'is-primary', 'is-busy', 'is-destructive' );
+		expect( button ).toBeDisabled();
+	} );
+
+	it( 'forwards onClick', () => {
+		const onClick = jest.fn();
+		render( <Action onClick={ onClick }>Save</Action> );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Save' } ) );
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	// Button drops the href as soon as an onClick is present.
+	it( 'renders an anchor for an href-only action', () => {
+		render( <Action href="/somewhere">Go</Action> );
+		const link = screen.getByRole( 'link', { name: 'Go' } );
+		expect( link ).toHaveAttribute( 'href', '/somewhere' );
+	} );
+
+	// The types forbid this, but the package is consumed from plain JS.
+	it( 'stays a link and warns when href is combined with closes', () => {
+		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		const requestClose = jest.fn();
+		const onClick = jest.fn();
+		withContext(
+			<Action href="/somewhere" closes onClick={ onClick }>
+				Go
+			</Action>,
+			{ requestClose }
+		);
+
+		const link = screen.getByRole( 'link', { name: 'Go' } );
+		expect( link ).toHaveAttribute( 'href', '/somewhere' );
+		expect( warn ).toHaveBeenCalledWith( expect.stringContaining( 'cannot also take' ) );
+
+		fireEvent.click( link );
+		expect( onClick ).not.toHaveBeenCalled();
+		expect( requestClose ).not.toHaveBeenCalled();
+		warn.mockRestore();
+	} );
+
+	// An empty string still renders an anchor, so truthiness would re-arm the funnel.
+	it( 'treats an empty href as a link rather than re-arming the close funnel', () => {
+		const warn = jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+		const requestClose = jest.fn();
+		const onClick = jest.fn();
+		withContext(
+			<Action href="" closes onClick={ onClick }>
+				Go
+			</Action>,
+			{ requestClose }
+		);
+
+		const anchor = screen.getByText( 'Go' ).closest( 'a' );
+		expect( anchor ).toHaveAttribute( 'href', '' );
+		expect( warn ).toHaveBeenCalledWith( expect.stringContaining( 'cannot also take' ) );
+
+		fireEvent.click( anchor );
+		expect( onClick ).not.toHaveBeenCalled();
+		expect( requestClose ).not.toHaveBeenCalled();
+		warn.mockRestore();
+	} );
+
+	// No link, so the handlers must stay attached rather than leaving a dead anchor.
+	it( 'runs the handlers when a nullable href resolves to nothing', () => {
+		const requestClose = jest.fn();
+		const onClick = jest.fn();
+		withContext(
+			<Action href={ null } closes onClick={ onClick }>
+				Go
+			</Action>,
+			{ requestClose }
+		);
+
+		const button = screen.getByRole( 'button', { name: 'Go' } );
+		fireEvent.click( button );
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+		expect( requestClose ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'requests the drawer close after onClick when `closes` is set', () => {
+		const requestClose = jest.fn();
+		const onClick = jest.fn( () => expect( requestClose ).not.toHaveBeenCalled() );
+		withContext(
+			<Action closes onClick={ onClick }>
+				Cancel
+			</Action>,
+			{ requestClose }
+		);
+		fireEvent.click( screen.getByRole( 'button', { name: 'Cancel' } ) );
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+		expect( requestClose ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'does not request the close without `closes`', () => {
+		const requestClose = jest.fn();
+		withContext( <Action>Save</Action>, { requestClose } );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Save' } ) );
+		expect( requestClose ).not.toHaveBeenCalled();
+	} );
+} );