/**
* External dependencies
*/
import type { StoryObj, Meta } from '@storybook/react-vite';
import { css } from '@emotion/react';
import { fn } from 'storybook/test';
/**
* WordPress dependencies
*/
import { customLink, formatCapitalize } from '@wordpress/icons';
import { useState, useMemo, useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import { useCx } from '../../utils';
import { Menu } from '..';
import Icon from '../../icon';
import Button from '../../button';
import Modal from '../../modal';
import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
import { ContextSystemProvider } from '../../context';
import type { Props } from '../types';
const meta: Meta< typeof Menu > = {
id: 'components-menu',
title: 'Components/Actions/Menu',
component: Menu,
subcomponents: {
Item: Menu.Item,
CheckboxItem: Menu.CheckboxItem,
Group: Menu.Group,
GroupLabel: Menu.GroupLabel,
Separator: Menu.Separator,
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
Context: Menu.Context,
RadioItem: Menu.RadioItem,
ItemLabel: Menu.ItemLabel,
ItemHelpText: Menu.ItemHelpText,
TriggerButton: Menu.TriggerButton,
SubmenuTriggerItem: Menu.SubmenuTriggerItem,
Popover: Menu.Popover,
},
args: {
onOpenChange: fn(),
},
argTypes: {
children: { control: false },
},
tags: [ 'status-private' ],
parameters: {
controls: { expanded: true },
docs: {
canvas: { sourceState: 'shown' },
source: { excludeDecorators: true },
},
componentStatus: {
status: 'stable',
whereUsed: 'global',
notes: 'When building for the Gutenberg repo, use this component instead of `DropdownMenu`. Otherwise, continue using `DropdownMenu` for now.',
},
},
};
export default meta;
export const Default: StoryObj< typeof Menu > = {
args: {
children: (
<>
}
>
Open menu
Label
Label
Help text
Label
The menu item help text is automatically truncated
when there are more than two lines of text
Label
This item doesn't close the menu on click
Disabled item
Group label
}
>
With prefix
With suffix
}
suffix="⌥⌘T"
>
Disabled with prefix and suffix
And help text
),
},
};
export const WithSubmenu: StoryObj< typeof Menu > = {
args: {
...Default.args,
children: (
<>
}
>
Open menu
Level 1 item
),
},
};
export const WithCheckboxes: StoryObj< typeof Menu > = {
render: function WithCheckboxes( props: 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 (
);
},
args: {
...Default.args,
},
};
export const WithRadios: StoryObj< typeof Menu > = {
render: function WithRadios( props: Props ) {
const [ radioValue, setRadioValue ] = useState( 'two' );
const onRadioChange: React.ComponentProps<
typeof Menu.RadioItem
>[ 'onChange' ] = ( e ) => setRadioValue( e.target.value );
return (
);
},
args: {
...Default.args,
},
};
const modalOnTopOfMenuPopover = css`
&& {
z-index: 1000000;
}
`;
export const WithModals: StoryObj< typeof Menu > = {
render: function WithModals( props: Props ) {
const [ isOuterModalOpen, setOuterModalOpen ] = useState( false );
const [ isInnerModalOpen, setInnerModalOpen ] = useState( false );
const cx = useCx();
const modalOverlayClassName = cx( modalOnTopOfMenuPopover );
return (
<>
{ isOuterModalOpen && (
setOuterModalOpen( false ) }
overlayClassName={ modalOverlayClassName }
>
Modal's contents
) }
);
},
args: {
...Default.args,
},
};
const ExampleSlotFill = createSlotFill( 'Example' );
const Slot = () => {
const menuContext = useContext( Menu.Context );
// Forwarding the content of the slot so that it can be used by the fill
const fillProps = useMemo(
() => ( {
forwardedContext: [
[ Menu.Context.Provider, { value: menuContext } ],
],
} ),
[ menuContext ]
);
return (
);
};
type ForwardedContextTuple< P = {} > = [
React.ComponentType< React.PropsWithChildren< P > >,
P,
];
const Fill = ( { children }: { children: React.ReactNode } ) => {
const innerMarkup = <>{ children };
return (
{ ( fillProps: { forwardedContext?: ForwardedContextTuple[] } ) => {
const { forwardedContext = [] } = fillProps;
return forwardedContext.reduce(
( inner: React.JSX.Element, [ Provider, props ] ) => (
{ inner }
),
innerMarkup
);
} }
);
};
export const WithSlotFill: StoryObj< typeof Menu > = {
render: ( props: Props ) => {
return (
Item from fill
);
},
args: {
...Default.args,
},
};
const toolbarVariantContextValue = {
Menu: {
variant: 'toolbar',
},
};
export const ToolbarVariant: StoryObj< typeof Menu > = {
render: ( props: Props ) => (
// TODO: add toolbar
),
args: {
...Default.args,
},
};
export const InsideModal: StoryObj< typeof Menu > = {
render: function InsideModal( props: Props ) {
const [ isModalOpen, setModalOpen ] = useState( false );
return (
<>
{ isModalOpen && (
setModalOpen( false ) }
title="Menu inside modal"
>
) }
);
},
args: {
...Default.args,
},
parameters: {
docs: {
source: { type: 'code' },
},
},
};