Add action forwarding and add to Menu

src/lib/components/menu/Menu.svelte

@@ -7,6 +7,7 @@
   import { writable, Writable } from "svelte/store";
   import { State } from "$lib/internal/open-closed";
   import { match } from "$lib/utils/match";
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
   export enum MenuStates {
     Open,
     Closed,
@@ -49,6 +50,7 @@
 </script>
 
 <script lang="ts">
+  export let use: ActionArray = [];
   let menuState: StateDefinition["menuState"] = MenuStates.Closed;
   let buttonStore: StateDefinition["buttonStore"] = writable(null);
   let itemsStore: StateDefinition["itemsStore"] = writable(null);
@@ -146,6 +148,6 @@
 </script>
 
 <svelte:window on:mousedown={handleWindowMousedown} />
-<div {...$$restProps}>
+<div use:useActions={use} {...$$restProps}>
   <slot />
 </div>

src/lib/components/menu/MenuButton.svelte

@@ -4,6 +4,8 @@
   import { Keys } from "$lib/utils/keyboard";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { tick } from "svelte";
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  export let use: ActionArray = [];
   export let disabled = false;
   const api = useMenuContext("MenuButton");
   const id = `headlessui-menu-button-${useId()}`;
@@ -73,6 +75,7 @@
 <button
   {...{ ...$$restProps, ...propsWeControl }}
   bind:this={$buttonStore}
+  use:useActions={use}
   on:click={handleClick}
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}

src/lib/components/menu/MenuItem.svelte

@@ -3,6 +3,8 @@
   import { useId } from "$lib/hooks/use-id";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { afterUpdate, onDestroy, onMount, tick } from "svelte";
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  export let use: ActionArray = [];
   export let disabled = false;
   const api = useMenuContext("MenuItem");
   const id = `headlessui-menu-item-${useId()}`;
@@ -68,6 +70,7 @@
 <div
   {...{ ...$$restProps, ...propsWeControl }}
   bind:this={elementRef}
+  use:useActions={use}
   on:click={handleClick}
   on:focus={handleFocus}
   on:pointermove={handleMove}

src/lib/components/menu/MenuItems.svelte

@@ -7,6 +7,8 @@
   import { State } from "$lib/internal/open-closed";
   import { getContext, tick } from "svelte";
   import type { Writable } from "svelte/store";
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  export let use: ActionArray = [];
   const api = useMenuContext("MenuButton");
   const id = `headlessui-menu-items-${useId()}`;
   let searchDebounce: ReturnType<typeof setTimeout> | null = null;
@@ -131,6 +133,7 @@
   <div
     {...{ ...$$restProps, ...propsWeControl }}
     bind:this={$itemsStore}
+    use:useActions={use}
     on:keydown={handleKeyDown}
     on:keyup={handleKeyUp}
   >