public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Fix a couple <Disclosure> mistakes

Browse Source 
* Incorrect error messages from <DisclosurePanel>
* Not using buttonId correctly (don't think this had any practical impact though)
This commit is contained in:
Ryan Gossiaux
2021-12-26 22:58:55 -08:00
parent d1940e5d16
commit 206b83963e
2 changed files with 4 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/disclosure/DisclosureButton.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte"; import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
import { usePanelContext } from "./DisclosurePanel.svelte"; import { usePanelContext } from "./DisclosurePanel.svelte";
import { useId } from "$lib/hooks/use-id";
import { Keys } from "$lib/utils/keyboard"; import { Keys } from "$lib/utils/keyboard";
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder"; import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
import { get_current_component } from "svelte/internal"; import { get_current_component } from "svelte/internal";
@@ -18,7 +17,6 @@
export let disabled = false; export let disabled = false;
const api = useDisclosureContext("DisclosureButton"); const api = useDisclosureContext("DisclosureButton");
const panelContext = usePanelContext(); const panelContext = usePanelContext();
const id = `headlessui-disclosure-button-${useId()}`;
$: buttonStore = $api.buttonStore; $: buttonStore = $api.buttonStore;
$: panelStore = $api.panelStore; $: panelStore = $api.panelStore;
@@ -82,7 +80,7 @@
$: propsWeControl = isWithinPanel $: propsWeControl = isWithinPanel
? { type } ? { type }
: { : {
id, id: $api.buttonId,
type, type,
"aria-expanded": disabled "aria-expanded": disabled
? undefined ? undefined

7
src/lib/components/disclosure/DisclosurePanel.svelte
View File

@@ -20,11 +20,10 @@
export let as: SupportedAs = "div"; export let as: SupportedAs = "div";
export let use: HTMLActionArray = []; export let use: HTMLActionArray = [];
const api = useDisclosureContext("DisclosureButton"); const api = useDisclosureContext("DisclosurePanel");
$: id = $api.panelId;
let openClosedState = useOpenClosed(); let openClosedState = useOpenClosed();
setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id); setContext(DISCLOSURE_PANEL_CONTEXT_NAME, $api.panelId);
$: panelStore = $api.panelStore; $: panelStore = $api.panelStore;
@@ -33,7 +32,7 @@
? $openClosedState === State.Open ? $openClosedState === State.Open
: $api.disclosureState === DisclosureStates.Open; : $api.disclosureState === DisclosureStates.Open;
$: propsWeControl = { id }; $: propsWeControl = { id: $api.panelId };
$: slotProps = { $: slotProps = {
open: $api.disclosureState === DisclosureStates.Open, open: $api.disclosureState === DisclosureStates.Open,