From 206b83963ec409ca5fd0e537f44b3c4a88704eb3 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Sun, 26 Dec 2021 22:58:55 -0800
Subject: [PATCH] Fix a couple <Disclosure> mistakes

* Incorrect error messages from <DisclosurePanel>
* Not using buttonId correctly (don't think this had any practical impact though)
---
 src/lib/components/disclosure/DisclosureButton.svelte | 4 +---
 src/lib/components/disclosure/DisclosurePanel.svelte  | 7 +++----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/disclosure/DisclosureButton.svelte b/src/lib/components/disclosure/DisclosureButton.svelte
index ef1c822..cbc9eea 100644
--- a/src/lib/components/disclosure/DisclosureButton.svelte
+++ b/src/lib/components/disclosure/DisclosureButton.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
   import { usePanelContext } from "./DisclosurePanel.svelte";
-  import { useId } from "$lib/hooks/use-id";
   import { Keys } from "$lib/utils/keyboard";
   import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { get_current_component } from "svelte/internal";
@@ -18,7 +17,6 @@
   export let disabled = false;
   const api = useDisclosureContext("DisclosureButton");
   const panelContext = usePanelContext();
-  const id = `headlessui-disclosure-button-${useId()}`;
 
   $: buttonStore = $api.buttonStore;
   $: panelStore = $api.panelStore;
@@ -82,7 +80,7 @@
   $: propsWeControl = isWithinPanel
     ? { type }
     : {
-        id,
+        id: $api.buttonId,
         type,
         "aria-expanded": disabled
           ? undefined
diff --git a/src/lib/components/disclosure/DisclosurePanel.svelte b/src/lib/components/disclosure/DisclosurePanel.svelte
index 06e885a..89e38e0 100644
--- a/src/lib/components/disclosure/DisclosurePanel.svelte
+++ b/src/lib/components/disclosure/DisclosurePanel.svelte
@@ -20,11 +20,10 @@
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
-  const api = useDisclosureContext("DisclosureButton");
-  $: id = $api.panelId;
+  const api = useDisclosureContext("DisclosurePanel");
   let openClosedState = useOpenClosed();
 
-  setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id);
+  setContext(DISCLOSURE_PANEL_CONTEXT_NAME, $api.panelId);
 
   $: panelStore = $api.panelStore;
 
@@ -33,7 +32,7 @@
       ? $openClosedState === State.Open
       : $api.disclosureState === DisclosureStates.Open;
 
-  $: propsWeControl = { id };
+  $: propsWeControl = { id: $api.panelId };
 
   $: slotProps = {
     open: $api.disclosureState === DisclosureStates.Open,