From e6cecb35b203346fb60c31b3a8b2efbadb254a9a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 8 Nov 2023 20:35:06 -0500
Subject: [PATCH] chore: update id slot props

---
 src/lib/bits/accordion/components/Accordion.svelte   |  1 -
 .../bits/alert-dialog/components/AlertDialog.svelte  | 12 +++++++++++-
 src/lib/bits/dialog/components/Dialog.svelte         | 12 +++++++++++-
 .../dropdown-menu/components/DropdownMenu.svelte     |  9 ++++++++-
 .../dropdown-menu/components/DropdownMenuSub.svelte  |  8 +++++++-
 .../bits/link-preview/components/LinkPreview.svelte  |  8 +++++++-
 src/lib/bits/menubar/components/Menubar.svelte       |  9 +++++++--
 src/lib/bits/menubar/components/MenubarMenu.svelte   | 10 ++++++++--
 src/lib/bits/menubar/components/MenubarSub.svelte    |  8 +++++++-
 src/lib/bits/popover/components/Popover.svelte       |  8 +++++++-
 src/lib/bits/select/components/Select.svelte         | 12 +++++++++++-
 src/lib/bits/tooltip/components/Tooltip.svelte       |  8 +++++++-
 12 files changed, 91 insertions(+), 14 deletions(-)

diff --git a/src/lib/bits/accordion/components/Accordion.svelte b/src/lib/bits/accordion/components/Accordion.svelte
index 366ac1c9d..d8a198c59 100644
--- a/src/lib/bits/accordion/components/Accordion.svelte
+++ b/src/lib/bits/accordion/components/Accordion.svelte
@@ -21,7 +21,6 @@
 		multiple,
 		disabled,
 		defaultValue: value,
-
 		onValueChange: (({ next }: { next: $$Props["value"] }) => {
 			if (value !== next) {
 				onValueChange?.(next);
diff --git a/src/lib/bits/alert-dialog/components/AlertDialog.svelte b/src/lib/bits/alert-dialog/components/AlertDialog.svelte
index d38596d89..ca21a0b37 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialog.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
@@ -32,6 +33,15 @@
 		}
 	});
 
+	const idValues = derived(
+		[ids.content, ids.description, ids.title],
+		([$contentId, $descriptionId, $titleId]) => ({
+			content: $contentId,
+			description: $descriptionId,
+			title: $titleId
+		})
+	);
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("preventScroll", preventScroll);
@@ -41,4 +51,4 @@
 	$: updateOption("forceVisible", forceVisible);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/dialog/components/Dialog.svelte b/src/lib/bits/dialog/components/Dialog.svelte
index 50af95b67..b00aa7ec8 100644
--- a/src/lib/bits/dialog/components/Dialog.svelte
+++ b/src/lib/bits/dialog/components/Dialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
@@ -36,6 +37,15 @@
 		}
 	});
 
+	const idValues = derived(
+		[ids.content, ids.description, ids.title],
+		([$contentId, $descriptionId, $titleId]) => ({
+			content: $contentId,
+			description: $descriptionId,
+			title: $titleId
+		})
+	);
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("preventScroll", preventScroll);
@@ -47,4 +57,4 @@
 	$: updateOption("closeFocus", closeFocus);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
index c4748b075..46b45730d 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Props } from "../types.js";
 	import { setCtx } from "../ctx.js";
+	import { derived } from "svelte/store";
 	type $$Props = Props;
 
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
@@ -44,6 +45,12 @@
 			return next;
 		}
 	});
+
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
@@ -60,4 +67,4 @@
 	$: updateOption("typeahead", typeahead);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
index d635ae8b0..27fb9bf19 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setSubMenuCtx } from "../ctx.js";
 	import type { SubProps } from "../types.js";
 	type $$Props = SubProps;
@@ -13,9 +14,14 @@
 		arrowSize
 	});
 
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
 	$: updateOption("arrowSize", arrowSize);
 </script>
 
-<slot subIds={ids} />
+<slot subIds={$idValues} />
diff --git a/src/lib/bits/link-preview/components/LinkPreview.svelte b/src/lib/bits/link-preview/components/LinkPreview.svelte
index 865f3a96c..1686fc6e8 100644
--- a/src/lib/bits/link-preview/components/LinkPreview.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreview.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 	type $$Props = Props;
@@ -35,6 +36,11 @@
 		}
 	});
 
+	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
+		content: $contentId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 	$: updateOption("positioning", positioning);
 	$: updateOption("openDelay", openDelay);
@@ -45,4 +51,4 @@
 	$: updateOption("portal", portal);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/menubar/components/Menubar.svelte b/src/lib/bits/menubar/components/Menubar.svelte
index 563206b39..850cb8cac 100644
--- a/src/lib/bits/menubar/components/Menubar.svelte
+++ b/src/lib/bits/menubar/components/Menubar.svelte
@@ -2,6 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import { setCtx, getAttrs } from "../ctx.js";
 	import type { Props } from "../types.js";
+	import { derived } from "svelte/store";
 
 	type $$Props = Props;
 
@@ -15,6 +16,10 @@
 		ids
 	} = setCtx({ loop, closeOnEscape });
 
+	const idValues = derived([ids.menubar], ([$menubarId]) => ({
+		menubar: $menubarId
+	}));
+
 	$: updateOption("loop", loop);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: builder = $menubar;
@@ -22,9 +27,9 @@
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} {ids} />
+	<slot {builder} {attrs} ids={$idValues} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} {ids} />
+		<slot {builder} {attrs} ids={$idValues} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarMenu.svelte b/src/lib/bits/menubar/components/MenubarMenu.svelte
index e255fdedf..53ebd5af1 100644
--- a/src/lib/bits/menubar/components/MenubarMenu.svelte
+++ b/src/lib/bits/menubar/components/MenubarMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { MenuProps } from "../types.js";
 	import { setMenuCtx } from "../ctx.js";
+	import { generateId } from "$lib/internal/id.js";
 	type $$Props = MenuProps;
 
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
@@ -17,12 +18,17 @@
 	export let closeFocus: $$Props["closeFocus"] = undefined;
 	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined;
 
+	const ids = {
+		menu: generateId(),
+		trigger: generateId()
+	};
+
 	const {
 		states: { open: localOpen },
-		updateOption,
-		ids
+		updateOption
 	} = setMenuCtx({
 		closeOnOutsideClick,
+		ids,
 		closeOnEscape,
 		portal,
 		preventScroll,
diff --git a/src/lib/bits/menubar/components/MenubarSub.svelte b/src/lib/bits/menubar/components/MenubarSub.svelte
index d635ae8b0..27fb9bf19 100644
--- a/src/lib/bits/menubar/components/MenubarSub.svelte
+++ b/src/lib/bits/menubar/components/MenubarSub.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setSubMenuCtx } from "../ctx.js";
 	import type { SubProps } from "../types.js";
 	type $$Props = SubProps;
@@ -13,9 +14,14 @@
 		arrowSize
 	});
 
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
 	$: updateOption("arrowSize", arrowSize);
 </script>
 
-<slot subIds={ids} />
+<slot subIds={$idValues} />
diff --git a/src/lib/bits/popover/components/Popover.svelte b/src/lib/bits/popover/components/Popover.svelte
index 658dcbfcf..234664118 100644
--- a/src/lib/bits/popover/components/Popover.svelte
+++ b/src/lib/bits/popover/components/Popover.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Props } from "../types.js";
 	import { setCtx } from "../ctx.js";
+	import { derived } from "svelte/store";
 
 	type $$Props = Props;
 	export let positioning: $$Props["positioning"] = undefined;
@@ -39,6 +40,11 @@
 		}
 	});
 
+	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
+		content: $contentId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("positioning", positioning);
@@ -52,4 +58,4 @@
 	$: updateOption("closeFocus", closeFocus);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/select/components/Select.svelte b/src/lib/bits/select/components/Select.svelte
index 76673fdeb..180a4055a 100644
--- a/src/lib/bits/select/components/Select.svelte
+++ b/src/lib/bits/select/components/Select.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { SelectProps } from "../types.js";
 
@@ -56,6 +57,15 @@
 		}
 	});
 
+	const idValues = derived(
+		[ids.menu, ids.trigger, ids.label],
+		([$menuId, $triggerId, $labelId]) => ({
+			menu: $menuId,
+			trigger: $triggerId,
+			label: $labelId
+		})
+	);
+
 	$: open !== undefined && localOpen.set(open);
 	$: selected !== undefined && localSelected.set(selected);
 
@@ -73,4 +83,4 @@
 	$: updateOption("forceVisible", forceVisible);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/tooltip/components/Tooltip.svelte b/src/lib/bits/tooltip/components/Tooltip.svelte
index 27b22eb5a..ba33b0314 100644
--- a/src/lib/bits/tooltip/components/Tooltip.svelte
+++ b/src/lib/bits/tooltip/components/Tooltip.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 	type $$Props = Props;
@@ -41,6 +42,11 @@
 		}
 	});
 
+	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
+		content: $contentId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 	$: updateOption("positioning", positioning);
 	$: updateOption("arrowSize", arrowSize);
@@ -54,4 +60,4 @@
 	$: updateOption("disableHoverableContent", disableHoverableContent);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />