add controlled popover focus prop (huntabyte#143)

.changeset/dry-sheep-explode.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+add controlled popover focus prop

src/lib/bits/popover/components/Popover.svelte

@@ -1,6 +1,8 @@
 <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;
@@ -12,12 +14,14 @@
 	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 }
+		states: { open: localOpen },
+		ids: { trigger }
 	} = setCtx({
 		positioning,
 		arrowSize,
@@ -29,16 +33,31 @@
 		defaultOpen: open,
 		openFocus,
 		closeFocus,
-		onOpenChange: ({ next }) => {
-			if (open !== next) {
-				onOpenChange?.(next);
-				open = next;
-			}
-			return next;
+		onOpenChange: ({ next, curr }) => {
+			return customOnOpenChange({ next, curr });
 		}
 	});
 
+	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.set(open);
+
 	$: updateOption("positioning", positioning);
 	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("disableFocusTrap", disableFocusTrap);

src/lib/bits/popover/types.ts

@@ -15,6 +15,14 @@ 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;
 	}
 >;