feat(context-menu): include clicked element in "open" event detail

COMPONENT_INDEX.md

@@ -796,12 +796,12 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| keydown    | forwarded  | --     |
-| open       | dispatched | --     |
-| close      | dispatched | --     |
+| Event name | Type       | Detail                   |
+| :--------- | :--------- | :----------------------- |
+| open       | dispatched | <code>HTMLElement</code> |
+| click      | forwarded  | --                       |
+| keydown    | forwarded  | --                       |
+| close      | dispatched | --                       |
 
 ## `ContextMenuDivider`
 

docs/src/COMPONENT_API.json

@@ -1867,9 +1867,9 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        { "type": "dispatched", "name": "open", "detail": "HTMLElement" },
         { "type": "forwarded", "name": "click", "element": "ul" },
         { "type": "forwarded", "name": "keydown", "element": "ul" },
-        { "type": "dispatched", "name": "open" },
         { "type": "dispatched", "name": "close" }
       ],
       "typedefs": [],

src/ContextMenu/ContextMenu.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {HTMLElement} open
+   */
+
   /**
    * Specify an element or list of elements to trigger the context menu.
    * If no element is specified, the context menu applies to the entire window
@@ -42,6 +46,7 @@
   let prevX = 0;
   let prevY = 0;
   let focusIndex = -1;
+  let openDetail = null;
 
   function close() {
     open = false;
@@ -75,6 +80,7 @@
     }
     position.set([x, y]);
     open = true;
+    openDetail = e.target;
   }
 
   $: if (target != null) {
@@ -119,7 +125,7 @@
         prevY = y;
       }
 
-      dispatch("open");
+      dispatch("open", openDetail);
     } else {
       dispatch("close");
     }

tests/ContextMenu.test.svelte

@@ -15,7 +15,7 @@
   $: console.log("selectedId", selectedId);
 </script>
 
-<ContextMenu>
+<ContextMenu open on:open="{(e) => console.log(e.detail)}">
   <ContextMenuOption
     kind="danger"
     indented

types/ContextMenu/ContextMenu.svelte.d.ts

@@ -39,9 +39,9 @@ export interface ContextMenuProps
 export default class ContextMenu extends SvelteComponentTyped<
   ContextMenuProps,
   {
+    open: CustomEvent<HTMLElement>;
     click: WindowEventMap["click"];
     keydown: WindowEventMap["keydown"];
-    open: CustomEvent<any>;
     close: CustomEvent<any>;
   },
   { default: {} }