Refactor to useOpenClosed

Fixes #6

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 =

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,

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);
 

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,

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,

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

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,

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

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

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, {

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,