@wordpress/components 32.6.0 → 33.0.1-next.v.202604201441.0

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

@@ -21,6 +21,7 @@ import {
 import Button from '..';
 
 const meta: Meta< typeof Button > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Actions/Button',
 	id: 'components-button',
 	component: Button,

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

@@ -16,6 +16,7 @@ import { VStack } from '../../v-stack';
 import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof CheckboxControl > = {
+	tags: [ 'manifest' ],
 	component: CheckboxControl,
 	title: 'Components/Selection & Input/Common/CheckboxControl',
 	id: 'components-checkboxcontrol',

package/src/color-indicator/stories/index.story.tsx

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

package/src/color-palette/stories/index.story.tsx

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

package/src/color-picker/stories/index.story.tsx

@@ -10,6 +10,7 @@ import { fn } from 'storybook/test';
 import { ColorPicker } from '../component';
 
 const meta: Meta< typeof ColorPicker > = {
+	tags: [ 'manifest' ],
 	component: ColorPicker,
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',

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

@@ -35,6 +35,7 @@ const countries = [
 ];
 
 const meta: Meta< typeof ComboboxControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/ComboboxControl',
 	id: 'components-comboboxcontrol',
 	component: ComboboxControl,

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

@@ -16,6 +16,7 @@ import { Composite } from '..';
 import { Tooltip } from '../../tooltip';
 
 const meta: Meta< typeof Composite > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Utilities/Composite',
 	id: 'components-composite',
 	component: Composite,

package/src/confirm-dialog/stories/index.story.tsx

@@ -24,7 +24,7 @@ const meta: Meta< typeof ConfirmDialog > = {
 			control: false,
 		},
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onCancel: fn(),
 		onConfirm: fn(),

package/src/custom-select-control/stories/index.story.tsx

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

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

@@ -18,6 +18,7 @@ import TextareaControl from '../../textarea-control/';
 import { VStack } from '../../v-stack/';
 
 const meta: Meta< typeof Disabled > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Utilities/Disabled',
 	id: 'components-disabled',
 	component: Disabled,

package/src/drop-zone/stories/index.story.tsx

@@ -17,6 +17,7 @@ import DropZone from '..';
 const ICONS = { upload, media };
 
 const meta: Meta< typeof DropZone > = {
+	tags: [ 'manifest' ],
 	component: DropZone,
 	id: 'components-dropzone',
 	title: 'Components/Selection & Input/File Upload/DropZone',

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

@@ -14,6 +14,7 @@ import MenuItem from '../../menu-item';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
 const meta: Meta< typeof Dropdown > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Overlays/Dropdown',
 	id: 'components-dropdown',
 	component: Dropdown,

package/src/external-link/index.tsx

@@ -26,12 +26,7 @@ function UnforwardedExternalLink(
 	const { href, children, className, rel = '', ...additionalProps } = props;
 	const optimizedRel = [
 		...new Set(
-			[
-				...rel.split( ' ' ),
-				'external',
-				'noreferrer',
-				'noopener',
-			].filter( Boolean )
+			[ ...rel.split( ' ' ), 'external', 'noopener' ].filter( Boolean )
 		),
 	].join( ' ' );
 	const classes = clsx( 'components-external-link', className );

package/src/external-link/stories/index.story.tsx

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

package/src/form-file-upload/stories/index.story.tsx

@@ -14,6 +14,7 @@ import { upload as uploadIcon } from '@wordpress/icons';
 import FormFileUpload from '..';
 
 const meta: Meta< typeof FormFileUpload > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/File Upload/FormFileUpload',
 	id: 'components-formfileupload',
 	component: FormFileUpload,

package/src/form-toggle/stories/index.story.tsx

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

package/src/form-token-field/stories/index.story.tsx

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

package/src/gradient-picker/stories/index.story.tsx

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

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

@@ -16,6 +16,7 @@ import Icon from '..';
 import { VStack } from '../../v-stack';
 
 const meta: Meta< typeof Icon > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {

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

@@ -31,7 +31,7 @@ const meta: Meta< typeof InputControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: { disable: true } },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onChange: fn(),
 		onValidate: fn(),

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

@@ -19,7 +19,7 @@ const meta: Meta< typeof ItemGroup > = {
 		as: { control: false },
 		children: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/keyboard-shortcuts/stories/index.story.tsx

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

package/src/menu/styles.ts

@@ -114,6 +114,7 @@ export const Menu = styled( Ariakit.Menu )< Pick< ContextProps, 'variant' > >`
 
 const baseItem = css`
 	all: unset;
+	cursor: pointer;
 
 	position: relative;
 	min-height: ${ space( 8 ) };
@@ -157,7 +158,6 @@ const baseItem = css`
 
 	&[aria-disabled='true'] {
 		color: ${ COLORS.ui.textDisabled };
-		cursor: not-allowed;
 	}
 
 	/* Active item (including hover) */

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,