pass ids as slot props

huntabyte · Oct 27, 2023 · 79dca45 · 79dca45
1 parent 8600f55
commit 79dca45
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 64 deletions.
diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
@@ -3,17 +3,27 @@
 	import * as Label from "@/components/ui/label";
 	import * as Button from "@/components/ui/button";
 	import * as Input from "@/components/ui/input";
+	import { tick } from "svelte";
 
 	let open = false;
 </script>
 
-<Popover.Root bind:open focusTriggerOnClose={true}>
+<Popover.Root bind:open let:ids>
 	<Popover.Trigger asChild let:builder>
 		<Button.Root builders={[builder]} variant="outline">Open</Button.Root>
 	</Popover.Trigger>
 	<Popover.Content class="w-80">
 		<div class="grid gap-4">
-			<button on:click={() => (open = false)}> close me </button>
+			<button
+				on:click={() => {
+					open = false;
+					tick().then(() => {
+						document.getElementById(ids.trigger)?.focus();
+					});
+				}}
+			>
+				close me
+			</button>
 			<div class="space-y-2">
 				<h4 class="font-medium leading-none">Dimensions</h4>
 				<p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>

diff --git a/src/lib/bits/accordion/components/Accordion.svelte b/src/lib/bits/accordion/components/Accordion.svelte
@@ -15,7 +15,8 @@
 	const {
 		elements: { root },
 		states: { value: localValue },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		multiple,
 		disabled,
@@ -43,9 +44,9 @@
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} {attrs} {ids} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {builder} {attrs} {ids} />
 	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialog.svelte b/src/lib/bits/alert-dialog/components/AlertDialog.svelte
@@ -22,7 +22,8 @@
 
 	const {
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		closeOnEscape,
 		preventScroll,
@@ -73,4 +74,4 @@
 	$: updateOption("forceVisible", forceVisible);
 </script>
 
-<slot />
+<slot {ids} />
diff --git a/src/lib/bits/dialog/components/Dialog.svelte b/src/lib/bits/dialog/components/Dialog.svelte
@@ -22,7 +22,8 @@
 	let timeout = 0;
 	const {
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		closeOnEscape,
 		preventScroll,
@@ -80,4 +81,4 @@
 	$: updateOption("closeFocus", closeFocus);
 </script>
 
-<slot />
+<slot {ids} />
diff --git a/src/lib/bits/link-preview/components/LinkPreview.svelte b/src/lib/bits/link-preview/components/LinkPreview.svelte
@@ -15,7 +15,8 @@
 
 	const {
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		defaultOpen: open,
 		positioning,
@@ -44,4 +45,4 @@
 	$: updateOption("portal", portal);
 </script>
 
-<slot />
+<slot {ids} />
diff --git a/src/lib/bits/popover/components/Popover.svelte b/src/lib/bits/popover/components/Popover.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { Props } from "../types.js";
 	import { setCtx } from "../ctx.js";
-	import { isBrowser } from "$lib/internal/is.js";
-	import { tick } from "svelte";
 
 	type $$Props = Props;
 	export let positioning: $$Props["positioning"] = undefined;
@@ -14,14 +12,13 @@
 	export let portal: $$Props["portal"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let focusTriggerOnClose: $$Props["focusTriggerOnClose"] = false;
 	export let openFocus: $$Props["openFocus"] = undefined;
 	export let closeFocus: $$Props["closeFocus"] = undefined;
 
 	const {
 		updateOption,
 		states: { open: localOpen },
-		ids: { trigger }
+		ids
 	} = setCtx({
 		positioning,
 		arrowSize,
@@ -33,42 +30,16 @@
 		defaultOpen: open,
 		openFocus,
 		closeFocus,
-		onOpenChange: ({ next, curr }) => {
-			return customOnOpenChange({ next, curr });
+		onOpenChange: ({ next }) => {
+			if (open !== next) {
+				onOpenChange?.(next);
+				open = next;
+			}
+			return next;
 		}
 	});
 
-	type ChangeFn = ({ curr, next }: { curr: boolean; next: boolean }) => boolean;
-
-	const customOnOpenChange: ChangeFn = ({ next }) => {
-		if (open === next) return next;
-
-		if (next === false && focusTriggerOnClose && isBrowser) {
-			tick().then(() => {
-				const triggerEl = document.getElementById(trigger);
-				if (triggerEl) {
-					triggerEl.focus();
-				}
-			});
-		}
-		onOpenChange?.(next);
-		open = next;
-		return next;
-	};
-
-	$: open !== undefined &&
-		localOpen.update((curr) => {
-			if (open === undefined || curr === open) return curr;
-			if (open === false && focusTriggerOnClose && isBrowser) {
-				tick().then(() => {
-					const triggerEl = document.getElementById(trigger);
-					if (triggerEl) {
-						triggerEl.focus();
-					}
-				});
-			}
-			return open;
-		});
+	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("positioning", positioning);
 	$: updateOption("arrowSize", arrowSize);
@@ -81,4 +52,4 @@
 	$: updateOption("closeFocus", closeFocus);
 </script>
 
-<slot />
+<slot {ids} />
diff --git a/src/lib/bits/popover/types.ts b/src/lib/bits/popover/types.ts
@@ -15,14 +15,6 @@ type Props = Expand<
 	OmitOpen<CreatePopoverProps> & {
 		open?: boolean;
 		onOpenChange?: OnChangeFn<boolean>;
-		/**
-		 * Focus the trigger when `open` is programmatically set to false.
-		 * This is in addition to the automatic focus that occurs when you
-		 * don't programmatically set `open` to false.
-		 *
-		 * @default false;
-		 */
-		focusTriggerOnClose?: boolean;
 	}
 >;
 

diff --git a/src/lib/bits/select/components/Select.svelte b/src/lib/bits/select/components/Select.svelte
@@ -23,7 +23,8 @@
 
 	const {
 		states: { open: localOpen, selected: localSelected },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		required,
 		disabled,
@@ -72,4 +73,4 @@
 	$: updateOption("forceVisible", forceVisible);
 </script>
 
-<slot />
+<slot {ids} />
diff --git a/src/lib/bits/slider/components/Slider.svelte b/src/lib/bits/slider/components/Slider.svelte
@@ -17,7 +17,8 @@
 	const {
 		elements: { root },
 		states: { value: localValue },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		disabled,
 		min,
@@ -46,9 +47,9 @@
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} {attrs} {ids} />
 {:else}
 	<span use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {builder} {attrs} {ids} />
 	</span>
 {/if}
diff --git a/src/lib/bits/tooltip/components/Tooltip.svelte b/src/lib/bits/tooltip/components/Tooltip.svelte
@@ -18,7 +18,8 @@
 
 	const {
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		positioning,
 		arrowSize,
@@ -53,4 +54,4 @@
 	$: updateOption("disableHoverableContent", disableHoverableContent);
 </script>
 
-<slot />
+<slot {ids} />