From 696b25eb95b7637217be9a285472131919840b56 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 7 Feb 2022 17:25:14 -0800
Subject: [PATCH] Type Disclosure with $$Props

---
 .../components/disclosure/Disclosure.svelte   | 20 ++++++++++++++---
 .../disclosure/DisclosureButton.svelte        | 22 ++++++++++++++++---
 .../disclosure/DisclosurePanel.svelte         | 21 ++++++++++++++++--
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/disclosure/Disclosure.svelte b/src/lib/components/disclosure/Disclosure.svelte
index b4e939a..b681cad 100644
--- a/src/lib/components/disclosure/Disclosure.svelte
+++ b/src/lib/components/disclosure/Disclosure.svelte
@@ -40,6 +40,13 @@
 
     return context;
   }
+
+  type TDisclosureProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    defaultOpen?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -50,13 +57,20 @@
   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 = TDisclosureProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
   export let defaultOpen = false;
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let buttonId = `headlessui-disclosure-button-${useId()}`;
   let panelId = `headlessui-disclosure-panel-${useId()}`;
 
diff --git a/src/lib/components/disclosure/DisclosureButton.svelte b/src/lib/components/disclosure/DisclosureButton.svelte
index d5df723..848d0ab 100644
--- a/src/lib/components/disclosure/DisclosureButton.svelte
+++ b/src/lib/components/disclosure/DisclosureButton.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+  type TDisclosureButtonProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    disabled?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
   import { usePanelContext } from "./DisclosurePanel.svelte";
@@ -6,15 +15,22 @@
   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 { writable } from "svelte/store";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TDisclosureButtonProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "button";
   export let use: HTMLActionArray = [];
-
   export let disabled = false;
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   const api = useDisclosureContext("DisclosureButton");
   const panelContext = usePanelContext();
 
diff --git a/src/lib/components/disclosure/DisclosurePanel.svelte b/src/lib/components/disclosure/DisclosurePanel.svelte
index 89e38e0..07beaa9 100644
--- a/src/lib/components/disclosure/DisclosurePanel.svelte
+++ b/src/lib/components/disclosure/DisclosurePanel.svelte
@@ -5,6 +5,13 @@
   export function usePanelContext(): string | undefined {
     return getContext(DISCLOSURE_PANEL_CONTEXT_NAME);
   }
+  type TDisclosurePanelProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    unmount?: boolean;
+    static?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -14,12 +21,22 @@
   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 = TDisclosurePanelProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   const api = useDisclosureContext("DisclosurePanel");
   let openClosedState = useOpenClosed();