Add use= support to Popover

Fixes #21

Not sure it's worth doing this component by component instead of figuring out <Render> first but w/e

src/lib/components/popover/Popover.svelte

@@ -52,6 +52,8 @@
   import type { PopoverGroupContext } from "./PopoverGroup.svelte";
   import { getContext, setContext, onMount } from "svelte";
   import { writable, Writable } from "svelte/store";
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  export let use: ActionArray = [];
   const buttonId = `headlessui-popover-button-${useId()}`;
   const panelId = `headlessui-popover-panel-${useId()}`;
 
@@ -164,6 +166,6 @@
 </script>
 
 <svelte:window on:focus|capture={handleFocus} on:mousedown={handleMousedown} />
-<div {...$$restProps}>
+<div use:useActions={use} {...$$restProps}>
   <slot open={popoverState === PopoverStates.Open} close={$api.close} />
 </div>

src/lib/components/popover/PopoverButton.svelte

@@ -10,6 +10,8 @@
   import { PopoverStates, usePopoverContext } from "./Popover.svelte";
   import { usePopoverGroupContext } from "./PopoverGroup.svelte";
   import { usePopoverPanelContext } from "./PopoverPanel.svelte";
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  export let use: ActionArray = [];
   let buttonStore: Writable<HTMLButtonElement> = getContext("PopoverButtonRef");
   export let disabled: Boolean = false;
   let api = usePopoverContext("PopoverButton");
@@ -166,6 +168,7 @@
 <button
   {...$$restProps}
   {...propsWeControl}
+  use:useActions={use}
   on:click={handleClick}
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}

src/lib/components/popover/PopoverGroup.svelte

@@ -15,6 +15,8 @@
 <script lang="ts">
   import type { PopoverRegisterBag } from "./Popover.svelte";
   import { getContext, setContext } from "svelte";
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  export let use: ActionArray = [];
   let groupRef: HTMLDivElement | undefined;
   let popovers: PopoverRegisterBag[] = [];
 
@@ -57,6 +59,6 @@
   });
 </script>
 
-<div {...$$restProps} bind:this={groupRef}>
+<div use:useActions={use} {...$$restProps} bind:this={groupRef}>
   <slot />
 </div>

src/lib/components/popover/PopoverOverlay.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+
   import { State } from "$lib/internal/open-closed";
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { PopoverStates, usePopoverContext } from "./Popover.svelte";
+  export let use: ActionArray = [];
 
   let api = usePopoverContext("PopoverOverlay");
 
@@ -19,7 +22,7 @@
 </script>
 
 {#if visible}
-  <div {...$$restProps} on:click={handleClick} aria-hidden>
+  <div use:useActions={use} {...$$restProps} on:click={handleClick} aria-hidden>
     <slot open={$api.popoverState === PopoverStates.Open} />
   </div>
 {/if}

src/lib/components/popover/PopoverPanel.svelte

@@ -25,6 +25,8 @@
     StateDefinition,
     usePopoverContext,
   } from "./Popover.svelte";
+  import { ActionArray, useActions } from "$lib/hooks/use-actions";
+  export let use: ActionArray = [];
   let panelStore: SvelteStore<HTMLDivElement> = getContext("PopoverPanelRef");
   export let focus = false;
 
@@ -119,7 +121,12 @@
   on:focus|capture={handleFocus}
 />
 {#if visible}
-  <div {...$$restProps} on:keydown={handleKeydown} bind:this={$panelStore}>
+  <div
+    use:useActions={use}
+    {...$$restProps}
+    on:keydown={handleKeydown}
+    bind:this={$panelStore}
+  >
     <slot open={$api.popoverState === PopoverStates.Open} close={$api.close} />
   </div>
 {/if}