From 168f7f1e3d13b75e0be22d11bbb50e2a4be2ce44 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 7 Feb 2022 16:25:22 -0800
Subject: [PATCH] Type Menu with $$Props

---
 src/lib/components/menu/Menu.svelte       | 14 ++++++++++-
 src/lib/components/menu/MenuButton.svelte | 27 +++++++++++++++++----
 src/lib/components/menu/MenuItem.svelte   | 24 +++++++++++++++----
 src/lib/components/menu/MenuItems.svelte  | 29 ++++++++++++++++++++---
 4 files changed, 82 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
index 72b251a..0e6f9b2 100644
--- a/src/lib/components/menu/Menu.svelte
+++ b/src/lib/components/menu/Menu.svelte
@@ -12,7 +12,7 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
 
   export enum MenuStates {
     Open,
@@ -53,13 +53,25 @@
     }
     return context;
   }
+
+  type TMenuProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
 </script>
 
 <script lang="ts">
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TMenuProps<typeof slotProps, TAsProp>;
+
   export let use: HTMLActionArray = [];
   export let as: SupportedAs = "div";
+
+  /***** Events *****/
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
+  /***** Component *****/
   let menuState: StateDefinition["menuState"] = MenuStates.Closed;
   let buttonStore: StateDefinition["buttonStore"] = writable(null);
   let itemsStore: StateDefinition["itemsStore"] = writable(null);
diff --git a/src/lib/components/menu/MenuButton.svelte b/src/lib/components/menu/MenuButton.svelte
index f051f28..e5a26ab 100644
--- a/src/lib/components/menu/MenuButton.svelte
+++ b/src/lib/components/menu/MenuButton.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+  type TMenuButtonProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    disabled?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { useMenuContext, MenuStates } from "./Menu.svelte";
   import { useId } from "$lib/hooks/use-id";
@@ -5,16 +14,24 @@
   import { Focus } from "$lib/utils/calculate-active-index";
   import { tick } from "svelte";
   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 type { SupportedAs } from "$lib/internal/elements";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TMenuButtonProps<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 = useMenuContext("MenuButton");
   const id = `headlessui-menu-button-${useId()}`;
 
@@ -84,7 +101,9 @@
     "aria-expanded": disabled ? undefined : $api.menuState === MenuStates.Open,
   };
 
-  $: slotProps = { open: $api.menuState === MenuStates.Open };
+  $: slotProps = {
+    open: $api.menuState === MenuStates.Open,
+  };
 </script>
 
 <Render
diff --git a/src/lib/components/menu/MenuItem.svelte b/src/lib/components/menu/MenuItem.svelte
index 7e63bac..2304396 100644
--- a/src/lib/components/menu/MenuItem.svelte
+++ b/src/lib/components/menu/MenuItem.svelte
@@ -1,20 +1,36 @@
+<script lang="ts" context="module">
+  type TMenuItemProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import type { MenuItemData } from "./Menu.svelte";
   import { useMenuContext, MenuStates } from "./Menu.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { afterUpdate, onDestroy, onMount, tick } from "svelte";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
   import type { SupportedAs } from "$lib/internal/elements";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    { name: "click", shouldExclude: () => disabled },
-  ]);
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TMenuItemProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "a";
   export let use: HTMLActionArray = [];
   export let disabled = false;
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    { name: "click", shouldExclude: () => disabled },
+  ]);
+
+  /***** Component *****/
   const api = useMenuContext("MenuItem");
   const id = `headlessui-menu-item-${useId()}`;
 
diff --git a/src/lib/components/menu/MenuItems.svelte b/src/lib/components/menu/MenuItems.svelte
index d1eec7e..8699e33 100644
--- a/src/lib/components/menu/MenuItems.svelte
+++ b/src/lib/components/menu/MenuItems.svelte
@@ -1,3 +1,13 @@
+<script lang="ts" context="module">
+  type TMenuItemsProps<
+    TSlotProp extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProp, TAsProp> & {
+    static?: boolean;
+    unmount?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { useMenuContext, MenuStates } from "./Menu.svelte";
   import { useId } from "$lib/hooks/use-id";
@@ -8,13 +18,24 @@
   import { tick } from "svelte";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import type { SupportedAs } from "$lib/internal/elements";
-  import Render, { Features } from "$lib/utils/Render.svelte";
+  import Render, {
+    Features,
+    type TPassThroughProps,
+  } from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TMenuItemsProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   const api = useMenuContext("MenuItems");
   const id = `headlessui-menu-items-${useId()}`;
   let searchDebounce: ReturnType<typeof setTimeout> | null = null;
@@ -135,7 +156,9 @@
     role: "menu",
     tabIndex: 0,
   };
-  $: slotProps = { open: $api.menuState === MenuStates.Open };
+  $: slotProps = {
+    open: $api.menuState === MenuStates.Open,
+  };
 </script>
 
 <Render