From 8e57b808b8c5c0d83e9498f7a42ade482bf79014 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 7 Feb 2022 17:34:43 -0800
Subject: [PATCH] Type Dialog with $$Props

---
 src/lib/components/dialog/Dialog.svelte       | 33 +++++++++++++++----
 .../components/dialog/DialogOverlay.svelte    | 19 +++++++++--
 src/lib/components/dialog/DialogTitle.svelte  | 19 +++++++++--
 3 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/dialog/Dialog.svelte b/src/lib/components/dialog/Dialog.svelte
index e0924ac..b4f5ecd 100644
--- a/src/lib/components/dialog/Dialog.svelte
+++ b/src/lib/components/dialog/Dialog.svelte
@@ -37,6 +37,16 @@
     }
     return context;
   }
+
+  type TDialogProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    open?: boolean;
+    initialFocus?: HTMLElement | null;
+    static?: boolean;
+    unmount?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -60,20 +70,29 @@
   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";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TDialogProps<typeof slotProps, TAsProp>;
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
+  export let open: boolean | undefined = undefined;
+  export let initialFocus: HTMLElement | null = null;
+
+  /***** Events *****/
   const forwardEvents = forwardEventsBuilder(get_current_component(), [
     "close",
   ]);
-  export let as: SupportedAs = "div";
-  export let use: HTMLActionArray = [];
-
-  export let open: Boolean | undefined = undefined;
-  export let initialFocus: HTMLElement | null = null;
-
   const dispatch = createEventDispatcher<{
     close: boolean;
   }>();
 
+  /***** Component *****/
   let containers: Set<HTMLElement> = new Set();
   let openClosedState = useOpenClosed();
 
diff --git a/src/lib/components/dialog/DialogOverlay.svelte b/src/lib/components/dialog/DialogOverlay.svelte
index 6712995..4374b23 100644
--- a/src/lib/components/dialog/DialogOverlay.svelte
+++ b/src/lib/components/dialog/DialogOverlay.svelte
@@ -1,3 +1,10 @@
+<script lang="ts" context="module">
+  type TDialogOverlayProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { DialogStates, useDialogContext } from "./Dialog.svelte";
   import { useId } from "$lib/hooks/use-id";
@@ -5,12 +12,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 = TDialogOverlayProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
+
   let api = useDialogContext("DialogOverlay");
   let id = `headlessui-dialog-overlay-${useId()}`;
 
diff --git a/src/lib/components/dialog/DialogTitle.svelte b/src/lib/components/dialog/DialogTitle.svelte
index 1eee489..f39a14b 100644
--- a/src/lib/components/dialog/DialogTitle.svelte
+++ b/src/lib/components/dialog/DialogTitle.svelte
@@ -1,3 +1,10 @@
+<script lang="ts" context="module">
+  type TDialogTitleProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { DialogStates, useDialogContext } from "./Dialog.svelte";
   import { useId } from "$lib/hooks/use-id";
@@ -6,11 +13,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 = TDialogTitleProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "h2";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useDialogContext("DialogTitle");
   let id = `headlessui-dialog-title-${useId()}`;