@wordpress/components 25.6.0 → 25.7.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 } },
@@ -24,12 +26,12 @@ const meta: ComponentMeta< typeof InputControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
 
-const Template: ComponentStory< typeof InputControl > = ( args ) => (
+const Template: StoryFn< typeof InputControl > = ( args ) => (
 	<InputControl { ...args } />
 );
 

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 } },
@@ -20,7 +22,7 @@ const meta: ComponentMeta< typeof ItemGroup > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
@@ -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,24 +1,24 @@
 /**
  * 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: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 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: {
@@ -23,12 +23,12 @@ const meta: ComponentMeta< typeof MenuGroup > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 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: {
@@ -26,12 +26,12 @@ const meta: ComponentMeta< typeof MenuItemsChoice > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 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/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/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: {
@@ -19,12 +19,12 @@ const meta: ComponentMeta< typeof NavigableMenu > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 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: {
@@ -19,12 +19,12 @@ const meta: ComponentMeta< typeof TabbableContainer > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 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,

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

@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Navigation } from '..';
+import { NavigationBackButton } from '../back-button';
+import { NavigationGroup } from '../group';
+import { NavigationItem } from '../item';
+import { NavigationMenu } from '../menu';
 import { DefaultStory } from './utils/default';
 import { GroupStory } from './utils/group';
 import { ControlledStateStory } from './utils/controlled-state';
@@ -15,9 +19,19 @@ import { MoreExamplesStory } from './utils/more-examples';
 import { HideIfEmptyStory } from './utils/hide-if-empty';
 import './style.css';
 
-const meta: ComponentMeta< typeof Navigation > = {
+const meta: Meta< typeof Navigation > = {
 	title: 'Components (Experimental)/Navigation',
 	component: Navigation,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationBackButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationMenu,
+	},
 	argTypes: {
 		activeItem: { control: { type: null } },
 		activeMenu: { control: { type: null } },
@@ -29,7 +43,7 @@ const meta: ComponentMeta< typeof Navigation > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 

package/src/navigation/stories/utils/controlled-state.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const ControlledStateStory: ComponentStory< typeof Navigation > = ( {
+export const ControlledStateStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/default.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const DefaultStory: ComponentStory< typeof Navigation > = ( {
+export const DefaultStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/group.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 import { NavigationGroup } from '../../group';
 
-export const GroupStory: ComponentStory< typeof Navigation > = ( {
+export const GroupStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/hide-if-empty.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const HideIfEmptyStory: ComponentStory< typeof Navigation > = ( {
+export const HideIfEmptyStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import { NavigationGroup } from '../../group';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const MoreExamplesStory: ComponentStory< typeof Navigation > = ( {
+export const MoreExamplesStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {

package/src/navigation/stories/utils/search.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -29,7 +29,7 @@ const searchItems = [
 	{ item: 'waldo', title: 'Waldo' },
 ];
 
-export const SearchStory: ComponentStory< typeof Navigation > = ( {
+export const SearchStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {