in src/stories/ActionMenu.stories.tsx [160:229]
export function ComplexListStory(): JSX.Element {
const [option, setOption] = useState('Select an option')
const onAction = (itemProps: ItemProps) => {
setOption(itemProps.text || '')
}
return (
<>
<h1>Complex List</h1>
<h2>Last option activated: {option}</h2>
<ErsatzOverlay>
<ActionMenu
onAction={onAction}
anchorContent="Menu"
groupMetadata={[
{groupId: '0'},
{groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
{groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
{groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
{groupId: '4'}
]}
items={[
{leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
{leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
{
leadingVisual: SearchIcon,
text: 'repo:github/github',
groupId: '1',
renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
trailingVisual: () => (
<>
⌘S
<ArrowRightIcon />
</>
)
},
{
leadingVisual: SearchIcon,
text: 'repo:github/github',
groupId: '1',
renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
trailingText: '⌘S', // backward compatible
trailingIcon: ArrowRightIcon // backward compatible
},
{
leadingVisual: NoteIcon,
text: 'Table',
description: 'Information-dense table optimized for operations across teams',
descriptionVariant: 'block',
groupId: '2'
},
{
leadingVisual: ProjectIcon,
text: 'Board',
description: 'Kanban-style board focused on visual states',
descriptionVariant: 'block',
groupId: '2'
},
{
leadingVisual: FilterIcon,
text: 'Save sort and filters to current view',
groupId: '3'
},
{leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
{leadingVisual: GearIcon, text: 'View settings', groupId: '4'}
]}
/>
</ErsatzOverlay>
</>
)
}