lets goooo

Author: huntabyte

packages/floating-ui-svelte/src/components/floating-tree/floating-tree.svelte

@@ -14,20 +14,14 @@
 
 	let nodes: FloatingNodeType[] = $state.raw([]);
 
-	const addNode = (node: FloatingNodeType) => {
-		nodes = [...nodes, node];
-	};
-
-	const removeNode = (node: FloatingNodeType) => {
-		nodes = nodes.filter((n) => n !== node);
-	};
-
-	const events = createPubSub();
-
 	FloatingTreeContext.set({
-		addNode,
-		removeNode,
-		events,
+		addNode: (node: FloatingNodeType) => {
+			nodes = [...nodes, node];
+		},
+		removeNode: (node: FloatingNodeType) => {
+			nodes = nodes.filter((n) => n !== node);
+		},
+		events: createPubSub(),
 		get nodes() {
 			return nodes;
 		},

packages/floating-ui-svelte/src/hooks/use-dismiss.svelte.ts

@@ -19,10 +19,10 @@ import type { FloatingTreeType, MaybeGetter } from "../types.js";
 import { useFloatingTree } from "../components/floating-tree/hooks.svelte.js";
 import { getChildren } from "../internal/get-children.js";
 import { on } from "svelte/events";
-import { executeCallbacks } from "../internal/execute-callbacks.js";
 import { extract } from "../internal/extract.js";
 import { watch } from "../internal/watch.svelte.js";
 import type { ElementProps } from "./use-interactions.svelte.js";
+import { untrack } from "svelte";
 
 const bubbleHandlerKeys = {
 	pointerdown: "onpointerdown",
@@ -164,10 +164,11 @@ class DismissInteraction implements ElementProps {
 
 		$effect(() => {
 			if (!this.context.open || !this.#enabled) return;
-
-			this.context.data.__escapeKeyBubbles = this.#bubbleOptions.escapeKey;
-			this.context.data.__outsidePressBubbles =
-				this.#bubbleOptions.outsidePress;
+			untrack(() => {
+				this.context.data.__escapeKeyBubbles = this.#bubbleOptions.escapeKey;
+				this.context.data.__outsidePressBubbles =
+					this.#bubbleOptions.outsidePress;
+			});
 
 			let compositionTimeout = -1;
 
@@ -206,6 +207,7 @@ class DismissInteraction implements ElementProps {
 						this.#captureOptions.escapeKey
 							? this.#closeOnEscapeKeyDownCapture
 							: this.#closeOnEscapeKeyDown,
+						{ capture: this.#captureOptions.escapeKey },
 					),
 					on(doc, "compositionstart", handleCompositionStart),
 					on(doc, "compositionend", handleCompositionEnd),
@@ -220,6 +222,7 @@ class DismissInteraction implements ElementProps {
 						this.#captureOptions.outsidePress
 							? this.#closeOnPressOutsideCapture
 							: this.#closeOnPressOutside,
+						{ capture: this.#captureOptions.outsidePress },
 					),
 				);
 			}
@@ -260,7 +263,9 @@ class DismissInteraction implements ElementProps {
 			}
 
 			return () => {
-				executeCallbacks(...listenersToRemove);
+				for (const removeListener of listenersToRemove) {
+					removeListener();
+				}
 				window.clearTimeout(compositionTimeout);
 			};
 		});
@@ -270,7 +275,7 @@ class DismissInteraction implements ElementProps {
 		});
 	}
 
-	#closeOnEscapeKeyDown(event: KeyboardEvent) {
+	#closeOnEscapeKeyDown = (event: KeyboardEvent) => {
 		if (
 			!this.context.open ||
 			!this.#enabled ||
@@ -290,31 +295,27 @@ class DismissInteraction implements ElementProps {
 			event.stopPropagation();
 
 			if (children.length > 0) {
-				let shouldDismiss = true;
-
-				for (const child of children) {
-					if (child.context?.open && !child.context.data.__escapeKeyBubbles) {
-						shouldDismiss = false;
-						break;
-					}
-				}
+				const hasOpenChild = children.some(
+					(child) =>
+						child.context?.open && !child.context.data.__escapeKeyBubbles,
+				);
 
-				if (!shouldDismiss) return;
+				if (hasOpenChild) return;
 			}
 		}
 
 		this.context.onOpenChange(false, event, "escape-key");
-	}
+	};
 
-	#closeOnEscapeKeyDownCapture(event: KeyboardEvent) {
+	#closeOnEscapeKeyDownCapture = (event: KeyboardEvent) => {
 		const callback = () => {
 			this.#closeOnEscapeKeyDown(event);
 			getTarget(event)?.removeEventListener("keydown", callback);
 		};
 		getTarget(event)?.addEventListener("keydown", callback);
-	}
+	};
 
-	#closeOnPressOutside(event: MouseEvent) {
+	#closeOnPressOutside = (event: MouseEvent) => {
 		const localInsideTree = this.#insideTree;
 		this.#insideTree = false;
 
@@ -373,7 +374,7 @@ class DismissInteraction implements ElementProps {
 		}
 
 		// Check if the click occurred on the scrollbar
-		if (isHTMLElement(target)) {
+		if (isHTMLElement(target) && this.context.floating) {
 			const lastTraversableNode = isLastTraversableNode(target);
 			const style = getComputedStyle(target);
 			const scrollRe = /auto|scroll/;
@@ -431,28 +432,24 @@ class DismissInteraction implements ElementProps {
 		}
 
 		if (children.length > 0) {
-			let shouldDismiss = true;
-
-			for (const child of children) {
-				if (child.context?.open && !child.context.data.__outsidePressBubbles) {
-					shouldDismiss = false;
-					break;
-				}
-			}
+			const hasOpenChild = children.some(
+				(child) =>
+					child.context?.open && !child.context.data.__outsidePressBubbles,
+			);
 
-			if (!shouldDismiss) return;
+			if (hasOpenChild) return;
 		}
 
 		this.context.onOpenChange(false, event, "outside-press");
-	}
+	};
 
-	#closeOnPressOutsideCapture(event: MouseEvent) {
+	#closeOnPressOutsideCapture = (event: MouseEvent) => {
 		const callback = () => {
 			this.#closeOnPressOutside(event);
 			getTarget(event)?.removeEventListener(this.#outsidePressEvent, callback);
 		};
 		getTarget(event)?.addEventListener(this.#outsidePressEvent, callback);
-	}
+	};
 
 	#reference = $derived.by(() => {
 		if (!this.#enabled) return {};

packages/floating-ui-svelte/src/internal/dom.ts

@@ -79,12 +79,12 @@ function getTarget(event: Event) {
 }
 
 function isEventTargetWithin(event: Event, node: Node | null | undefined) {
-	if (node == null) {
-		return false;
-	}
+	if (node == null) return false;
 
 	if ("composedPath" in event) {
-		return event.composedPath().includes(node);
+		return (
+			event.composedPath().includes(node) || node.contains(event.target as Node)
+		);
 	}
 
 	// TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't

pnpm-lock.yaml

@@ -20,7 +20,7 @@
 		"lucide-svelte": "^0.469.0",
 		"pagefind": "^1.3.0",
 		"shiki": "^1.24.4",
-		"svelte": "^5.16.0",
+		"svelte": "^5.17.3",
 		"svelte-check": "^4.1.1",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.2",