@wordpress/components 32.6.0 → 33.0.0

package/src/menu/test/index.tsx

@@ -18,6 +18,14 @@ const delay = ( delayInMs: number ) => {
 	return new Promise( ( resolve ) => setTimeout( resolve, delayInMs ) );
 };
 
+const waitForFocusedMenu = () =>
+	waitFor( () => expect( screen.getByRole( 'menu' ) ).toHaveFocus() );
+
+const waitForFocusedMenuItem = ( name: string ) =>
+	waitFor( () =>
+		expect( screen.getByRole( 'menuitem', { name } ) ).toHaveFocus()
+	);
+
 // Open dropdown => open menu
 // Submenu trigger item => open submenu
 
@@ -114,7 +122,7 @@ describe( 'Menu', () => {
 			await click( toggleButton );
 
 			// Menu open, focus is on the menu wrapper
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 		} );
 
 		it( 'should open and focus the first item when pressing the arrow down key on the trigger', async () => {
@@ -145,9 +153,7 @@ describe( 'Menu', () => {
 
 			// Menu open, focus is on the first focusable item
 			// (disabled items are still focusable and accessible)
-			expect(
-				screen.getByRole( 'menuitem', { name: 'First item' } )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'First item' );
 		} );
 
 		it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
@@ -178,9 +184,7 @@ describe( 'Menu', () => {
 
 			// Menu open, focus is on the first focusable item
 			// (disabled items are still focusable and accessible
-			expect(
-				screen.getByRole( 'menuitem', { name: 'First item' } )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'First item' );
 		} );
 
 		it( 'should close when pressing the escape key', async () => {
@@ -201,7 +205,7 @@ describe( 'Menu', () => {
 
 			// Focuses menu on mouse click, focuses first item on keyboard press
 			// Can be changed with a custom useEffect
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			// Pressing esc will close the menu and move focus to the toggle
 			await press.Escape();
@@ -349,9 +353,7 @@ describe( 'Menu', () => {
 			);
 
 			// The menu is focused automatically when `defaultOpen` is set.
-			await waitFor( () =>
-				expect( screen.getByRole( 'menu' ) ).toHaveFocus()
-			);
+			await waitForFocusedMenu();
 
 			// Arrow up/down selects menu items
 			// The selection wraps around from last to first and viceversa
@@ -391,18 +393,13 @@ describe( 'Menu', () => {
 			).toHaveFocus();
 
 			// Arrow right/left can be used to enter/leave submenus
+			// (focus crosses menu contexts, so wait for it to settle)
 			await press.ArrowRight();
-			expect(
-				screen.getByRole( 'menuitem', {
-					name: 'Submenu item 1',
-				} )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'Submenu item 1' );
 
 			await press.ArrowDown();
 			expect(
-				screen.getByRole( 'menuitem', {
-					name: 'Submenu item 2',
-				} )
+				screen.getByRole( 'menuitem', { name: 'Submenu item 2' } )
 			).toHaveFocus();
 
 			await press.ArrowLeft();
@@ -414,11 +411,7 @@ describe( 'Menu', () => {
 
 			// Spacebar or enter key can also be used to enter a submenu
 			await press.Enter();
-			expect(
-				screen.getByRole( 'menuitem', {
-					name: 'Submenu item 1',
-				} )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'Submenu item 1' );
 
 			await press.ArrowLeft();
 			expect(
@@ -428,11 +421,7 @@ describe( 'Menu', () => {
 			).toHaveFocus();
 
 			await press.Space();
-			expect(
-				screen.getByRole( 'menuitem', {
-					name: 'Submenu item 1',
-				} )
-			).toHaveFocus();
+			await waitForFocusedMenuItem( 'Submenu item 1' );
 
 			await press.ArrowLeft();
 			expect(
@@ -886,7 +875,7 @@ describe( 'Menu', () => {
 			);
 
 			// Menu open, focus is on the menu wrapper
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			expect(
 				screen.queryByRole( 'button', {
@@ -916,18 +905,19 @@ describe( 'Menu', () => {
 			);
 
 			// Menu open, focus is on the menu wrapper
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			// Menu is not modal, therefore the outer button is part of the
 			// accessibility tree and can be found.
 			const outerButton = screen.getByRole( 'button', {
 				name: 'Button outside of dropdown',
 			} );
+			expect( outerButton ).toBeVisible();
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the Menu to close.
 			await press.Tab();
-			expect( outerButton ).toBeInTheDocument();
+			expect( outerButton ).toBeVisible();
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 		} );
 	} );
@@ -1068,7 +1058,7 @@ describe( 'Menu', () => {
 					name: 'Open dropdown',
 				} )
 			);
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			// Type "tw", it should match and focus the item with content "Two"
 			await type( 'tw' );
@@ -1104,7 +1094,7 @@ describe( 'Menu', () => {
 					name: 'Open dropdown',
 				} )
 			);
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitForFocusedMenu();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
 			await type( 'abc' );

package/src/menu-group/stories/index.story.tsx

@@ -16,6 +16,7 @@ import MenuItem from '../../menu-item';
 import MenuItemsChoice from '../../menu-items-choice';
 
 const meta: Meta< typeof MenuGroup > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Actions/MenuGroup',
 	component: MenuGroup,
 	id: 'components-menugroup',

package/src/menu-item/stories/index.story.tsx

@@ -16,6 +16,7 @@ import MenuItem from '..';
 import Shortcut from '../../shortcut';
 
 const meta: Meta< typeof MenuItem > = {
+	tags: [ 'manifest' ],
 	component: MenuItem,
 	title: 'Components/Actions/MenuItem',
 	id: 'components-menuitem',

package/src/menu-items-choice/stories/index.story.tsx

@@ -15,6 +15,7 @@ import MenuItemsChoice from '..';
 import MenuGroup from '../../menu-group';
 
 const meta: Meta< typeof MenuItemsChoice > = {
+	tags: [ 'manifest' ],
 	component: MenuItemsChoice,
 	title: 'Components/Actions/MenuItemsChoice',
 	id: 'components-menuitemschoice',

package/src/mobile/link-settings/index.native.js

@@ -32,7 +32,7 @@ import LinkRelIcon from './link-rel';
 
 import styles from './style.scss';
 
-const NEW_TAB_REL = 'noreferrer noopener';
+const NEW_TAB_REL = 'noopener';
 function LinkSettings( {
 	// Control link settings `BottomSheet` visibility
 	isVisible,

package/src/modal/stories/index.story.tsx

@@ -18,6 +18,7 @@ import Modal from '../';
 import type { ModalProps } from '../types';
 
 const meta: Meta< typeof Modal > = {
+	tags: [ 'manifest' ],
 	component: Modal,
 	title: 'Components/Overlays/Modal',
 	id: 'components-modal',

package/src/navigable-container/container.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { Component, forwardRef } from '@wordpress/element';
+import { forwardRef, useRef, useEffect, useCallback } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -28,163 +29,141 @@ function cycleValue( value: number, total: number, offset: number ) {
 	return nextValue;
 }
 
-class NavigableContainer extends Component< NavigableContainerProps > {
-	container?: HTMLDivElement;
-
-	constructor( args: NavigableContainerProps ) {
-		super( args );
-		this.onKeyDown = this.onKeyDown.bind( this );
-		this.bindContainer = this.bindContainer.bind( this );
-
-		this.getFocusableContext = this.getFocusableContext.bind( this );
-		this.getFocusableIndex = this.getFocusableIndex.bind( this );
-	}
-
-	componentDidMount() {
-		if ( ! this.container ) {
-			return;
-		}
-
-		// We use DOM event listeners instead of React event listeners
-		// because we want to catch events from the underlying DOM tree
-		// The React Tree can be different from the DOM tree when using
-		// portals. Block Toolbars for instance are rendered in a separate
-		// React Trees.
-		this.container.addEventListener( 'keydown', this.onKeyDown );
-	}
-
-	componentWillUnmount() {
-		if ( ! this.container ) {
-			return;
-		}
-
-		this.container.removeEventListener( 'keydown', this.onKeyDown );
-	}
-
-	bindContainer( ref: HTMLDivElement ) {
-		const { forwardedRef } = this.props;
-		this.container = ref;
+function UnforwardedNavigableContainer(
+	{
+		children,
+		stopNavigationEvents,
+		eventToOffset,
+		onNavigate = noop,
+		onKeyDown,
+		cycle = true,
+		onlyBrowserTabstops,
+		...restProps
+	}: NavigableContainerProps,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	const containerRef = useRef< HTMLDivElement | null >( null );
+
+	const getFocusableIndex = useCallback(
+		( focusables: Element[], target: Element ) => {
+			return focusables.indexOf( target );
+		},
+		[]
+	);
+
+	const getFocusableContext = useCallback(
+		( target: Element ) => {
+			if ( ! containerRef.current ) {
+				return null;
+			}
 
-		if ( typeof forwardedRef === 'function' ) {
-			forwardedRef( ref );
-		} else if ( forwardedRef && 'current' in forwardedRef ) {
-			forwardedRef.current = ref;
-		}
-	}
+			const finder = onlyBrowserTabstops
+				? focus.tabbable
+				: focus.focusable;
+			const focusables = finder.find( containerRef.current );
 
-	getFocusableContext( target: Element ) {
-		if ( ! this.container ) {
+			const index = getFocusableIndex( focusables, target );
+			if ( index > -1 && target ) {
+				return { index, target, focusables };
+			}
 			return null;
-		}
+		},
+		[ onlyBrowserTabstops, getFocusableIndex ]
+	);
 
-		const { onlyBrowserTabstops } = this.props;
-		const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;
-		const focusables = finder.find( this.container );
-
-		const index = this.getFocusableIndex( focusables, target );
-		if ( index > -1 && target ) {
-			return { index, target, focusables };
+	useEffect( () => {
+		const container = containerRef.current;
+		if ( ! container ) {
+			return;
 		}
-		return null;
-	}
 
-	getFocusableIndex( focusables: Element[], target: Element ) {
-		return focusables.indexOf( target );
-	}
-
-	onKeyDown( event: KeyboardEvent ) {
-		if ( this.props.onKeyDown ) {
-			this.props.onKeyDown( event );
-		}
+		function handleKeyDown( event: KeyboardEvent ) {
+			if ( onKeyDown ) {
+				onKeyDown( event );
+			}
 
-		const { getFocusableContext } = this;
-		const {
-			cycle = true,
-			eventToOffset,
-			onNavigate = noop,
-			stopNavigationEvents,
-		} = this.props;
-
-		const offset = eventToOffset( event );
-
-		// eventToOffset returns undefined if the event is not handled by the component.
-		if ( offset !== undefined && stopNavigationEvents ) {
-			// Prevents arrow key handlers bound to the document directly interfering.
-			event.stopImmediatePropagation();
-
-			// When navigating a collection of items, prevent scroll containers
-			// from scrolling. The preventDefault also prevents Voiceover from
-			// 'handling' the event, as voiceover will try to use arrow keys
-			// for highlighting text.
-			const targetRole = (
-				event.target as HTMLDivElement | null
-			 )?.getAttribute( 'role' );
-			const targetHasMenuItemRole =
-				!! targetRole && MENU_ITEM_ROLES.includes( targetRole );
-
-			if ( targetHasMenuItemRole ) {
-				event.preventDefault();
+			const offset = eventToOffset( event );
+
+			// eventToOffset returns undefined if the event is not handled by the component.
+			if ( offset !== undefined && stopNavigationEvents ) {
+				// Prevents arrow key handlers bound to the document directly interfering.
+				event.stopImmediatePropagation();
+
+				// When navigating a collection of items, prevent scroll containers
+				// from scrolling. The preventDefault also prevents Voiceover from
+				// 'handling' the event, as voiceover will try to use arrow keys
+				// for highlighting text.
+				const targetRole = (
+					event.target as HTMLDivElement | null
+				 )?.getAttribute( 'role' );
+				const targetHasMenuItemRole =
+					!! targetRole && MENU_ITEM_ROLES.includes( targetRole );
+
+				if ( targetHasMenuItemRole ) {
+					event.preventDefault();
+				}
 			}
-		}
 
-		if ( ! offset ) {
-			return;
-		}
+			if ( ! offset ) {
+				return;
+			}
 
-		const activeElement = ( event.target as HTMLElement | null )
-			?.ownerDocument?.activeElement;
-		if ( ! activeElement ) {
-			return;
-		}
+			const activeElement = ( event.target as HTMLElement | null )
+				?.ownerDocument?.activeElement;
+			if ( ! activeElement ) {
+				return;
+			}
 
-		const context = getFocusableContext( activeElement );
-		if ( ! context ) {
-			return;
-		}
+			const context = getFocusableContext( activeElement );
+			if ( ! context ) {
+				return;
+			}
 
-		const { index, focusables } = context;
-		const nextIndex = cycle
-			? cycleValue( index, focusables.length, offset )
-			: index + offset;
+			const { index, focusables } = context;
+			const nextIndex = cycle
+				? cycleValue( index, focusables.length, offset )
+				: index + offset;
 
-		if ( nextIndex >= 0 && nextIndex < focusables.length ) {
-			focusables[ nextIndex ].focus();
-			onNavigate( nextIndex, focusables[ nextIndex ] );
+			if ( nextIndex >= 0 && nextIndex < focusables.length ) {
+				focusables[ nextIndex ].focus();
+				onNavigate( nextIndex, focusables[ nextIndex ] as HTMLElement );
 
-			// `preventDefault()` on tab to avoid having the browser move the focus
-			// after this component has already moved it.
-			if ( event.code === 'Tab' ) {
-				event.preventDefault();
+				// `preventDefault()` on tab to avoid having the browser move the focus
+				// after this component has already moved it.
+				if ( event.code === 'Tab' ) {
+					event.preventDefault();
+				}
 			}
 		}
-	}
 
-	render() {
-		const {
-			children,
-			stopNavigationEvents,
-			eventToOffset,
-			onNavigate,
-			onKeyDown,
-			cycle,
-			onlyBrowserTabstops,
-			forwardedRef,
-			...restProps
-		} = this.props;
-		return (
-			<div ref={ this.bindContainer } { ...restProps }>
-				{ children }
-			</div>
-		);
-	}
+		// We use DOM event listeners instead of React event listeners
+		// because we want to catch events from the underlying DOM tree.
+		// The React Tree can be different from the DOM tree when using
+		// portals. Block Toolbars for instance are rendered in a separate
+		// React Trees.
+		container.addEventListener( 'keydown', handleKeyDown );
+		return () => {
+			container.removeEventListener( 'keydown', handleKeyDown );
+		};
+	}, [
+		onKeyDown,
+		eventToOffset,
+		stopNavigationEvents,
+		cycle,
+		onNavigate,
+		getFocusableContext,
+	] );
+
+	const mergedRef = useMergeRefs( [ containerRef, ref ] );
+
+	return (
+		<div ref={ mergedRef } { ...restProps }>
+			{ children }
+		</div>
+	);
 }
 
-const forwardedNavigableContainer = (
-	props: NavigableContainerProps,
-	ref: ForwardedRef< HTMLDivElement >
-) => {
-	return <NavigableContainer { ...props } forwardedRef={ ref } />;
-};
-forwardedNavigableContainer.displayName = 'NavigableContainer';
+const NavigableContainer = forwardRef( UnforwardedNavigableContainer );
+NavigableContainer.displayName = 'NavigableContainer';
 
-export default forwardRef( forwardedNavigableContainer );
+export default NavigableContainer;

package/src/navigable-container/test/navigable-menu.tsx

@@ -215,6 +215,30 @@ describe( 'NavigableMenu', () => {
 		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
 	} );
 
+	it( 'should keep forwarded callback refs stable across rerenders', () => {
+		const refSpy = jest.fn();
+
+		const { rerender } = render(
+			<NavigableMenu ref={ refSpy }>
+				<button>Item 1</button>
+			</NavigableMenu>
+		);
+
+		expect( refSpy ).toHaveBeenCalledTimes( 1 );
+		expect( refSpy ).toHaveBeenCalledWith( expect.any( HTMLElement ) );
+
+		rerender(
+			<NavigableMenu ref={ refSpy }>
+				<button>Item 1</button>
+			</NavigableMenu>
+		);
+
+		// With a stable merged ref (useMergeRefs), the callback ref should
+		// not be called again on rerender. Previously, an inline ref callback
+		// would cause React to detach (null) and reattach on every render.
+		expect( refSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+
 	it( 'skips its internal logic when the tab key is pressed', async () => {
 		const user = userEvent.setup();
 

package/src/navigable-container/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ForwardedRef, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -35,10 +35,6 @@ export type NavigableContainerProps = WordPressComponentProps<
 		 * Gets an offset, given an event.
 		 */
 		eventToOffset: ( event: KeyboardEvent ) => -1 | 0 | 1 | undefined;
-		/**
-		 * The forwarded ref.
-		 */
-		forwardedRef?: ForwardedRef< any >;
 		/**
 		 * Whether to only consider browser tab stops.
 		 *

package/src/navigation/stories/utils/more-examples.tsx

@@ -82,11 +82,12 @@ export const MoreExamplesStory: StoryFn< typeof Navigation > = ( {
 						title="WordPress.org"
 					/>
 					<NavigationItem item="item-5">
+						{ /* eslint-disable-next-line react/jsx-no-target-blank */ }
 						<a
 							className="navigation-story__wordpress-icon"
 							href="https://wordpress.org/"
 							target="_blank"
-							rel="noreferrer"
+							rel="noopener"
 						>
 							<Icon icon={ wordpress } />
 							<em>Custom Content</em>

package/src/navigator/stories/index.story.tsx

@@ -12,6 +12,7 @@ import { HStack } from '../../h-stack';
 import { Navigator, useNavigator } from '../';
 
 const meta: Meta< typeof Navigator > = {
+	tags: [ 'manifest' ],
 	component: Navigator,
 	subcomponents: {
 		Screen: Navigator.Screen,

package/src/notice/stories/index.story.tsx

@@ -18,6 +18,7 @@ import NoticeList from '../list';
 import type { NoticeListProps } from '../types';
 
 const meta: Meta< typeof Notice > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Notice',
 	id: 'components-notice',
 	component: Notice,

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -7,6 +7,7 @@ exports[`Notice should match snapshot 1`] = `
   >
     <div
       class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
+      data-visually-hidden=""
       data-wp-c16t="true"
       data-wp-component="VisuallyHidden"
       style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal; word-break: normal;"

package/src/number-control/stories/index.story.tsx

@@ -25,7 +25,7 @@ const meta: Meta< typeof NumberControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/panel/stories/index.story.tsx

@@ -17,6 +17,7 @@ import PanelBody from '../body';
 import InputControl from '../../input-control';
 
 const meta: Meta< typeof Panel > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Containers/Panel',
 	id: 'components-panel',
 	component: Panel,

package/src/popover/stories/index.story.tsx

@@ -33,6 +33,7 @@ const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
 ];
 
 const meta: Meta< typeof Popover > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Overlays/Popover',
 	id: 'components-popover',
 	component: Popover,

package/src/progress-bar/stories/index.story.tsx

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import { ProgressBar } from '..';
 
 const meta: Meta< typeof ProgressBar > = {
+	tags: [ 'manifest' ],
 	component: ProgressBar,
 	title: 'Components/Feedback/ProgressBar',
 	id: 'components-progressbar',

package/src/radio-control/stories/index.story.tsx

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import RadioControl from '..';
 
 const meta: Meta< typeof RadioControl > = {
+	tags: [ 'manifest' ],
 	component: RadioControl,
 	title: 'Components/Selection & Input/Common/RadioControl',
 	id: 'components-radiocontrol',

package/src/range-control/stories/index.story.tsx

@@ -18,6 +18,7 @@ import RangeControl from '..';
 const ICONS = { starEmpty, starFilled, styles, wordpress };
 
 const meta: Meta< typeof RangeControl > = {
+	tags: [ 'manifest' ],
 	component: RangeControl,
 	title: 'Components/Selection & Input/Common/RangeControl',
 	id: 'components-rangecontrol',

package/src/resizable-box/stories/index.story.tsx

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import ResizableBox from '..';
 
 const meta: Meta< typeof ResizableBox > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Utilities/ResizableBox',
 	id: 'components-resizablebox',
 	component: ResizableBox,