Passing context from ContextMenu.Trigger to ContextMenu.Content/Item

[pzcfg]

Describe the feature in detail (code, mocks, or screenshots encouraged)

I might be missing something obvious, but I couldn't figure out how to do this (if it's possible) from the docs:

I have a list of items that I would like to have a ContextMenu for, for example:

<script>
	import { ContextMenu } from "bits-ui";
</script>

<ContextMenu.Root>
	<!-- List of "things" -->
	<div class="list">
		<ContextMenu.Trigger>
			<div class="item">Thing 1</div>
		</ContextMenu.Trigger>
		<ContextMenu.Trigger>
			<div class="item">Thing 2</div>
		</ContextMenu.Trigger>
		<ContextMenu.Trigger>
			<div class="item">Thing 3</div>
		</ContextMenu.Trigger>
		<ContextMenu.Trigger>
			<div class="item">Thing 4</div>
		</ContextMenu.Trigger>
	</div>

	<!-- ContextMenu to take action on the things -->
	<ContextMenu.Content>
		<div class="menu">
			<ContextMenu.Item>
				<div class="menu item">Delete</div>
			</ContextMenu.Item>
			<ContextMenu.Item>
				<div class="menu item">Duplicate</div>
			</ContextMenu.Item>
		</div>
	</ContextMenu.Content>
</ContextMenu.Root>

<style type="text/css">
	.item:hover {
		background: rgba(128, 128, 128, 0.5)
	}
	.menu {
		background-color: black;
		border-radius: 5px;
	}
	.menu.item {
		padding: 5px;
	}
</style>

However, I can't seem to determine which of the items in the list triggered the context menu to show, or (ideally) how to pass custom data to the ContextMenu.Content or ContextMenu.Item so that it knows which "think" to be acting on.

It seems like one way to sort of work around this is to create a separate ContextMenu.Root and entire set of ContextMenu.Item for each thing, but that seems like a lot of extra elements are being created, and it also seems to allow multiple ContextMenus to be shown simultaneously, which is definitely not what I want.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[JYLN]

I think the best option would be to use the context menu in a custom component and just use your component for each item and pass the data you need for the trigger through a prop

[huntabyte]

I think the best option would be to use the context menu in a custom component and just use your component for each item and pass the data you need for the trigger through a prop

^ what @JYLN said. I'll usually do something like activeWhatever as a prop and handle it that way!

[pzcfg]

Is there a fix preventing the multiple context menus showing up that will be released soon?

I see that #563 says fixed in "next", but it looks like that is a more substantial longer term branch?

[pzcfg]

Any chance a fix for the multiple context menus can be released next week?

I like this library, but if not, I'm going to have to go with a different one. 🙁

[pzcfg]

Please 🙏