Convert Menu to <Render>

src/lib/components/menu/Menu.svelte

@@ -7,7 +7,12 @@
   import { Readable, writable, Writable } from "svelte/store";
   import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   import { match } from "$lib/utils/match";
-  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import Render from "$lib/utils/Render.svelte";
+
   export enum MenuStates {
     Open,
     Closed,
@@ -50,7 +55,9 @@
 </script>
 
 <script lang="ts">
-  export let use: ActionArray = [];
+  export let use: HTMLActionArray = [];
+  export let as: SupportedAs = "div";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
   let menuState: StateDefinition["menuState"] = MenuStates.Closed;
   let buttonStore: StateDefinition["buttonStore"] = writable(null);
   let itemsStore: StateDefinition["itemsStore"] = writable(null);
@@ -158,6 +165,6 @@
 </script>
 
 <svelte:window on:mousedown={handleWindowMousedown} />
-<div use:useActions={use} {...$$restProps}>
+<Render {...$$restProps} use={[...use, forwardEvents]} {as} name={"Menu"}>
   <slot />
-</div>
+</Render>

src/lib/components/menu/MenuButton.svelte

@@ -4,15 +4,23 @@
   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 = [];
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let as: SupportedAs = "button";
+  export let use: HTMLActionArray = [];
+
   export let disabled = false;
   const api = useMenuContext("MenuButton");
   const id = `headlessui-menu-button-${useId()}`;
 
   $: buttonStore = $api.buttonStore;
   $: itemsStore = $api.itemsStore;
-  async function handleKeyDown(event: KeyboardEvent) {
+  async function handleKeyDown(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     switch (event.key) {
       // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
 
@@ -38,7 +46,8 @@
     }
   }
 
-  function handleKeyUp(event: KeyboardEvent) {
+  function handleKeyUp(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     switch (event.key) {
       case Keys.Space:
         // Required for firefox, event.preventDefault() in handleKeyDown for
@@ -49,7 +58,8 @@
     }
   }
 
-  async function handleClick(event: MouseEvent) {
+  async function handleClick(e: CustomEvent) {
+    let event = e as any as MouseEvent;
     if (disabled) return;
     if ($api.menuState === MenuStates.Open) {
       $api.closeMenu();
@@ -70,15 +80,20 @@
     "aria-controls": $itemsStore?.id,
     "aria-expanded": disabled ? undefined : $api.menuState === MenuStates.Open,
   };
+
+  $: slot = { open: $api.menuState === MenuStates.Open };
 </script>
 
-<button
+<Render
   {...{ ...$$restProps, ...propsWeControl }}
-  bind:this={$buttonStore}
-  use:useActions={use}
+  {as}
+  {slot}
+  use={[...use, forwardEvents]}
+  name={"MenuButton"}
+  bind:el={$buttonStore}
   on:click={handleClick}
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}
 >
-  <slot open={$api.menuState === MenuStates.Open} />
-</button>
+  <slot {...slot} />
+</Render>

src/lib/components/menu/MenuItem.svelte

@@ -3,8 +3,14 @@
   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 = [];
+  import Render from "$lib/utils/Render.svelte";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let as: SupportedAs = "a";
+  export let use: HTMLActionArray = [];
   export let disabled = false;
   const api = useMenuContext("MenuItem");
   const id = `headlessui-menu-item-${useId()}`;
@@ -16,7 +22,7 @@
 
   $: buttonStore = $api.buttonStore;
 
-  let elementRef: HTMLDivElement | undefined;
+  let elementRef: HTMLElement | undefined;
   $: textValue = elementRef?.textContent?.toLowerCase().trim();
   $: data = { disabled, textValue } as MenuItemData;
 
@@ -36,7 +42,7 @@
     elementRef?.scrollIntoView?.({ block: "nearest" });
   });
 
-  async function handleClick(event: MouseEvent) {
+  async function handleClick(event: CustomEvent) {
     if (disabled) return event.preventDefault();
     $api.closeMenu();
     $buttonStore?.focus({ preventScroll: true });
@@ -65,12 +71,17 @@
     tabIndex: disabled === true ? undefined : -1,
     "aria-disabled": disabled === true ? true : undefined,
   };
+
+  $: slot = { active, disabled };
 </script>
 
-<div
+<Render
   {...{ ...$$restProps, ...propsWeControl }}
-  bind:this={elementRef}
-  use:useActions={use}
+  use={[...use, forwardEvents]}
+  {as}
+  {slot}
+  name={"MenuItem"}
+  bind:el={elementRef}
   on:click={handleClick}
   on:focus={handleFocus}
   on:pointermove={handleMove}
@@ -78,5 +89,5 @@
   on:pointerleave={handleLeave}
   on:mouseleave={handleLeave}
 >
-  <slot {active} {disabled} />
-</div>
+  <slot {...slot} />
+</Render>

src/lib/components/menu/MenuItems.svelte

@@ -6,8 +6,15 @@
   import { treeWalker } from "$lib/hooks/use-tree-walker";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
   import { tick } from "svelte";
-  import { ActionArray, useActions } from "$lib/hooks/use-actions";
-  export let use: ActionArray = [];
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import Render from "$lib/utils/Render.svelte";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
   const api = useMenuContext("MenuButton");
   const id = `headlessui-menu-items-${useId()}`;
   let searchDebounce: ReturnType<typeof setTimeout> | null = null;
@@ -36,8 +43,9 @@
     },
   });
 
-  async function handleKeyDown(event: KeyboardEvent) {
+  async function handleKeyDown(e: CustomEvent) {
     if (searchDebounce) clearTimeout(searchDebounce);
+    let event = e as any as KeyboardEvent;
 
     switch (event.key) {
       // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
@@ -105,7 +113,8 @@
     }
   }
 
-  function handleKeyUp(event: KeyboardEvent) {
+  function handleKeyUp(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     switch (event.key) {
       case Keys.Space:
         // Required for firefox, event.preventDefault() in handleKeyDown for
@@ -126,16 +135,20 @@
     role: "menu",
     tabIndex: 0,
   };
+  $: slot = { open: $api.menuState === MenuStates.Open };
 </script>
 
 {#if visible}
-  <div
+  <Render
     {...{ ...$$restProps, ...propsWeControl }}
-    bind:this={$itemsStore}
-    use:useActions={use}
+    {as}
+    {slot}
+    use={[...use, forwardEvents]}
+    bind:el={$itemsStore}
+    name={"MenuItems"}
     on:keydown={handleKeyDown}
     on:keyup={handleKeyUp}
   >
-    <slot open={$api.menuState === MenuStates.Open} />
-  </div>
+    <slot {...slot} />
+  </Render>
 {/if}