@wordpress/components 32.5.2-next.v.202604091042.0 → 33.0.0

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/palette-edit/index.tsx

@@ -299,6 +299,7 @@ function PaletteEditListView< T extends PaletteElement >( {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
 	const elementsReferenceRef = useRef< T[] >( undefined );
 	useEffect( () => {
+		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 

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/index.tsx

@@ -67,6 +67,7 @@ export function RadioControl(
 		onChange,
 		onClick,
 		hideLabelFromVision,
+		disabled,
 		options = [],
 		id: preferredId,
 		...additionalProps
@@ -89,6 +90,7 @@ export function RadioControl(
 			id={ id }
 			role="radiogroup"
 			className={ clsx( className, 'components-radio-control' ) }
+			disabled={ disabled }
 			aria-describedby={ !! help ? generateHelpId( id ) : undefined }
 		>
 			{ hideLabelFromVision ? (

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/radio-control/style.scss

@@ -10,6 +10,7 @@
 
 	font-family: $default-font;
 	font-size: $default-font-size;
+
 }
 
 .components-radio-control__group-wrapper.has-help {
@@ -34,7 +35,10 @@
 	margin: 0;
 	padding: 0;
 	appearance: none;
-	cursor: pointer;
+
+	&:not(:disabled) {
+		cursor: var(--wpds-cursor-control);
+	}
 
 	&:focus {
 		@include button-style-outset__focus(var(--wp-admin-theme-color));
@@ -49,13 +53,28 @@
 			border-radius: $radius-round;
 		}
 	}
+
+	&:disabled {
+		background: $components-color-gray-100;
+		border: 1px solid $components-color-gray-300;
+		opacity: 1; // Override style from wp-admin forms.css.
+
+		&:checked::before {
+			border-color: $components-color-gray-400;
+			opacity: 1; // Override style from wp-admin forms.css.
+
+		}
+	}
 }
 
 .components-radio-control__label {
 	grid-column: 2;
 	grid-row: 1;
 
-	cursor: pointer;
+	.components-radio-control:not(:disabled) & {
+		cursor: var(--wpds-cursor-control);
+	}
+
 	line-height: $radio-input-size-sm;
 
 	@include break-small() {

package/src/radio-control/test/index.tsx

@@ -82,6 +82,16 @@ describe.each( [
 			).toBeVisible();
 		} );
 
+		it( 'should disable the radio group when `disabled` is true', () => {
+			render(
+				<Component { ...defaultProps } disabled onChange={ () => {} } />
+			);
+
+			expect(
+				screen.getByRole( 'radiogroup', { name: defaultProps.label } )
+			).toBeDisabled();
+		} );
+
 		it( 'should describe the radio group with the help text', () => {
 			const onChangeSpy = jest.fn();
 			render(

package/src/radio-control/types.ts

@@ -7,6 +7,12 @@ export type RadioControlProps = Pick<
 	BaseControlProps,
 	'label' | 'help' | 'hideLabelFromVision'
 > & {
+	/**
+	 * Whether the radio group should be disabled.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
 	/**
 	 * A function that receives the value of the new option that is being
 	 * selected as input.

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,

package/src/resizable-box/style.scss

@@ -1,7 +1,6 @@
 @use "sass:math";
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 @use "../utils/theme-variables" as *;
 
 $resize-handler-size: 15px;
@@ -15,7 +14,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	height: $resize-handler-container-size;
 
 	// Elevate the resize handle above the focus style.
-	z-index: z-index(".components-resizable-box__handle");
+	z-index: 2;
 
 	// Show the resize handle if set in props
 	.components-resizable-box__container.has-show-handle & {
@@ -26,7 +25,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 		position: relative;
 		width: 100%;
 		height: 100%;
-		z-index: z-index(".components-resizable-box__handle");
+		z-index: 2;
 		outline: none;
 	}
 }
@@ -77,11 +76,11 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 
 // Show corner handles on top of side handles so they can be used
 .components-resizable-box__side-handle {
-	z-index: z-index(".components-resizable-box__side-handle");
+	z-index: 2;
 }
 
 .components-resizable-box__corner-handle {
-	z-index: z-index(".components-resizable-box__corner-handle");
+	z-index: 2;
 }
 
 // Make horizontal side-handles full width