From c5ed8708276fe7c0b3aa415764fe4e9aedfdaadc Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Fri, 17 Dec 2021 14:22:19 -0800
Subject: [PATCH] Assorted fixes

Type fixes, support a couple more classes as functions for the examples, and switch TabPanels to registering ids instead of refs
---
 src/lib/components/popover/PopoverPanel.svelte |  2 +-
 src/lib/components/switch/Switch.svelte        | 14 ++++++++++++--
 src/lib/components/switch/index.ts             |  4 ++--
 src/lib/components/tabs/Tab.svelte             | 15 ++++++++++++---
 src/lib/components/tabs/TabGroup.svelte        |  6 +++---
 src/lib/components/tabs/TabPanel.svelte        | 15 +++++++--------
 6 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/popover/PopoverPanel.svelte b/src/lib/components/popover/PopoverPanel.svelte
index 2904f3b..031512f 100644
--- a/src/lib/components/popover/PopoverPanel.svelte
+++ b/src/lib/components/popover/PopoverPanel.svelte
@@ -18,7 +18,7 @@
     FocusResult,
     focusIn,
   } from "$lib/utils/focus-management";
-  import { getContext, setContext, onMount } from "svelte";
+  import { getContext, setContext } from "svelte";
   import type { Writable } from "svelte/store";
   import {
     PopoverStates,
diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte
index 9089ca7..c3ef102 100644
--- a/src/lib/components/switch/Switch.svelte
+++ b/src/lib/components/switch/Switch.svelte
@@ -44,25 +44,35 @@
     "aria-labelledby": $labelContext?.labelIds,
     "aria-describedby": $descriptionContext?.descriptionIds,
   };
+
+  $: classStyle = $$props.class
+    ? typeof $$props.class === "function"
+      ? $$props.class({
+          checked,
+        })
+      : $$props.class
+    : "";
 </script>
 
 {#if switchStore}
   <button
     {...{ ...$$restProps, ...propsWeControl }}
     bind:this={$switchStore}
+    class={classStyle}
     on:click={handleClick}
     on:keyup={handleKeyUp}
     on:keypress={handleKeyPress}
   >
-    <slot />
+    <slot {checked} />
   </button>
 {:else}
   <button
     {...{ ...$$restProps, ...propsWeControl }}
+    class={classStyle}
     on:click={handleClick}
     on:keyup={handleKeyUp}
     on:keypress={handleKeyPress}
   >
-    <slot />
+    <slot {checked} />
   </button>
 {/if}
diff --git a/src/lib/components/switch/index.ts b/src/lib/components/switch/index.ts
index 19bdb6b..c99081e 100644
--- a/src/lib/components/switch/index.ts
+++ b/src/lib/components/switch/index.ts
@@ -1,4 +1,4 @@
 export { default as Switch } from "./Switch.svelte";
 export { default as SwitchGroup } from "./SwitchGroup.svelte";
-export { default as SwitchGroupLabel } from "../label/Label.svelte";
-export { default as SwitchGroupDescription } from "../description/Description.svelte";
+export { default as SwitchLabel } from "../label/Label.svelte";
+export { default as SwitchDescription } from "../description/Description.svelte";
diff --git a/src/lib/components/tabs/Tab.svelte b/src/lib/components/tabs/Tab.svelte
index 40b8340..2b0fa68 100644
--- a/src/lib/components/tabs/Tab.svelte
+++ b/src/lib/components/tabs/Tab.svelte
@@ -11,7 +11,7 @@
 
   let api = useTabsContext("Tab");
   let id = `headlessui-tabs-tab-${useId()}`;
-  let tabRef = null;
+  let tabRef: HTMLElement | null = null;
 
   onMount(() => {
     $api.registerTab(tabRef);
@@ -80,19 +80,28 @@
   $: propsWeControl = {
     id,
     role: "tab",
-    "aria-controls": $api.panels[myIndex]?.id,
+    "aria-controls": $api.panels[myIndex],
     "aria-selected": selected,
     tabIndex: selected ? 0 : -1,
     disabled: disabled ? true : undefined,
   };
+
+  $: classStyle = $$props.class
+    ? typeof $$props.class === "function"
+      ? $$props.class({
+          selected,
+        })
+      : $$props.class
+    : "";
 </script>
 
 <button
   {...{ ...$$restProps, ...propsWeControl }}
   bind:this={tabRef}
+  class={classStyle}
   on:keydown={handleKeyDown}
   on:click={handleSelection}
   on:focus={$api.activation === "manual" ? handleFocus : handleSelection}
 >
-  <slot />
+  <slot {selected} />
 </button>
diff --git a/src/lib/components/tabs/TabGroup.svelte b/src/lib/components/tabs/TabGroup.svelte
index 4344d29..d833928 100644
--- a/src/lib/components/tabs/TabGroup.svelte
+++ b/src/lib/components/tabs/TabGroup.svelte
@@ -15,14 +15,14 @@
     activation: "auto" | "manual";
 
     tabs: (HTMLElement | null)[];
-    panels: (HTMLElement | null)[];
+    panels: string[];
 
     // State mutators
     setSelectedIndex(index: number): void;
     registerTab(tab: HTMLElement | null): void;
     unregisterTab(tab: HTMLElement | null): void;
-    registerPanel(panel: HTMLElement | null): void;
-    unregisterPanel(panel: HTMLElement | null): void;
+    registerPanel(panel: string): void;
+    unregisterPanel(panel: string): void;
   };
 
   const TABS_CONTEXT_NAME = "TabsContext";
diff --git a/src/lib/components/tabs/TabPanel.svelte b/src/lib/components/tabs/TabPanel.svelte
index b2f37f2..e3b81b4 100644
--- a/src/lib/components/tabs/TabPanel.svelte
+++ b/src/lib/components/tabs/TabPanel.svelte
@@ -5,14 +5,13 @@
 
   let api = useTabsContext("TabPanel");
   let id = `headlessui-tabs-panel-${useId()}`;
-  let panelRef = null;
 
   onMount(() => {
-    $api.registerPanel(panelRef);
-    return () => $api.unregisterPanel(panelRef);
+    $api.registerPanel(id);
+    return () => $api.unregisterPanel(id);
   });
 
-  $: myIndex = $api.panels.indexOf(panelRef);
+  $: myIndex = $api.panels.indexOf(id);
   $: selected = myIndex === $api.selectedIndex;
 
   $: propsWeControl = {
@@ -23,8 +22,8 @@
   };
 </script>
 
-<div {...{ ...$$restProps, ...propsWeControl }} bind:this={panelRef}>
-  {#if selected}
+{#if selected}
+  <div {...{ ...$$restProps, ...propsWeControl }}>
     <slot />
-  {/if}
-</div>
+  </div>
+{/if}