From 9e45d929290a3373c0433c8e02eaedcfbf075980 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Sat, 18 Dec 2021 21:36:09 -0800
Subject: [PATCH] Refactor to useOpenClosed

Fixes #6
---
 src/lib/components/dialog/Dialog.svelte               | 4 ++--
 src/lib/components/disclosure/Disclosure.svelte       | 4 ++--
 src/lib/components/disclosure/DisclosurePanel.svelte  | 5 ++---
 src/lib/components/listbox/Listbox.svelte             | 1 +
 src/lib/components/menu/Menu.svelte                   | 4 ++--
 src/lib/components/menu/MenuItems.svelte              | 7 +++----
 src/lib/components/popover/Popover.svelte             | 4 ++--
 src/lib/components/popover/PopoverOverlay.svelte      | 6 ++----
 src/lib/components/popover/PopoverPanel.svelte        | 5 ++---
 src/lib/components/transitions/TransitionChild.svelte | 4 ++--
 src/lib/components/transitions/TransitionRoot.svelte  | 6 +++---
 11 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/dialog/Dialog.svelte b/src/lib/components/dialog/Dialog.svelte
index e5870da..520f85f 100644
--- a/src/lib/components/dialog/Dialog.svelte
+++ b/src/lib/components/dialog/Dialog.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <script lang="ts">
-  import { State } from "$lib/internal/open-closed";
+  import { State, useOpenClosed } from "$lib/internal/open-closed";
   import { writable, Writable } from "svelte/store";
   import { match } from "$lib/utils/match";
   import { useId } from "$lib/hooks/use-id";
@@ -61,7 +61,7 @@
   const dispatch = createEventDispatcher();
 
   let containers: Set<HTMLElement> = new Set();
-  let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+  let openClosedState = useOpenClosed();
 
   $: {
     open =
diff --git a/src/lib/components/disclosure/Disclosure.svelte b/src/lib/components/disclosure/Disclosure.svelte
index 24f5096..ef35c60 100644
--- a/src/lib/components/disclosure/Disclosure.svelte
+++ b/src/lib/components/disclosure/Disclosure.svelte
@@ -44,7 +44,7 @@
 <script lang="ts">
   import { useId } from "$lib/hooks/use-id";
   import { match } from "$lib/utils/match";
-  import { State } from "$lib/internal/open-closed";
+  import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   export let defaultOpen = false;
   let buttonId = `headlessui-disclosure-button-${useId()}`;
   let panelId = `headlessui-disclosure-panel-${useId()}`;
@@ -94,7 +94,7 @@
   });
 
   let openClosedState: Writable<State> | undefined = writable();
-  setContext("OpenClosed", openClosedState);
+  useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = match(disclosureState, {
     [DisclosureStates.Open]: State.Open,
diff --git a/src/lib/components/disclosure/DisclosurePanel.svelte b/src/lib/components/disclosure/DisclosurePanel.svelte
index df3fd1b..5ef7458 100644
--- a/src/lib/components/disclosure/DisclosurePanel.svelte
+++ b/src/lib/components/disclosure/DisclosurePanel.svelte
@@ -9,11 +9,10 @@
 
 <script lang="ts">
   import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
-  import type { Writable } from "svelte/store";
-  import { State } from "$lib/internal/open-closed";
+  import { State, useOpenClosed } from "$lib/internal/open-closed";
   const api = useDisclosureContext("DisclosureButton");
   $: id = $api?.panelId;
-  let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+  let openClosedState = useOpenClosed();
 
   setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id);
 
diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
index b31bfc7..feabe66 100644
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -178,6 +178,7 @@
 
   let openClosedState = writable(State.Closed);
   useOpenClosedProvider(openClosedState);
+
   $: openClosedState.set(
     match(listboxState, {
       [ListboxStates.Open]: State.Open,
diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
index 12a6874..2c0a9de 100644
--- a/src/lib/components/menu/Menu.svelte
+++ b/src/lib/components/menu/Menu.svelte
@@ -5,7 +5,7 @@
   } from "$lib/utils/calculate-active-index";
   import { getContext, setContext } from "svelte";
   import { writable, Writable } from "svelte/store";
-  import { State } from "$lib/internal/open-closed";
+  import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   import { match } from "$lib/utils/match";
   import { ActionArray, useActions } from "$lib/hooks/use-actions";
   export enum MenuStates {
@@ -149,7 +149,7 @@
   }
 
   let openClosedState: Writable<State> | undefined = writable(State.Closed);
-  setContext("OpenClosed", openClosedState);
+  useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = match(menuState, {
     [MenuStates.Open]: State.Open,
diff --git a/src/lib/components/menu/MenuItems.svelte b/src/lib/components/menu/MenuItems.svelte
index 011ba6c..3e0d5ac 100644
--- a/src/lib/components/menu/MenuItems.svelte
+++ b/src/lib/components/menu/MenuItems.svelte
@@ -4,9 +4,8 @@
   import { Keys } from "$lib/utils/keyboard";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { treeWalker } from "$lib/hooks/use-tree-walker";
-  import { State } from "$lib/internal/open-closed";
-  import { getContext, tick } from "svelte";
-  import type { Writable } from "svelte/store";
+  import { State, useOpenClosed } from "$lib/internal/open-closed";
+  import { tick } from "svelte";
   import { ActionArray, useActions } from "$lib/hooks/use-actions";
   export let use: ActionArray = [];
   const api = useMenuContext("MenuButton");
@@ -16,7 +15,7 @@
   $: buttonStore = $api?.buttonStore;
   $: itemsStore = $api?.itemsStore;
 
-  let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+  let openClosedState = useOpenClosed();
 
   $: visible =
     openClosedState !== undefined
diff --git a/src/lib/components/popover/Popover.svelte b/src/lib/components/popover/Popover.svelte
index 0f6e15d..05ee03a 100644
--- a/src/lib/components/popover/Popover.svelte
+++ b/src/lib/components/popover/Popover.svelte
@@ -48,7 +48,7 @@
     isFocusableElement,
     FocusableMode,
   } from "$lib/utils/focus-management";
-  import { State } from "$lib/internal/open-closed";
+  import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   import type { PopoverGroupContext } from "./PopoverGroup.svelte";
   import { getContext, setContext, onMount } from "svelte";
   import { writable, Writable } from "svelte/store";
@@ -97,7 +97,7 @@
   setContext(POPOVER_CONTEXT_NAME, api);
 
   let openClosedState: Writable<State> | undefined = writable();
-  setContext("OpenClosed", openClosedState);
+  useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = match(popoverState, {
     [PopoverStates.Open]: State.Open,
diff --git a/src/lib/components/popover/PopoverOverlay.svelte b/src/lib/components/popover/PopoverOverlay.svelte
index 51318b4..ba2e145 100644
--- a/src/lib/components/popover/PopoverOverlay.svelte
+++ b/src/lib/components/popover/PopoverOverlay.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
   import { ActionArray, useActions } from "$lib/hooks/use-actions";
 
-  import { State } from "$lib/internal/open-closed";
-  import { getContext } from "svelte";
-  import type { Writable } from "svelte/store";
+  import { State, useOpenClosed } from "$lib/internal/open-closed";
   import { PopoverStates, usePopoverContext } from "./Popover.svelte";
   export let use: ActionArray = [];
 
   let api = usePopoverContext("PopoverOverlay");
 
-  let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+  let openClosedState = useOpenClosed();
 
   $: visible =
     openClosedState !== undefined
diff --git a/src/lib/components/popover/PopoverPanel.svelte b/src/lib/components/popover/PopoverPanel.svelte
index 031512f..eac2809 100644
--- a/src/lib/components/popover/PopoverPanel.svelte
+++ b/src/lib/components/popover/PopoverPanel.svelte
@@ -11,7 +11,7 @@
 
 <script lang="ts">
   import { Keys } from "$lib/utils/keyboard";
-  import { State } from "$lib/internal/open-closed";
+  import { State, useOpenClosed } from "$lib/internal/open-closed";
   import {
     getFocusableElements,
     Focus,
@@ -19,7 +19,6 @@
     focusIn,
   } from "$lib/utils/focus-management";
   import { getContext, setContext } from "svelte";
-  import type { Writable } from "svelte/store";
   import {
     PopoverStates,
     StateDefinition,
@@ -33,7 +32,7 @@
   let api = usePopoverContext("PopoverPanel");
   setContext(POPOVER_PANEL_CONTEXT_NAME, $api.panelId);
 
-  let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+  let openClosedState = useOpenClosed();
 
   $: visible =
     openClosedState !== undefined
diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte
index dd99d22..35b37ac 100644
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -2,7 +2,7 @@
   import { createEventDispatcher, onMount, setContext } from "svelte";
   import { writable, Writable } from "svelte/store";
   import { match } from "$lib/utils/match";
-  import { State } from "$lib/internal/open-closed";
+  import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   import { Reason, transition } from "$lib/utils/transition";
 
   import {
@@ -151,7 +151,7 @@
 
   setContext(NESTING_CONTEXT_NAME, nesting);
   let openClosedState: Writable<State> = writable(State.Closed);
-  setContext("OpenClosed", openClosedState);
+  useOpenClosedProvider(openClosedState);
 
   $: openClosedState.set(
     match(state, {
diff --git a/src/lib/components/transitions/TransitionRoot.svelte b/src/lib/components/transitions/TransitionRoot.svelte
index ec5e0ba..be1277e 100644
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -103,11 +103,11 @@
 </script>
 
 <script lang="ts">
-  import { getContext, onDestroy, onMount, setContext } from "svelte";
+  import { getContext, onMount, setContext } from "svelte";
 
   import { writable, Writable } from "svelte/store";
   import { match } from "$lib/utils/match";
-  import { State } from "$lib/internal/open-closed";
+  import { State, useOpenClosed } from "$lib/internal/open-closed";
   import { RenderStrategy } from "$lib/utils/Render.svelte";
   import TransitionChild from "./TransitionChild.svelte";
   import type { useId } from "$lib/hooks/use-id";
@@ -116,7 +116,7 @@
   export let unmount = true;
   export let appear = false;
 
-  let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
+  let openClosedState = useOpenClosed();
 
   function computeShow(
     show: boolean | undefined,