From f5130c6cc1db12a64e920b1a488eb4e82a3ae9e4 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Thu, 16 Dec 2021 16:35:09 -0800
Subject: [PATCH] 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        | 4 +++-
 src/lib/components/popover/PopoverButton.svelte  | 3 +++
 src/lib/components/popover/PopoverGroup.svelte   | 4 +++-
 src/lib/components/popover/PopoverOverlay.svelte | 5 ++++-
 src/lib/components/popover/PopoverPanel.svelte   | 9 ++++++++-
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/popover/Popover.svelte b/src/lib/components/popover/Popover.svelte
index e34f8b4..0f6e15d 100644
--- a/src/lib/components/popover/Popover.svelte
+++ b/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>
diff --git a/src/lib/components/popover/PopoverButton.svelte b/src/lib/components/popover/PopoverButton.svelte
index 9577f3c..1a4ad63 100644
--- a/src/lib/components/popover/PopoverButton.svelte
+++ b/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}
diff --git a/src/lib/components/popover/PopoverGroup.svelte b/src/lib/components/popover/PopoverGroup.svelte
index ee020d6..a8f94a0 100644
--- a/src/lib/components/popover/PopoverGroup.svelte
+++ b/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>
diff --git a/src/lib/components/popover/PopoverOverlay.svelte b/src/lib/components/popover/PopoverOverlay.svelte
index 64be7af..51318b4 100644
--- a/src/lib/components/popover/PopoverOverlay.svelte
+++ b/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}
diff --git a/src/lib/components/popover/PopoverPanel.svelte b/src/lib/components/popover/PopoverPanel.svelte
index a821a67..fb395ab 100644
--- a/src/lib/components/popover/PopoverPanel.svelte
+++ b/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}