@wordpress/components 29.0.0 → 29.1.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { css } from '@emotion/react';
 
 /**
@@ -20,6 +20,7 @@ import Button from '../../button';
 import Modal from '../../modal';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { ContextSystemProvider } from '../../context';
+import type { MenuProps } from '../types';
 
 const meta: Meta< typeof Menu > = {
 	id: 'components-experimental-menu',
@@ -44,10 +45,15 @@ const meta: Meta< typeof Menu > = {
 		ItemLabel: Menu.ItemLabel,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		ItemHelpText: Menu.ItemHelpText,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		TriggerButton: Menu.TriggerButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		SubmenuTriggerItem: Menu.SubmenuTriggerItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Popover: Menu.Popover,
 	},
 	argTypes: {
 		children: { control: false },
-		trigger: { control: false },
 	},
 	tags: [ 'status-private' ],
 	parameters: {
@@ -61,259 +67,341 @@ const meta: Meta< typeof Menu > = {
 };
 export default meta;
 
-export const Default: StoryFn< typeof Menu > = ( props ) => (
-	<Menu { ...props }>
-		<Menu.Item>
-			<Menu.ItemLabel>Label</Menu.ItemLabel>
-		</Menu.Item>
-		<Menu.Item>
-			<Menu.ItemLabel>Label</Menu.ItemLabel>
-			<Menu.ItemHelpText>Help text</Menu.ItemHelpText>
-		</Menu.Item>
-		<Menu.Item>
-			<Menu.ItemLabel>Label</Menu.ItemLabel>
-			<Menu.ItemHelpText>
-				The menu item help text is automatically truncated when there
-				are more than two lines of text
-			</Menu.ItemHelpText>
-		</Menu.Item>
-		<Menu.Item hideOnClick={ false }>
-			<Menu.ItemLabel>Label</Menu.ItemLabel>
-			<Menu.ItemHelpText>
-				This item doesn&apos;t close the menu on click
-			</Menu.ItemHelpText>
-		</Menu.Item>
-		<Menu.Item disabled>Disabled item</Menu.Item>
-		<Menu.Separator />
-		<Menu.Group>
-			<Menu.GroupLabel>Group label</Menu.GroupLabel>
-			<Menu.Item prefix={ <Icon icon={ customLink } size={ 24 } /> }>
-				<Menu.ItemLabel>With prefix</Menu.ItemLabel>
-			</Menu.Item>
-			<Menu.Item suffix="⌘S">With suffix</Menu.Item>
-			<Menu.Item
-				disabled
-				prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }
-				suffix="⌥⌘T"
-			>
-				<Menu.ItemLabel>Disabled with prefix and suffix</Menu.ItemLabel>
-				<Menu.ItemHelpText>And help text</Menu.ItemHelpText>
-			</Menu.Item>
-		</Menu.Group>
-	</Menu>
-);
-Default.args = {
-	trigger: (
-		<Button __next40pxDefaultSize variant="secondary">
-			Open menu
-		</Button>
-	),
-};
-
-export const WithSubmenu: StoryFn< typeof Menu > = ( props ) => (
-	<Menu { ...props }>
-		<Menu.Item>Level 1 item</Menu.Item>
-		<Menu
-			trigger={
-				<Menu.Item suffix="Suffix">
-					<Menu.ItemLabel>
-						Submenu trigger item with a long label
-					</Menu.ItemLabel>
-				</Menu.Item>
-			}
-		>
-			<Menu.Item>
-				<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
-			</Menu.Item>
-			<Menu.Item>
-				<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
-			</Menu.Item>
-			<Menu
-				trigger={
+export const Default: StoryObj< typeof Menu > = {
+	args: {
+		children: (
+			<>
+				<Menu.TriggerButton
+					render={
+						<Button __next40pxDefaultSize variant="secondary" />
+					}
+				>
+					Open menu
+				</Menu.TriggerButton>
+				<Menu.Popover>
 					<Menu.Item>
-						<Menu.ItemLabel>Submenu trigger</Menu.ItemLabel>
+						<Menu.ItemLabel>Label</Menu.ItemLabel>
 					</Menu.Item>
-				}
-			>
-				<Menu.Item>
-					<Menu.ItemLabel>Level 3 item</Menu.ItemLabel>
-				</Menu.Item>
-				<Menu.Item>
-					<Menu.ItemLabel>Level 3 item</Menu.ItemLabel>
-				</Menu.Item>
-			</Menu>
-		</Menu>
-	</Menu>
-);
-WithSubmenu.args = {
-	...Default.args,
+					<Menu.Item>
+						<Menu.ItemLabel>Label</Menu.ItemLabel>
+						<Menu.ItemHelpText>Help text</Menu.ItemHelpText>
+					</Menu.Item>
+					<Menu.Item>
+						<Menu.ItemLabel>Label</Menu.ItemLabel>
+						<Menu.ItemHelpText>
+							The menu item help text is automatically truncated
+							when there are more than two lines of text
+						</Menu.ItemHelpText>
+					</Menu.Item>
+					<Menu.Item hideOnClick={ false }>
+						<Menu.ItemLabel>Label</Menu.ItemLabel>
+						<Menu.ItemHelpText>
+							This item doesn&apos;t close the menu on click
+						</Menu.ItemHelpText>
+					</Menu.Item>
+					<Menu.Item disabled>Disabled item</Menu.Item>
+					<Menu.Separator />
+					<Menu.Group>
+						<Menu.GroupLabel>Group label</Menu.GroupLabel>
+						<Menu.Item
+							prefix={ <Icon icon={ customLink } size={ 24 } /> }
+						>
+							<Menu.ItemLabel>With prefix</Menu.ItemLabel>
+						</Menu.Item>
+						<Menu.Item suffix="⌘S">With suffix</Menu.Item>
+						<Menu.Item
+							disabled
+							prefix={
+								<Icon icon={ formatCapitalize } size={ 24 } />
+							}
+							suffix="⌥⌘T"
+						>
+							<Menu.ItemLabel>
+								Disabled with prefix and suffix
+							</Menu.ItemLabel>
+							<Menu.ItemHelpText>And help text</Menu.ItemHelpText>
+						</Menu.Item>
+					</Menu.Group>
+				</Menu.Popover>
+			</>
+		),
+	},
 };
 
-export const WithCheckboxes: StoryFn< typeof Menu > = ( props ) => {
-	const [ isAChecked, setAChecked ] = useState( false );
-	const [ isBChecked, setBChecked ] = useState( true );
-	const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] = useState<
-		string[]
-	>( [ 'b' ] );
-
-	const onMultipleCheckboxesCheckedChange: React.ComponentProps<
-		typeof Menu.CheckboxItem
-	>[ 'onChange' ] = ( e ) => {
-		setMultipleCheckboxesValue( ( prevValues ) => {
-			if ( prevValues.includes( e.target.value ) ) {
-				return prevValues.filter( ( val ) => val !== e.target.value );
-			}
-			return [ ...prevValues, e.target.value ];
-		} );
-	};
-
-	return (
-		<Menu { ...props }>
-			<Menu.Group>
-				<Menu.GroupLabel>
-					Single selection, uncontrolled
-				</Menu.GroupLabel>
-				<Menu.CheckboxItem
-					name="checkbox-individual-uncontrolled-a"
-					value="a"
-					suffix="⌥⌘T"
-				>
-					<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
-				</Menu.CheckboxItem>
-				<Menu.CheckboxItem
-					name="checkbox-individual-uncontrolled-b"
-					value="b"
-					defaultChecked
-				>
-					<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
-				</Menu.CheckboxItem>
-			</Menu.Group>
-			<Menu.Separator />
-			<Menu.Group>
-				<Menu.GroupLabel>Single selection, controlled</Menu.GroupLabel>
-				<Menu.CheckboxItem
-					name="checkbox-individual-controlled-a"
-					value="a"
-					checked={ isAChecked }
-					onChange={ ( e ) => setAChecked( e.target.checked ) }
-				>
-					<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
-				</Menu.CheckboxItem>
-				<Menu.CheckboxItem
-					name="checkbox-individual-controlled-b"
-					value="b"
-					checked={ isBChecked }
-					onChange={ ( e ) => setBChecked( e.target.checked ) }
-				>
-					<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
-				</Menu.CheckboxItem>
-			</Menu.Group>
-			<Menu.Separator />
-			<Menu.Group>
-				<Menu.GroupLabel>
-					Multiple selection, uncontrolled
-				</Menu.GroupLabel>
-				<Menu.CheckboxItem
-					name="checkbox-multiple-uncontrolled"
-					value="a"
-				>
-					<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
-				</Menu.CheckboxItem>
-				<Menu.CheckboxItem
-					name="checkbox-multiple-uncontrolled"
-					value="b"
-					defaultChecked
-				>
-					<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
-				</Menu.CheckboxItem>
-			</Menu.Group>
-			<Menu.Separator />
-			<Menu.Group>
-				<Menu.GroupLabel>
-					Multiple selection, controlled
-				</Menu.GroupLabel>
-				<Menu.CheckboxItem
-					name="checkbox-multiple-controlled"
-					value="a"
-					checked={ multipleCheckboxesValue.includes( 'a' ) }
-					onChange={ onMultipleCheckboxesCheckedChange }
-				>
-					<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
-				</Menu.CheckboxItem>
-				<Menu.CheckboxItem
-					name="checkbox-multiple-controlled"
-					value="b"
-					checked={ multipleCheckboxesValue.includes( 'b' ) }
-					onChange={ onMultipleCheckboxesCheckedChange }
+export const WithSubmenu: StoryObj< typeof Menu > = {
+	args: {
+		...Default.args,
+		children: (
+			<>
+				<Menu.TriggerButton
+					render={
+						<Button __next40pxDefaultSize variant="secondary" />
+					}
 				>
-					<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
-				</Menu.CheckboxItem>
-			</Menu.Group>
-		</Menu>
-	);
-};
-WithCheckboxes.args = {
-	...Default.args,
+					Open menu
+				</Menu.TriggerButton>
+				<Menu.Popover>
+					<Menu.Item>Level 1 item</Menu.Item>
+					<Menu>
+						<Menu.SubmenuTriggerItem suffix="Suffix">
+							<Menu.ItemLabel>
+								Submenu trigger item with a long label
+							</Menu.ItemLabel>
+						</Menu.SubmenuTriggerItem>
+						<Menu.Popover>
+							<Menu.Item>
+								<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
+							</Menu.Item>
+							<Menu.Item>
+								<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
+							</Menu.Item>
+							<Menu>
+								<Menu.SubmenuTriggerItem>
+									<Menu.ItemLabel>
+										Submenu trigger
+									</Menu.ItemLabel>
+								</Menu.SubmenuTriggerItem>
+								<Menu.Popover>
+									<Menu.Item>
+										<Menu.ItemLabel>
+											Level 3 item
+										</Menu.ItemLabel>
+									</Menu.Item>
+									<Menu.Item>
+										<Menu.ItemLabel>
+											Level 3 item
+										</Menu.ItemLabel>
+									</Menu.Item>
+								</Menu.Popover>
+							</Menu>
+						</Menu.Popover>
+					</Menu>
+				</Menu.Popover>
+			</>
+		),
+	},
 };
 
-export const WithRadios: StoryFn< typeof Menu > = ( props ) => {
-	const [ radioValue, setRadioValue ] = useState( 'two' );
-	const onRadioChange: React.ComponentProps<
-		typeof Menu.RadioItem
-	>[ 'onChange' ] = ( e ) => setRadioValue( e.target.value );
+export const WithCheckboxes: StoryObj< typeof Menu > = {
+	render: function WithCheckboxes( props: MenuProps ) {
+		const [ isAChecked, setAChecked ] = useState( false );
+		const [ isBChecked, setBChecked ] = useState( true );
+		const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] =
+			useState< string[] >( [ 'b' ] );
 
-	return (
-		<Menu { ...props }>
-			<Menu.Group>
-				<Menu.GroupLabel>Uncontrolled</Menu.GroupLabel>
-				<Menu.RadioItem name="radio-uncontrolled" value="one">
-					<Menu.ItemLabel>Radio item 1</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
-				</Menu.RadioItem>
-				<Menu.RadioItem
-					name="radio-uncontrolled"
-					value="two"
-					defaultChecked
-				>
-					<Menu.ItemLabel>Radio item 2</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
-				</Menu.RadioItem>
-			</Menu.Group>
-			<Menu.Separator />
-			<Menu.Group>
-				<Menu.GroupLabel>Controlled</Menu.GroupLabel>
-				<Menu.RadioItem
-					name="radio-controlled"
-					value="one"
-					checked={ radioValue === 'one' }
-					onChange={ onRadioChange }
-				>
-					<Menu.ItemLabel>Radio item 1</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
-				</Menu.RadioItem>
-				<Menu.RadioItem
-					name="radio-controlled"
-					value="two"
-					checked={ radioValue === 'two' }
-					onChange={ onRadioChange }
+		const onMultipleCheckboxesCheckedChange: React.ComponentProps<
+			typeof Menu.CheckboxItem
+		>[ 'onChange' ] = ( e ) => {
+			setMultipleCheckboxesValue( ( prevValues ) => {
+				if ( prevValues.includes( e.target.value ) ) {
+					return prevValues.filter(
+						( val ) => val !== e.target.value
+					);
+				}
+				return [ ...prevValues, e.target.value ];
+			} );
+		};
+
+		return (
+			<Menu { ...props }>
+				<Menu.TriggerButton
+					render={
+						<Button __next40pxDefaultSize variant="secondary" />
+					}
 				>
-					<Menu.ItemLabel>Radio item 2</Menu.ItemLabel>
-					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
-				</Menu.RadioItem>
-			</Menu.Group>
-		</Menu>
-	);
+					Open menu
+				</Menu.TriggerButton>
+				<Menu.Popover>
+					<Menu.Group>
+						<Menu.GroupLabel>
+							Single selection, uncontrolled
+						</Menu.GroupLabel>
+						<Menu.CheckboxItem
+							name="checkbox-individual-uncontrolled-a"
+							value="a"
+							suffix="⌥⌘T"
+						>
+							<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially unchecked
+							</Menu.ItemHelpText>
+						</Menu.CheckboxItem>
+						<Menu.CheckboxItem
+							name="checkbox-individual-uncontrolled-b"
+							value="b"
+							defaultChecked
+						>
+							<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially checked
+							</Menu.ItemHelpText>
+						</Menu.CheckboxItem>
+					</Menu.Group>
+					<Menu.Separator />
+					<Menu.Group>
+						<Menu.GroupLabel>
+							Single selection, controlled
+						</Menu.GroupLabel>
+						<Menu.CheckboxItem
+							name="checkbox-individual-controlled-a"
+							value="a"
+							checked={ isAChecked }
+							onChange={ ( e ) => {
+								setAChecked( e.target.checked );
+							} }
+						>
+							<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially unchecked
+							</Menu.ItemHelpText>
+						</Menu.CheckboxItem>
+						<Menu.CheckboxItem
+							name="checkbox-individual-controlled-b"
+							value="b"
+							checked={ isBChecked }
+							onChange={ ( e ) =>
+								setBChecked( e.target.checked )
+							}
+						>
+							<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially checked
+							</Menu.ItemHelpText>
+						</Menu.CheckboxItem>
+					</Menu.Group>
+					<Menu.Separator />
+					<Menu.Group>
+						<Menu.GroupLabel>
+							Multiple selection, uncontrolled
+						</Menu.GroupLabel>
+						<Menu.CheckboxItem
+							name="checkbox-multiple-uncontrolled"
+							value="a"
+						>
+							<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially unchecked
+							</Menu.ItemHelpText>
+						</Menu.CheckboxItem>
+						<Menu.CheckboxItem
+							name="checkbox-multiple-uncontrolled"
+							value="b"
+							defaultChecked
+						>
+							<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially checked
+							</Menu.ItemHelpText>
+						</Menu.CheckboxItem>
+					</Menu.Group>
+					<Menu.Separator />
+					<Menu.Group>
+						<Menu.GroupLabel>
+							Multiple selection, controlled
+						</Menu.GroupLabel>
+						<Menu.CheckboxItem
+							name="checkbox-multiple-controlled"
+							value="a"
+							checked={ multipleCheckboxesValue.includes( 'a' ) }
+							onChange={ onMultipleCheckboxesCheckedChange }
+						>
+							<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially unchecked
+							</Menu.ItemHelpText>
+						</Menu.CheckboxItem>
+						<Menu.CheckboxItem
+							name="checkbox-multiple-controlled"
+							value="b"
+							checked={ multipleCheckboxesValue.includes( 'b' ) }
+							onChange={ onMultipleCheckboxesCheckedChange }
+						>
+							<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially checked
+							</Menu.ItemHelpText>
+						</Menu.CheckboxItem>
+					</Menu.Group>
+				</Menu.Popover>
+			</Menu>
+		);
+	},
+
+	args: {
+		...Default.args,
+	},
 };
-WithRadios.args = {
-	...Default.args,
+
+export const WithRadios: StoryObj< typeof Menu > = {
+	render: function WithRadios( props: MenuProps ) {
+		const [ radioValue, setRadioValue ] = useState( 'two' );
+		const onRadioChange: React.ComponentProps<
+			typeof Menu.RadioItem
+		>[ 'onChange' ] = ( e ) => setRadioValue( e.target.value );
+
+		return (
+			<Menu { ...props }>
+				<Menu.TriggerButton
+					render={
+						<Button __next40pxDefaultSize variant="secondary" />
+					}
+				>
+					Open menu
+				</Menu.TriggerButton>
+				<Menu.Popover>
+					<Menu.Group>
+						<Menu.GroupLabel>Uncontrolled</Menu.GroupLabel>
+						<Menu.RadioItem name="radio-uncontrolled" value="one">
+							<Menu.ItemLabel>Radio item 1</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially unchecked
+							</Menu.ItemHelpText>
+						</Menu.RadioItem>
+						<Menu.RadioItem
+							name="radio-uncontrolled"
+							value="two"
+							defaultChecked
+						>
+							<Menu.ItemLabel>Radio item 2</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially checked
+							</Menu.ItemHelpText>
+						</Menu.RadioItem>
+					</Menu.Group>
+					<Menu.Separator />
+					<Menu.Group>
+						<Menu.GroupLabel>Controlled</Menu.GroupLabel>
+						<Menu.RadioItem
+							name="radio-controlled"
+							value="one"
+							checked={ radioValue === 'one' }
+							onChange={ onRadioChange }
+						>
+							<Menu.ItemLabel>Radio item 1</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially unchecked
+							</Menu.ItemHelpText>
+						</Menu.RadioItem>
+						<Menu.RadioItem
+							name="radio-controlled"
+							value="two"
+							checked={ radioValue === 'two' }
+							onChange={ onRadioChange }
+						>
+							<Menu.ItemLabel>Radio item 2</Menu.ItemLabel>
+							<Menu.ItemHelpText>
+								Initially checked
+							</Menu.ItemHelpText>
+						</Menu.RadioItem>
+					</Menu.Group>
+				</Menu.Popover>
+			</Menu>
+		);
+	},
+
+	args: {
+		...Default.args,
+	},
 };
 
 const modalOnTopOfMenuPopover = css`
@@ -322,57 +410,72 @@ const modalOnTopOfMenuPopover = css`
 	}
 `;
 
-// For more examples with `Modal`, check https://ariakit.org/examples/menu-wordpress-modal
-export const WithModals: StoryFn< typeof Menu > = ( props ) => {
-	const [ isOuterModalOpen, setOuterModalOpen ] = useState( false );
-	const [ isInnerModalOpen, setInnerModalOpen ] = useState( false );
+export const WithModals: StoryObj< typeof Menu > = {
+	render: function WithModals( props: MenuProps ) {
+		const [ isOuterModalOpen, setOuterModalOpen ] = useState( false );
+		const [ isInnerModalOpen, setInnerModalOpen ] = useState( false );
 
-	const cx = useCx();
-	const modalOverlayClassName = cx( modalOnTopOfMenuPopover );
+		const cx = useCx();
+		const modalOverlayClassName = cx( modalOnTopOfMenuPopover );
 
-	return (
-		<>
-			<Menu { ...props }>
-				<Menu.Item
-					onClick={ () => setOuterModalOpen( true ) }
-					hideOnClick={ false }
-				>
-					<Menu.ItemLabel>Open outer modal</Menu.ItemLabel>
-				</Menu.Item>
-				<Menu.Item
-					onClick={ () => setInnerModalOpen( true ) }
-					hideOnClick={ false }
-				>
-					<Menu.ItemLabel>Open inner modal</Menu.ItemLabel>
-				</Menu.Item>
-				{ isInnerModalOpen && (
+		return (
+			<>
+				<Menu { ...props }>
+					<Menu.TriggerButton
+						render={
+							<Button __next40pxDefaultSize variant="secondary" />
+						}
+					>
+						Open menu
+					</Menu.TriggerButton>
+					<Menu.Popover>
+						<Menu.Item
+							onClick={ () => setOuterModalOpen( true ) }
+							hideOnClick={ false }
+						>
+							<Menu.ItemLabel>Open outer modal</Menu.ItemLabel>
+						</Menu.Item>
+						<Menu.Item
+							onClick={ () => setInnerModalOpen( true ) }
+							hideOnClick={ false }
+						>
+							<Menu.ItemLabel>Open inner modal</Menu.ItemLabel>
+						</Menu.Item>
+						{ isInnerModalOpen && (
+							<Modal
+								onRequestClose={ () =>
+									setInnerModalOpen( false )
+								}
+								overlayClassName={ modalOverlayClassName }
+							>
+								Modal&apos;s contents
+								<button
+									onClick={ () => setInnerModalOpen( false ) }
+								>
+									Close
+								</button>
+							</Modal>
+						) }
+					</Menu.Popover>
+				</Menu>
+				{ isOuterModalOpen && (
 					<Modal
-						onRequestClose={ () => setInnerModalOpen( false ) }
+						onRequestClose={ () => setOuterModalOpen( false ) }
 						overlayClassName={ modalOverlayClassName }
 					>
 						Modal&apos;s contents
-						<button onClick={ () => setInnerModalOpen( false ) }>
+						<button onClick={ () => setOuterModalOpen( false ) }>
 							Close
 						</button>
 					</Modal>
 				) }
-			</Menu>
-			{ isOuterModalOpen && (
-				<Modal
-					onRequestClose={ () => setOuterModalOpen( false ) }
-					overlayClassName={ modalOverlayClassName }
-				>
-					Modal&apos;s contents
-					<button onClick={ () => setOuterModalOpen( false ) }>
-						Close
-					</button>
-				</Modal>
-			) }
-		</>
-	);
-};
-WithModals.args = {
-	...Default.args,
+			</>
+		);
+	},
+
+	args: {
+		...Default.args,
+	},
 };
 
 const ExampleSlotFill = createSlotFill( 'Example' );
@@ -423,37 +526,50 @@ const Fill = ( { children }: { children: React.ReactNode } ) => {
 	);
 };
 
-export const WithSlotFill: StoryFn< typeof Menu > = ( props ) => {
-	return (
-		<SlotFillProvider>
-			<Menu { ...props }>
-				<Menu.Item>
-					<Menu.ItemLabel>Item</Menu.ItemLabel>
-				</Menu.Item>
-				<Slot />
-			</Menu>
-
-			<Fill>
-				<Menu.Item>
-					<Menu.ItemLabel>Item from fill</Menu.ItemLabel>
-				</Menu.Item>
-				<Menu
-					trigger={
+export const WithSlotFill: StoryObj< typeof Menu > = {
+	render: ( props: MenuProps ) => {
+		return (
+			<SlotFillProvider>
+				<Menu { ...props }>
+					<Menu.TriggerButton
+						render={
+							<Button __next40pxDefaultSize variant="secondary" />
+						}
+					>
+						Open menu
+					</Menu.TriggerButton>
+					<Menu.Popover>
 						<Menu.Item>
-							<Menu.ItemLabel>Submenu from fill</Menu.ItemLabel>
+							<Menu.ItemLabel>Item</Menu.ItemLabel>
 						</Menu.Item>
-					}
-				>
+						<Slot />
+					</Menu.Popover>
+				</Menu>
+
+				<Fill>
 					<Menu.Item>
-						<Menu.ItemLabel>Submenu item from fill</Menu.ItemLabel>
+						<Menu.ItemLabel>Item from fill</Menu.ItemLabel>
 					</Menu.Item>
-				</Menu>
-			</Fill>
-		</SlotFillProvider>
-	);
-};
-WithSlotFill.args = {
-	...Default.args,
+					<Menu>
+						<Menu.SubmenuTriggerItem>
+							<Menu.ItemLabel>Submenu from fill</Menu.ItemLabel>
+						</Menu.SubmenuTriggerItem>
+						<Menu.Popover>
+							<Menu.Item>
+								<Menu.ItemLabel>
+									Submenu item from fill
+								</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Popover>
+					</Menu>
+				</Fill>
+			</SlotFillProvider>
+		);
+	},
+
+	args: {
+		...Default.args,
+	},
 };
 
 const toolbarVariantContextValue = {
@@ -461,83 +577,119 @@ const toolbarVariantContextValue = {
 		variant: 'toolbar',
 	},
 };
-export const ToolbarVariant: StoryFn< typeof Menu > = ( props ) => (
-	// TODO: add toolbar
-	<ContextSystemProvider value={ toolbarVariantContextValue }>
-		<Menu { ...props }>
-			<Menu.Item>
-				<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
-			</Menu.Item>
-			<Menu.Item>
-				<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
-			</Menu.Item>
-			<Menu.Separator />
-			<Menu
-				trigger={
+
+export const ToolbarVariant: StoryObj< typeof Menu > = {
+	render: ( props: MenuProps ) => (
+		// TODO: add toolbar
+		<ContextSystemProvider value={ toolbarVariantContextValue }>
+			<Menu { ...props }>
+				<Menu.TriggerButton
+					render={
+						<Button __next40pxDefaultSize variant="secondary" />
+					}
+				>
+					Open menu
+				</Menu.TriggerButton>
+				<Menu.Popover>
 					<Menu.Item>
-						<Menu.ItemLabel>Submenu trigger</Menu.ItemLabel>
+						<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
 					</Menu.Item>
-				}
-			>
-				<Menu.Item>
-					<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
-				</Menu.Item>
+					<Menu.Item>
+						<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
+					</Menu.Item>
+					<Menu.Separator />
+					<Menu>
+						<Menu.SubmenuTriggerItem>
+							<Menu.ItemLabel>Submenu trigger</Menu.ItemLabel>
+						</Menu.SubmenuTriggerItem>
+						<Menu.Popover>
+							<Menu.Item>
+								<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Popover>
+					</Menu>
+				</Menu.Popover>
 			</Menu>
-		</Menu>
-	</ContextSystemProvider>
-);
-ToolbarVariant.args = {
-	...Default.args,
+		</ContextSystemProvider>
+	),
+
+	args: {
+		...Default.args,
+	},
 };
 
-export const InsideModal: StoryFn< typeof Menu > = ( props ) => {
-	const [ isModalOpen, setModalOpen ] = useState( false );
-	return (
-		<>
-			<Button
-				onClick={ () => setModalOpen( true ) }
-				__next40pxDefaultSize
-				variant="secondary"
-			>
-				Open modal
-			</Button>
-			{ isModalOpen && (
-				<Modal onRequestClose={ () => setModalOpen( false ) }>
-					<Menu { ...props }>
-						<Menu.Item>
-							<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
-						</Menu.Item>
-						<Menu.Item>
-							<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
-						</Menu.Item>
-						<Menu.Separator />
-						<Menu
-							trigger={
+export const InsideModal: StoryObj< typeof Menu > = {
+	render: function InsideModal( props: MenuProps ) {
+		const [ isModalOpen, setModalOpen ] = useState( false );
+		return (
+			<>
+				<Button
+					onClick={ () => setModalOpen( true ) }
+					__next40pxDefaultSize
+					variant="secondary"
+				>
+					Open modal
+				</Button>
+				{ isModalOpen && (
+					<Modal
+						onRequestClose={ () => setModalOpen( false ) }
+						title="Menu inside modal"
+					>
+						<Menu { ...props }>
+							<Menu.TriggerButton
+								render={
+									<Button
+										__next40pxDefaultSize
+										variant="secondary"
+									/>
+								}
+							>
+								Open menu
+							</Menu.TriggerButton>
+							<Menu.Popover>
 								<Menu.Item>
 									<Menu.ItemLabel>
-										Submenu trigger
+										Level 1 item
 									</Menu.ItemLabel>
 								</Menu.Item>
-							}
-						>
-							<Menu.Item>
-								<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
-							</Menu.Item>
+								<Menu.Item>
+									<Menu.ItemLabel>
+										Level 1 item
+									</Menu.ItemLabel>
+								</Menu.Item>
+								<Menu.Separator />
+								<Menu>
+									<Menu.SubmenuTriggerItem>
+										<Menu.ItemLabel>
+											Submenu trigger
+										</Menu.ItemLabel>
+									</Menu.SubmenuTriggerItem>
+									<Menu.Popover>
+										<Menu.Item>
+											<Menu.ItemLabel>
+												Level 2 item
+											</Menu.ItemLabel>
+										</Menu.Item>
+									</Menu.Popover>
+								</Menu>
+							</Menu.Popover>
 						</Menu>
-					</Menu>
-					<Button onClick={ () => setModalOpen( false ) }>
-						Close modal
-					</Button>
-				</Modal>
-			) }
-		</>
-	);
-};
-InsideModal.args = {
-	...Default.args,
-};
-InsideModal.parameters = {
-	docs: {
-		source: { type: 'code' },
+						<Button onClick={ () => setModalOpen( false ) }>
+							Close modal
+						</Button>
+					</Modal>
+				) }
+			</>
+		);
+	},
+
+	args: {
+		...Default.args,
+	},
+
+	parameters: {
+		docs: {
+			source: { type: 'code' },
+		},
 	},
 };