Switch Popover to <Render>

Also fix a bug where PopoverPanel was missing an id

src/lib/components/popover/Popover.svelte

@@ -52,9 +52,15 @@
   import { usePopoverGroupContext } from "./PopoverGroup.svelte";
   import { getContext, setContext, onMount } from "svelte";
   import { Readable, writable, Writable } from "svelte/store";
-  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use: ActionArray = [];
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
 
   const buttonId = `headlessui-popover-button-${useId()}`;
   const panelId = `headlessui-popover-panel-${useId()}`;
@@ -155,9 +161,20 @@
       $button?.focus();
     }
   }
+
+  $: slotProps = {
+    open: popoverState === PopoverStates.Open,
+    close: $api.close,
+  };
 </script>
 
 <svelte:window on:focus|capture={handleFocus} on:mousedown={handleMousedown} />
-<div use:useActions={use} {...$$restProps}>
+<Render
-  <slot open={popoverState === PopoverStates.Open} close={$api.close} />
+  {...$$restProps}
-</div>
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"Popover"}
+>
+  <slot {...slotProps} />
+</Render>

src/lib/components/popover/PopoverButton.svelte

@@ -9,8 +9,16 @@
   import { PopoverStates, usePopoverContext } from "./Popover.svelte";
   import { usePopoverGroupContext } from "./PopoverGroup.svelte";
   import { usePopoverPanelContext } from "./PopoverPanel.svelte";
-  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
-  export let use: ActionArray = [];
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  export let as: SupportedAs = "button";
+  export let use: HTMLActionArray = [];
+
   export let disabled: Boolean = false;
   let api = usePopoverContext("PopoverButton");
 
@@ -38,7 +46,8 @@
     activeElementRef = document.activeElement;
   }
 
-  function handleKeyDown(event: KeyboardEvent) {
+  function handleKeyDown(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     if (isWithinPanel) {
       if ($api.popoverState === PopoverStates.Closed) return;
       switch (event.key) {
@@ -106,7 +115,8 @@
       }
     }
   }
-  function handleKeyUp(event: KeyboardEvent) {
+  function handleKeyUp(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     if (isWithinPanel) return;
     if (event.key === Keys.Space) {
       // Required for firefox, event.preventDefault() in handleKeyDown for
@@ -163,18 +173,25 @@
         "aria-controls": $api.panel ? $api.panelId : undefined,
         disabled: disabled ? true : undefined,
       };
+
+  $: slotProps = {
+    open: $api.popoverState === PopoverStates.Open,
+  };
 </script>
 
 <svelte:window on:focus|capture={handleFocus} />
 
-<button
+<Render
   {...$$restProps}
   {...propsWeControl}
-  use:useActions={use}
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"PopoverButton"}
+  bind:el={$ourStore}
   on:click={handleClick}
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}
-  bind:this={$ourStore}
 >
-  <slot open={$api.popoverState === PopoverStates.Open} />
+  <slot {...slotProps} />
-</button>
+</Render>

src/lib/components/popover/PopoverGroup.svelte

@@ -15,8 +15,16 @@
 <script lang="ts">
   import type { PopoverRegisterBag } from "./Popover.svelte";
   import { getContext, setContext } from "svelte";
-  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
-  export let use: ActionArray = [];
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
+
   let groupRef: HTMLDivElement | undefined;
   let popovers: PopoverRegisterBag[] = [];
 
@@ -59,6 +67,12 @@
   });
 </script>
 
-<div use:useActions={use} {...$$restProps} bind:this={groupRef}>
+<Render
+  {...$$restProps}
+  {as}
+  use={[...use, forwardEvents]}
+  name={"PopoverGroup"}
+  bind:el={groupRef}
+>
   <slot />
-</div>
+</Render>

src/lib/components/popover/PopoverOverlay.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
-  import { ActionArray, useActions } from "$lib/hooks/use-actions";
-
   import { State, useOpenClosed } from "$lib/internal/open-closed";
   import { PopoverStates, usePopoverContext } from "./Popover.svelte";
-  export let use: ActionArray = [];
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
 
   let api = usePopoverContext("PopoverOverlay");
 
@@ -17,10 +23,20 @@
   function handleClick() {
     $api.closePopover();
   }
+
+  $: slotProps = { open: $api.popoverState === PopoverStates.Open };
 </script>
 
 {#if visible}
-  <div use:useActions={use} {...$$restProps} on:click={handleClick} aria-hidden>
+  <Render
-    <slot open={$api.popoverState === PopoverStates.Open} />
+    {...$$restProps}
-  </div>
+    {as}
+    {slotProps}
+    use={[...use, forwardEvents]}
+    name={"PopoverOverlay"}
+    on:click={handleClick}
+    aria-hidden
+  >
+    <slot {...slotProps} />
+  </Render>
 {/if}

src/lib/components/popover/PopoverPanel.svelte

@@ -24,8 +24,16 @@
     StateDefinition,
     usePopoverContext,
   } from "./Popover.svelte";
-  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
-  export let use: ActionArray = [];
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
+
   export let focus = false;
 
   let api = usePopoverContext("PopoverPanel");
@@ -102,7 +110,8 @@
     $api.closePopover();
   }
 
-  function handleKeydown(event: KeyboardEvent) {
+  function handleKeydown(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     switch (event.key) {
       case Keys.Escape:
         if ($api.popoverState !== PopoverStates.Open) return;
@@ -115,6 +124,11 @@
         break;
     }
   }
+
+  $: slotProps = {
+    open: $api.popoverState === PopoverStates.Open,
+    close: $api.close,
+  };
 </script>
 
 <svelte:window
@@ -122,12 +136,16 @@
   on:focus|capture={handleFocus}
 />
 {#if visible}
-  <div
+  <Render
-    use:useActions={use}
     {...$$restProps}
+    id={$api.panelId}
+    {as}
+    {slotProps}
+    use={[...use, forwardEvents]}
+    name={"PopoverPanel"}
+    bind:el={$panelStore}
     on:keydown={handleKeydown}
-    bind:this={$panelStore}
   >
-    <slot open={$api.popoverState === PopoverStates.Open} close={$api.close} />
+    <slot {...slotProps} />
-  </div>
+  </Render>
 {/if}