Clean up Listbox store/context usage

Fixes #9

src/lib/components/listbox/Listbox.svelte

@@ -15,9 +15,9 @@
     value: any;
     orientation: "vertical" | "horizontal";
 
-    labelRef: HTMLLabelElement | null;
-    buttonRef: HTMLButtonElement | null;
-    optionsRef: HTMLDivElement | null;
+    labelRef: Writable<HTMLLabelElement | null>;
+    buttonRef: Writable<HTMLButtonElement | null>;
+    optionsRef: Writable<HTMLElement | null>;
 
     disabled: boolean;
     options: { id: string; dataRef: ListboxOptionDataRef }[];
@@ -71,15 +71,9 @@
   const dispatch = createEventDispatcher();
 
   let listboxState = ListboxStates.Closed;
-  let labelStore = writable(null);
-  setContext("labelStore", labelStore);
-  $: labelRef = $labelStore;
-
-  let buttonRef: Writable<StateDefinition["buttonRef"]> = writable(null);
-  setContext("buttonStore", buttonRef);
-
-  let optionsRef: Writable<StateDefinition["optionsRef"]> = writable(null);
-  setContext("optionsStore", optionsRef);
+  let labelRef: StateDefinition["labelRef"] = writable(null);
+  let buttonRef: StateDefinition["buttonRef"] = writable(null);
+  let optionsRef: StateDefinition["optionsRef"] = writable(null);
 
   let options: StateDefinition["options"] = [];
   let searchQuery: StateDefinition["searchQuery"] = "";
@@ -87,10 +81,10 @@
 
   let api: Writable<StateDefinition> = writable({
     listboxState,
-    labelRef,
     value,
-    buttonRef: $buttonRef,
-    optionsRef: $optionsRef,
+    labelRef,
+    buttonRef,
+    optionsRef,
     options,
     searchQuery,
     activeOptionIndex,
@@ -190,10 +184,7 @@
     return {
       ...obj,
       listboxState,
-      labelRef,
       value,
-      buttonRef: $buttonRef,
-      optionsRef: $optionsRef,
       options,
       searchQuery,
       activeOptionIndex,

src/lib/components/listbox/ListboxButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getContext, tick } from "svelte";
+  import { tick } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Keys } from "$lib/utils/keyboard";
@@ -7,7 +7,8 @@
 
   let api = useListboxContext("ListboxButton");
   let id = `headlessui-listbox-button-${useId()}`;
-  let buttonStore: SvelteStore<HTMLButtonElement> = getContext("buttonStore");
+  let buttonRef = $api.buttonRef;
+  let optionsRef = $api.optionsRef;
 
   async function handleKeyDown(event: KeyboardEvent) {
     switch (event.key) {
@@ -18,7 +19,7 @@
         event.preventDefault();
         $api.openListbox();
         await tick();
-        $api.optionsRef?.focus({ preventScroll: true });
+        $optionsRef?.focus({ preventScroll: true });
         if (!$api.value) $api.goToOption(Focus.First);
         break;
 
@@ -26,7 +27,7 @@
         event.preventDefault();
         $api.openListbox();
         await tick();
-        $api.optionsRef?.focus({ preventScroll: true });
+        $optionsRef?.focus({ preventScroll: true });
         if (!$api.value) $api.goToOption(Focus.Last);
         break;
     }
@@ -48,20 +49,20 @@
     if ($api.listboxState === ListboxStates.Open) {
       $api.closeListbox();
       await tick();
-      $api.buttonRef?.focus({ preventScroll: true });
+      $buttonRef?.focus({ preventScroll: true });
     } else {
       event.preventDefault();
       $api.openListbox();
       await tick();
-      $api.optionsRef?.focus({ preventScroll: true });
+      $optionsRef?.focus({ preventScroll: true });
     }
   }
 
   $: propsWeControl = {
     id,
     "aria-haspopup": true,
-    "aria-controls": $api?.optionsRef?.id,
-    "aria-expanded": $api?.disabled
+    "aria-controls": $optionsRef?.id,
+    "aria-expanded": $api.disabled
       ? undefined
       : $api?.listboxState === ListboxStates.Open,
     "aria-labelledby": $api?.labelRef
@@ -74,7 +75,7 @@
 <button
   {...$$restProps}
   {...propsWeControl}
-  bind:this={$buttonStore}
+  bind:this={$buttonRef}
   on:click={handleClick}
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}

src/lib/components/listbox/ListboxLabel.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
-  let api = useListboxContext("ListboxLabel");
   let id = `headlessui-listbox-label-${useId()}`;
-  let labelStore: SvelteStore<HTMLLabelElement> = getContext("labelStore");
+  let api = useListboxContext("ListboxLabel");
 
-  function handleClick() {
-    $api.buttonRef?.focus({ preventScroll: true });
+  let labelRef = $api.labelRef;
+  let buttonRef = $api.buttonRef;
+
+  function handleClick(): void {
+    $buttonRef?.focus({ preventScroll: true });
   }
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label {...$$restProps} {id} bind:this={$labelStore} on:click={handleClick}>
+<label {...$$restProps} {id} bind:this={$labelRef} on:click={handleClick}>
   <slot
     open={$api.listboxState === ListboxStates.Open}
     disabled={$api.disabled}

src/lib/components/listbox/ListboxOption.svelte

@@ -8,6 +8,8 @@
   let api = useListboxContext("ListboxOption");
   let id = `headlessui-listbox-option-${useId()}`;
 
+  let buttonRef = $api.buttonRef;
+
   $: active =
     $api?.activeOptionIndex !== null
       ? $api?.options[$api.activeOptionIndex].id === id
@@ -62,7 +64,7 @@
     $api.select(value);
     $api.closeListbox();
     await tick();
-    $api.buttonRef?.focus({ preventScroll: true });
+    $buttonRef?.focus({ preventScroll: true });
   }
 
   function handleFocus() {

src/lib/components/listbox/ListboxOptions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getContext, tick } from "svelte";
+  import { tick } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { match } from "$lib/utils/match";
@@ -9,7 +9,9 @@
 
   let api = useListboxContext("ListboxOptions");
   let id = `headlessui-listbox-options-${useId()}`;
-  let optionsStore: SvelteStore<HTMLUListElement> = getContext("optionsStore");
+  let optionsRef = $api.optionsRef;
+  let buttonRef = $api.buttonRef;
+  let labelRef = $api.labelRef;
 
   let searchDebounce: ReturnType<typeof setTimeout> | null = null;
   async function handleKeyDown(event: KeyboardEvent) {
@@ -34,7 +36,7 @@
         }
         $api.closeListbox();
         await tick();
-        $api.buttonRef?.focus({ preventScroll: true });
+        $buttonRef?.focus({ preventScroll: true });
         break;
 
       case match($api.orientation, {
@@ -70,7 +72,7 @@
         event.stopPropagation();
         $api.closeListbox();
         await tick();
-        $api.buttonRef?.focus({ preventScroll: true });
+        $buttonRef?.focus({ preventScroll: true });
         break;
 
       case Keys.Tab:
@@ -92,7 +94,7 @@
       $api?.activeOptionIndex === null
         ? undefined
         : $api?.options[$api.activeOptionIndex]?.id,
-    "aria-labelledby": $api?.labelRef?.id ?? $api?.buttonRef?.id,
+    "aria-labelledby": $labelRef?.id ?? $buttonRef?.id,
     "aria-orientation": $api?.orientation,
     id,
     role: "listbox",
@@ -108,7 +110,7 @@
 
 {#if visible}
   <ul
-    bind:this={$optionsStore}
+    bind:this={$optionsRef}
     on:keydown={handleKeyDown}
     {...$$restProps}
     {...propsWeControl}