From 231775e60ba005824890fe8822a6c34e691a4e8e Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 7 Feb 2022 17:04:13 -0800
Subject: [PATCH] Type Listbox with $$Props

---
 src/lib/components/listbox/Listbox.svelte     | 32 ++++++++++++++-----
 .../components/listbox/ListboxButton.svelte   | 18 +++++++++--
 .../components/listbox/ListboxLabel.svelte    | 18 +++++++++--
 .../components/listbox/ListboxOption.svelte   | 23 +++++++++++--
 .../components/listbox/ListboxOptions.svelte  | 24 ++++++++++++--
 src/routes/listbox/_PeopleList.svelte         |  1 -
 .../listbox/listbox-with-pure-tailwind.svelte |  1 -
 7 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
index 0ca69ea..be192e4 100644
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -50,6 +50,14 @@
 
     return context;
   }
+  type TListboxProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    disabled?: boolean;
+    horizontal?: boolean;
+    value?: StateDefinition["value"];
+  };
 </script>
 
 <script lang="ts">
@@ -66,24 +74,32 @@
   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(), [
-    "change",
-  ]);
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
   export let disabled = false;
   export let horizontal = false;
   export let value: StateDefinition["value"];
-  $: orientation = (
-    horizontal ? "horizontal" : "vertical"
-  ) as StateDefinition["orientation"];
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "change",
+  ]);
 
   const dispatch = createEventDispatcher<{
     change: any;
   }>();
 
+  /***** Component *****/
+  $: orientation = (
+    horizontal ? "horizontal" : "vertical"
+  ) as StateDefinition["orientation"];
+
   let listboxState: StateDefinition["listboxState"] = ListboxStates.Closed;
   let labelRef: StateDefinition["labelRef"] = writable(null);
   let buttonRef: StateDefinition["buttonRef"] = writable(null);
diff --git a/src/lib/components/listbox/ListboxButton.svelte b/src/lib/components/listbox/ListboxButton.svelte
index c0db0e4..cd866bf 100644
--- a/src/lib/components/listbox/ListboxButton.svelte
+++ b/src/lib/components/listbox/ListboxButton.svelte
@@ -1,3 +1,10 @@
+<script lang="ts" context="module">
+  type TListboxButtonProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { tick } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
@@ -8,13 +15,20 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { get_current_component } from "svelte/internal";
-  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 = TListboxButtonProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "button";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useListboxContext("ListboxButton");
   let id = `headlessui-listbox-button-${useId()}`;
   let buttonRef = $api.buttonRef;
diff --git a/src/lib/components/listbox/ListboxLabel.svelte b/src/lib/components/listbox/ListboxLabel.svelte
index 91b22e6..6062f34 100644
--- a/src/lib/components/listbox/ListboxLabel.svelte
+++ b/src/lib/components/listbox/ListboxLabel.svelte
@@ -1,16 +1,30 @@
+<script lang="ts" context="module">
+  type TListboxLabelProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { get_current_component } from "svelte/internal";
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxLabelProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "label";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let id = `headlessui-listbox-label-${useId()}`;
   let api = useListboxContext("ListboxLabel");
 
diff --git a/src/lib/components/listbox/ListboxOption.svelte b/src/lib/components/listbox/ListboxOption.svelte
index e32f22a..06b9167 100644
--- a/src/lib/components/listbox/ListboxOption.svelte
+++ b/src/lib/components/listbox/ListboxOption.svelte
@@ -1,20 +1,37 @@
+<script lang="ts" context="module">
+  type TListboxOptionProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    value: unknown;
+    disabled?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { onDestroy, onMount, tick } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Focus } from "$lib/utils/calculate-active-index";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import type { SupportedAs } from "$lib/internal/elements";
   import { get_current_component } from "svelte/internal";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxOptionProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "li";
   export let use: HTMLActionArray = [];
-
   export let value: unknown;
   export let disabled = false;
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useListboxContext("ListboxOption");
   let id = `headlessui-listbox-option-${useId()}`;
 
diff --git a/src/lib/components/listbox/ListboxOptions.svelte b/src/lib/components/listbox/ListboxOptions.svelte
index f3b04a2..06878b1 100644
--- a/src/lib/components/listbox/ListboxOptions.svelte
+++ b/src/lib/components/listbox/ListboxOptions.svelte
@@ -1,3 +1,13 @@
+<script lang="ts" context="module">
+  type TListboxOptionsProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    unmount?: boolean;
+    static?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { tick } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
@@ -6,16 +16,26 @@
   import { Keys } from "$lib/utils/keyboard";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
-  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 type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { get_current_component } from "svelte/internal";
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxOptionsProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "ul";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useListboxContext("ListboxOptions");
   let id = `headlessui-listbox-options-${useId()}`;
   let optionsRef = $api.optionsRef;
diff --git a/src/routes/listbox/_PeopleList.svelte b/src/routes/listbox/_PeopleList.svelte
index cfe314e..f117a98 100644
--- a/src/routes/listbox/_PeopleList.svelte
+++ b/src/routes/listbox/_PeopleList.svelte
@@ -75,7 +75,6 @@
           >
             {#each people as name (name)}
               <ListboxOption
-                key={name}
                 value={name}
                 class={({ active }) => {
                   return classNames(
diff --git a/src/routes/listbox/listbox-with-pure-tailwind.svelte b/src/routes/listbox/listbox-with-pure-tailwind.svelte
index 60b68f2..ea2ddd8 100644
--- a/src/routes/listbox/listbox-with-pure-tailwind.svelte
+++ b/src/routes/listbox/listbox-with-pure-tailwind.svelte
@@ -74,7 +74,6 @@
             >
               {#each people as name (name)}
                 <ListboxOption
-                  key={name}
                   value={name}
                   class={({ active }) => {
                     return classNames(