From a193729ea9e85f9f71cb9d13da7aa12c69fe610c Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 7 Feb 2022 17:54:27 -0800
Subject: [PATCH] Type Popover with $$Props

---
 src/lib/components/popover/Popover.svelte     | 15 ++++++++++--
 .../components/popover/PopoverButton.svelte   | 22 ++++++++++++++---
 .../components/popover/PopoverGroup.svelte    | 22 +++++++++++++----
 .../components/popover/PopoverOverlay.svelte  | 21 ++++++++++++++--
 .../components/popover/PopoverPanel.svelte    | 24 ++++++++++++++++---
 5 files changed, 90 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/popover/Popover.svelte b/src/lib/components/popover/Popover.svelte
index 582a683..bcdfc88 100644
--- a/src/lib/components/popover/Popover.svelte
+++ b/src/lib/components/popover/Popover.svelte
@@ -39,6 +39,10 @@
     }
     return context;
   }
+  type TPopoverProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
 </script>
 
 <script lang="ts">
@@ -57,12 +61,19 @@
   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());
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TPopoverProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   const buttonId = `headlessui-popover-button-${useId()}`;
   const panelId = `headlessui-popover-panel-${useId()}`;
   let popoverState: StateDefinition["popoverState"] = PopoverStates.Closed;
diff --git a/src/lib/components/popover/PopoverButton.svelte b/src/lib/components/popover/PopoverButton.svelte
index 0e009f9..705a002 100644
--- a/src/lib/components/popover/PopoverButton.svelte
+++ b/src/lib/components/popover/PopoverButton.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+  type TPopoverButtonProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    disabled?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { Keys } from "$lib/utils/keyboard";
   import {
@@ -13,14 +22,21 @@
   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";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TPopoverButtonProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "button";
   export let use: HTMLActionArray = [];
+  export let disabled: boolean = false;
 
-  export let disabled: Boolean = false;
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = usePopoverContext("PopoverButton");
 
   let apiButton = $api.button;
diff --git a/src/lib/components/popover/PopoverGroup.svelte b/src/lib/components/popover/PopoverGroup.svelte
index d758916..6f560dd 100644
--- a/src/lib/components/popover/PopoverGroup.svelte
+++ b/src/lib/components/popover/PopoverGroup.svelte
@@ -10,6 +10,11 @@
   export function usePopoverGroupContext(): PopoverGroupContext | undefined {
     return getContext(POPOVER_GROUP_CONTEXT_NAME);
   }
+
+  type TPopoverGroupProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
 </script>
 
 <script lang="ts">
@@ -19,12 +24,19 @@
   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());
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TPopoverGroupProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let groupRef: HTMLDivElement | undefined;
   let popovers: PopoverRegisterBag[] = [];
 
@@ -65,15 +77,17 @@
     isFocusWithinPopoverGroup,
     closeOthers,
   });
+
+  $: slotProps = {};
 </script>
 
 <Render
   {...$$restProps}
   {as}
   use={[...use, forwardEvents]}
-  slotProps={{}}
+  {slotProps}
   name={"PopoverGroup"}
   bind:el={groupRef}
 >
-  <slot />
+  <slot {...slotProps} />
 </Render>
diff --git a/src/lib/components/popover/PopoverOverlay.svelte b/src/lib/components/popover/PopoverOverlay.svelte
index 2364fe1..f76dbad 100644
--- a/src/lib/components/popover/PopoverOverlay.svelte
+++ b/src/lib/components/popover/PopoverOverlay.svelte
@@ -1,3 +1,10 @@
+<script lang="ts" context="module">
+  type TPopoverOverlayProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { State, useOpenClosed } from "$lib/internal/open-closed";
   import { PopoverStates, usePopoverContext } from "./Popover.svelte";
@@ -5,13 +12,23 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { Features } from "$lib/utils/Render.svelte";
+  import Render, {
+    Features,
+    type TPassThroughProps,
+  } from "$lib/utils/Render.svelte";
   import { useId } from "$lib/hooks/use-id";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TPopoverOverlayProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = usePopoverContext("PopoverOverlay");
   let id = `headlessui-popover-overlay-${useId()}`;
 
diff --git a/src/lib/components/popover/PopoverPanel.svelte b/src/lib/components/popover/PopoverPanel.svelte
index 7c1e33d..23a938e 100644
--- a/src/lib/components/popover/PopoverPanel.svelte
+++ b/src/lib/components/popover/PopoverPanel.svelte
@@ -7,6 +7,15 @@
     | undefined {
     return getContext(POPOVER_PANEL_CONTEXT_NAME);
   }
+
+  type TPopoverPanelProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    focus?: boolean;
+    static?: boolean;
+    unmount?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -25,14 +34,23 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { Features } from "$lib/utils/Render.svelte";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  import Render, {
+    Features,
+    type TPassThroughProps,
+  } from "$lib/utils/Render.svelte";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TPopoverPanelProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
   export let focus = false;
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = usePopoverContext("PopoverPanel");
   setContext(POPOVER_PANEL_CONTEXT_NAME, $api.panelId);