From 4d47ba89a62550d58745ba99afb29e7fca42b6b4 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Sat, 18 Dec 2021 23:07:55 -0800
Subject: [PATCH] Clean up Listbox store/context usage

Fixes #9
---
 src/lib/components/listbox/Listbox.svelte     | 27 +++++++------------
 .../components/listbox/ListboxButton.svelte   | 19 ++++++-------
 .../components/listbox/ListboxLabel.svelte    | 13 ++++-----
 .../components/listbox/ListboxOption.svelte   |  4 ++-
 .../components/listbox/ListboxOptions.svelte  | 14 +++++-----
 5 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
index feabe66..2c7053b 100644
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/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,
diff --git a/src/lib/components/listbox/ListboxButton.svelte b/src/lib/components/listbox/ListboxButton.svelte
index 0cf6c28..78b7cda 100644
--- a/src/lib/components/listbox/ListboxButton.svelte
+++ b/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}
diff --git a/src/lib/components/listbox/ListboxLabel.svelte b/src/lib/components/listbox/ListboxLabel.svelte
index 1b2e422..7be27ba 100644
--- a/src/lib/components/listbox/ListboxLabel.svelte
+++ b/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}
diff --git a/src/lib/components/listbox/ListboxOption.svelte b/src/lib/components/listbox/ListboxOption.svelte
index 0ccb2dc..921278b 100644
--- a/src/lib/components/listbox/ListboxOption.svelte
+++ b/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() {
diff --git a/src/lib/components/listbox/ListboxOptions.svelte b/src/lib/components/listbox/ListboxOptions.svelte
index a440b2a..36c33ef 100644
--- a/src/lib/components/listbox/ListboxOptions.svelte
+++ b/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}