Feat: Context menu trigger hook

[matthewgapp]

Closes #569

Problem

Currently, Kobalte's context menu implementation requires DOM-focused elements owned by the context menu as triggers. This becomes problematic when working with:

• Canvas elements with virtual interactive areas
• Components where the context menu shouldn't own the mount point of the trigger element
• Scenarios requiring programmatic context menu activation from arbitrary locations

Solution

This PR introduces a mechanism to control the context menu from outside its component hierarchy by:

• Exposing the trigger logic as a hook
• Providing a registration pattern to connect external triggers to context menus

The approach allows developers to:

• Trigger context menus from canvas-based interfaces
• Open menus programmatically from any component
• Maintain separation of concerns between UI elements and context menu behavior

For example, I use a component like this to expose the context to the parent outside of the root context menu JSX

export interface RegisterableTrigger<T extends HTMLElement> {
  register(props: ReturnType<typeof useContextMenuTrigger<T>>): void;
}

/**
 * Exposes a context menu trigger that can be dynamically registered with a context menu by passing up the context to the parent
 * via the register function.
 * @param props
 * @returns
 */
export const DynamicContextMenuTrigger = <T extends HTMLElement = HTMLElement>(
  props: UseContextMenuTriggerProps<T> & RegisterableTrigger<T>,
) => {
  const ctx = useContextMenuTrigger(props);

  createEffect(() => {
    props.register(ctx);
  });

  return null;
};

which is then used something like

// ctx can now be used outside of the component hierarchy. We can send events to it however we like 
let ctx; 

return (<ContextMenu> 
				<DynamicContextMenuTrigger register={c => (ctx = c)}/>
				...
			</ContextMenu>)

Describe alternatives you've considered

We could instead try and hoist all logic and nuance into a state hook above the root context menu node but that would couple all Menu and their child context components together. The solution above allows for us to leverage all existing nuance with minimal code changes.

[netlify]

👷 Deploy request for kobalte pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0169bcc