@wordpress/components 25.6.1 → 25.8.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -10,9 +10,11 @@ import InputControl from '..';
 import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
 import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 
-const meta: ComponentMeta< typeof InputControl > = {
+const meta: Meta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: { type: null } },
@@ -29,7 +31,7 @@ const meta: ComponentMeta< typeof InputControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof InputControl > = ( args ) => (
+const Template: StoryFn< typeof InputControl > = ( args ) => (
 	<InputControl { ...args } />
 );
 

package/src/input-control/styles/input-control-styles.tsx

@@ -12,7 +12,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
-import { baseLabelTypography, COLORS, rtl } from '../../utils';
+import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
 import { space } from '../../ui/utils/space';
 
@@ -275,7 +275,7 @@ const backdropFocusedStyles = ( {
 	let outlineOffset;
 
 	if ( isFocused ) {
-		boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`;
+		boxShadow = CONFIG.controlBoxShadowFocus;
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline = `2px solid transparent`;
 		outlineOffset = `-2px`;

package/src/isolated-event-container/test/{index.js → index.tsx}

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import IsolatedEventContainer from '../';
+import IsolatedEventContainer from '..';
 
 describe( 'IsolatedEventContainer', () => {
 	it( 'should pass props to container', async () => {

package/src/item-group/item/component.tsx

@@ -29,7 +29,6 @@ function UnconnectedItem(
  * `Item` is used in combination with `ItemGroup` to display a list of items
  * grouped and styled together.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalItemGroup as ItemGroup,

package/src/item-group/item-group/component.tsx

@@ -44,7 +44,6 @@ function UnconnectedItemGroup(
 /**
  * `ItemGroup` displays a list of `Item`s grouped and styled together.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalItemGroup as ItemGroup,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -11,8 +11,10 @@ import { Item } from '../item/component';
 
 type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
 
-const meta: ComponentMeta< typeof ItemGroup > = {
+const meta: Meta< typeof ItemGroup > = {
 	component: ItemGroup,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Item },
 	title: 'Components (Experimental)/ItemGroup',
 	argTypes: {
 		as: { control: { type: null } },
@@ -29,11 +31,11 @@ const mapPropsToItem = ( props: ItemProps, index: number ) => (
 	<Item { ...props } key={ index } />
 );
 
-const Template: ComponentStory< typeof ItemGroup > = ( props ) => (
+const Template: StoryFn< typeof ItemGroup > = ( props ) => (
 	<ItemGroup { ...props } />
 );
 
-export const Default: ComponentStory< typeof ItemGroup > = Template.bind( {} );
+export const Default: StoryFn< typeof ItemGroup > = Template.bind( {} );
 Default.args = {
 	children: (
 		[
@@ -61,8 +63,9 @@ Default.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const NonClickableItems: ComponentStory< typeof ItemGroup > =
-	Template.bind( {} );
+export const NonClickableItems: StoryFn< typeof ItemGroup > = Template.bind(
+	{}
+);
 NonClickableItems.args = {
 	children: (
 		[
@@ -78,9 +81,7 @@ NonClickableItems.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const CustomItemSize: ComponentStory< typeof ItemGroup > = Template.bind(
-	{}
-);
+export const CustomItemSize: StoryFn< typeof ItemGroup > = Template.bind( {} );
 CustomItemSize.args = {
 	children: (
 		[
@@ -97,9 +98,7 @@ CustomItemSize.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const WithBorder: ComponentStory< typeof ItemGroup > = Template.bind(
-	{}
-);
+export const WithBorder: StoryFn< typeof ItemGroup > = Template.bind( {} );
 WithBorder.args = {
 	...Default.args,
 	isBordered: true,

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

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import KeyboardShortcuts from '..';
 
-const meta: ComponentMeta< typeof KeyboardShortcuts > = {
+const meta: Meta< typeof KeyboardShortcuts > = {
 	component: KeyboardShortcuts,
 	title: 'Components/KeyboardShortcuts',
 	parameters: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof KeyboardShortcuts > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof KeyboardShortcuts > = ( props ) => (
+const Template: StoryFn< typeof KeyboardShortcuts > = ( props ) => (
 	<KeyboardShortcuts { ...props } />
 );
 

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

@@ -13,9 +13,9 @@ import MenuItemsChoice from '../../menu-items-choice';
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
-const meta: ComponentMeta< typeof MenuGroup > = {
+const meta: Meta< typeof MenuGroup > = {
 	title: 'Components/MenuGroup',
 	component: MenuGroup,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof MenuGroup > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
+const Template: StoryFn< typeof MenuGroup > = ( args ) => {
 	return (
 		<MenuGroup { ...args }>
 			<MenuItem>Menu Item 1</MenuItem>
@@ -37,9 +37,9 @@ const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof MenuGroup > = Template.bind( {} );
+export const Default: StoryFn< typeof MenuGroup > = Template.bind( {} );
 
-const MultiGroupsTemplate: ComponentStory< typeof MenuGroup > = ( args ) => {
+const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 	const [ mode, setMode ] = useState( 'visual' );
 	const choices = [
 		{

package/src/menu-item/README.md

@@ -70,7 +70,7 @@ Determines where to display the provided `icon`.
 -   Type: `boolean`
 -   Required: No
 
-Whether or not the menu item is currently selected.
+Whether or not the menu item is currently selected. `isSelected` is only taken into account when the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`.
 
 ### `shortcut`
 

package/src/menu-item/index.tsx

@@ -18,7 +18,7 @@ import Icon from '../icon';
 import type { WordPressComponentProps } from '../ui/context';
 import type { MenuItemProps } from './types';
 
-export function MenuItem(
+function UnforwardedMenuItem(
 	props: WordPressComponentProps< MenuItemProps, 'button', false >,
 	ref: ForwardedRef< HTMLButtonElement >
 ) {
@@ -97,6 +97,7 @@ export function MenuItem(
  * 		<MenuItem
  * 			icon={ isActive ? 'yes' : 'no' }
  * 			isSelected={ isActive }
+ * 			role="menuitemcheckbox"
  * 			onClick={ () => setIsActive( ( state ) => ! state ) }
  * 		>
  * 			Toggle
@@ -105,4 +106,6 @@ export function MenuItem(
  * };
  * ```
  */
-export default forwardRef( MenuItem );
+export const MenuItem = forwardRef( UnforwardedMenuItem );
+
+export default MenuItem;

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

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { link, more, check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import MenuGroup from '../../menu-group';
+import MenuItem from '..';
+import Shortcut from '../../shortcut';
+
+const meta: Meta< typeof MenuItem > = {
+	component: MenuItem,
+	title: 'Components/MenuItem',
+	argTypes: {
+		children: { control: { type: null } },
+		icon: {
+			control: { type: 'select' },
+			options: [ 'check', 'link', 'more' ],
+			mapping: {
+				check,
+				link,
+				more,
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof MenuItem > = ( props ) => {
+	return (
+		<MenuGroup>
+			<MenuItem { ...props }>Menu Item 1</MenuItem>
+		</MenuGroup>
+	);
+};
+
+export const Default: StoryFn< typeof MenuItem > = Template.bind( {} );
+
+/**
+ * When the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`, the
+ * `isSelected` prop should be used so screen readers can tell which item is currently selected.
+ */
+export const IsSelected = Template.bind( {} );
+IsSelected.args = {
+	...Default.args,
+	isSelected: true,
+	role: 'menuitemcheckbox',
+};
+
+export const WithIcon = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	icon: link,
+	iconPosition: 'left',
+};
+
+export const WithInfo = Template.bind( {} );
+WithInfo.args = {
+	...Default.args,
+	info: 'Menu Item description',
+};
+
+export const WithSuffix = Template.bind( {} );
+WithSuffix.args = {
+	...Default.args,
+	suffix: <Shortcut shortcut="Ctrl+M"></Shortcut>,
+};

package/src/menu-item/types.ts

@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
  */
 import type { ButtonAsButtonProps } from '../button/types';
 
-export type MenuItemProps = ButtonAsButtonProps & {
+export type MenuItemProps = Pick< ButtonAsButtonProps, 'isDestructive' > & {
 	/**
 	 * A CSS `class` to give to the container element.
 	 */
@@ -33,7 +33,8 @@ export type MenuItemProps = ButtonAsButtonProps & {
 	 */
 	iconPosition?: ButtonAsButtonProps[ 'iconPosition' ];
 	/**
-	 * Whether or not the menu item is currently selected.
+	 * Whether or not the menu item is currently selected, `isSelected` is only taken into
+	 * account when the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`.
 	 */
 	isSelected?: boolean;
 	/**

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import MenuItemsChoice from '..';
 import MenuGroup from '../../menu-group';
 
-const meta: ComponentMeta< typeof MenuItemsChoice > = {
+const meta: Meta< typeof MenuItemsChoice > = {
 	component: MenuItemsChoice,
 	title: 'Components/MenuItemsChoice',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof MenuItemsChoice > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof MenuItemsChoice > = ( {
+const Template: StoryFn< typeof MenuItemsChoice > = ( {
 	onHover,
 	onSelect,
 	choices,
@@ -53,9 +53,7 @@ const Template: ComponentStory< typeof MenuItemsChoice > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof MenuItemsChoice > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof MenuItemsChoice > = Template.bind( {} );
 
 Default.args = {
 	choices: [

package/src/mobile/bottom-sheet/index.native.js

@@ -527,6 +527,7 @@ class BottomSheet extends Component {
 					panResponder.panHandlers.onMoveShouldSetResponderCapture
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
+				testID="bottom-sheet"
 				{ ...rest }
 			>
 				<KeyboardAvoidingView

package/src/mobile/global-styles-context/index.native.js

@@ -92,13 +92,12 @@ export const useGlobalStyles = () => {
 	return globalStyles;
 };
 
-export const withGlobalStyles = ( WrappedComponent ) => ( props ) =>
-	(
-		<GlobalStylesContext.Consumer>
-			{ ( globalStyles ) => (
-				<WrappedComponent { ...props } globalStyles={ globalStyles } />
-			) }
-		</GlobalStylesContext.Consumer>
-	);
+export const withGlobalStyles = ( WrappedComponent ) => ( props ) => (
+	<GlobalStylesContext.Consumer>
+		{ ( globalStyles ) => (
+			<WrappedComponent { ...props } globalStyles={ globalStyles } />
+		) }
+	</GlobalStylesContext.Consumer>
+);
 
 export default GlobalStylesContext;

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

@@ -23,7 +23,7 @@ function LinkSettingsNavigation( props ) {
 			isVisible={ props.isVisible }
 			onClose={ props.onClose }
 			onDismiss={ props.onDismiss }
-			testID={ props.testID }
+			testID="link-settings-navigation"
 			hideHeader
 			hasNavigation
 		>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import InputControl from '../../input-control';
 import Modal from '../';
 import type { ModalProps } from '../types';
 
-const meta: ComponentMeta< typeof Modal > = {
+const meta: Meta< typeof Modal > = {
 	component: Modal,
 	title: 'Components/Modal',
 	argTypes: {
@@ -46,10 +46,7 @@ const meta: ComponentMeta< typeof Modal > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Modal > = ( {
-	onRequestClose,
-	...args
-} ) => {
+const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
@@ -91,7 +88,7 @@ const Template: ComponentStory< typeof Modal > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof Modal > = Template.bind( {} );
+export const Default: StoryFn< typeof Modal > = Template.bind( {} );
 Default.args = {
 	title: 'Title',
 };
@@ -114,9 +111,7 @@ const LikeButton = () => {
 	);
 };
 
-export const WithHeaderActions: ComponentStory< typeof Modal > = Template.bind(
-	{}
-);
+export const WithHeaderActions: StoryFn< typeof Modal > = Template.bind( {} );
 WithHeaderActions.args = {
 	...Default.args,
 	headerActions: <LikeButton />,

package/src/modal/test/index.tsx

@@ -116,6 +116,113 @@ describe( 'Modal', () => {
 		expect( opener ).toHaveFocus();
 	} );
 
+	it( 'should request closing of any non nested modal when opened', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const DismissAdjacent = () => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<Modal onRequestClose={ onRequestClose }>
+						<button onClick={ () => setIsShown( true ) }>💥</button>
+					</Modal>
+					{ isShown && (
+						<Modal onRequestClose={ () => setIsShown( false ) }>
+							<p>Adjacent modal content</p>
+						</Modal>
+					) }
+				</>
+			);
+		};
+		render( <DismissAdjacent /> );
+
+		await user.click( screen.getByRole( 'button', { name: '💥' } ) );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
+
+	it( 'should support nested modals', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const NestSupport = () => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<Modal onRequestClose={ onRequestClose }>
+						<button onClick={ () => setIsShown( true ) }>🪆</button>
+						{ isShown && (
+							<Modal onRequestClose={ () => setIsShown( false ) }>
+								<p>Nested modal content</p>
+							</Modal>
+						) }
+					</Modal>
+				</>
+			);
+		};
+		render( <NestSupport /> );
+
+		await user.click( screen.getByRole( 'button', { name: '🪆' } ) );
+		expect( onRequestClose ).not.toHaveBeenCalled();
+	} );
+
+	// TODO enable once nested modals hide outer modals.
+	it.skip( 'should accessibly hide and show siblings including outer modals', async () => {
+		const user = userEvent.setup();
+
+		const AriaDemo = () => {
+			const [ isOuterShown, setIsOuterShown ] = useState( false );
+			const [ isInnerShown, setIsInnerShown ] = useState( false );
+			return (
+				<>
+					<button onClick={ () => setIsOuterShown( true ) }>
+						Start
+					</button>
+					{ isOuterShown && (
+						<Modal
+							onRequestClose={ () => setIsOuterShown( false ) }
+						>
+							<button onClick={ () => setIsInnerShown( true ) }>
+								Nest
+							</button>
+							{ isInnerShown && (
+								<Modal
+									onRequestClose={ () =>
+										setIsInnerShown( false )
+									}
+								>
+									<p>Nested modal content</p>
+								</Modal>
+							) }
+						</Modal>
+					) }
+				</>
+			);
+		};
+		const { container } = render( <AriaDemo /> );
+
+		// Opens outer modal > hides container.
+		await user.click( screen.getByRole( 'button', { name: 'Start' } ) );
+		expect( container ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Disable reason: No semantic query can reach the overlay.
+		// eslint-disable-next-line testing-library/no-node-access
+		const outer = screen.getByRole( 'dialog' ).parentElement!;
+
+		// Opens inner modal > hides outer modal.
+		await user.click( screen.getByRole( 'button', { name: 'Nest' } ) );
+		expect( outer ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Closes inner modal > Unhides outer modal and container stays hidden.
+		await user.keyboard( '[Escape]' );
+		expect( outer ).not.toHaveAttribute( 'aria-hidden' );
+		expect( container ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Closes outer modal > Unhides container.
+		await user.keyboard( '[Escape]' );
+		expect( container ).not.toHaveAttribute( 'aria-hidden' );
+	} );
+
 	it( 'should render `headerActions` React nodes', async () => {
 		render(
 			<Modal

package/src/navigable-container/stories/navigable-menu.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { NavigableMenu } from '..';
 
-const meta: ComponentMeta< typeof NavigableMenu > = {
+const meta: Meta< typeof NavigableMenu > = {
 	title: 'Components/NavigableMenu',
 	component: NavigableMenu,
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof NavigableMenu > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof NavigableMenu > = ( args ) => {
+export const Default: StoryFn< typeof NavigableMenu > = ( args ) => {
 	return (
 		<>
 			<button>Before navigable menu</button>

package/src/navigable-container/stories/tabbable-container.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { TabbableContainer } from '..';
 
-const meta: ComponentMeta< typeof TabbableContainer > = {
+const meta: Meta< typeof TabbableContainer > = {
 	title: 'Components/TabbableContainer',
 	component: TabbableContainer,
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof TabbableContainer > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof TabbableContainer > = ( args ) => {
+export const Default: StoryFn< typeof TabbableContainer > = ( args ) => {
 	return (
 		<>
 			<button>Before tabbable container</button>

package/src/navigation/index.tsx

@@ -28,7 +28,6 @@ const noop = () => {};
 /**
  * Render a navigation list with optional groupings and hierarchy.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalNavigation as Navigation,