lets go

Author: huntabyte

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

@@ -79,7 +79,7 @@
 
 	// https://github.com/floating-ui/floating-ui/issues/2932
 	watch(
-		() => context.elements.floating,
+		() => context.floating,
 		(floatingEl) => {
 			if (!floatingEl) return;
 			if (getComputedStyle(floatingEl).direction === "rtl") {
@@ -149,9 +149,7 @@
 	});
 </script>
 
-<!-- FIXME: extend styleObjectToString type to accept `rest.styles` -->
-
-{#if context.elements.floating}
+{#if context.floating}
 	<svg
 		bind:this={ref}
 		{...rest}

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

@@ -1,9 +1,10 @@
 import { isHTMLElement } from "@floating-ui/utils/dom";
-import { isMouseLikePointerType } from "../internal/dom.js";
+import { isMouseLikePointerType, isPointerType } from "../internal/dom.js";
 import { isTypeableElement } from "../internal/is-typeable-element.js";
 import type { FloatingContext } from "./use-floating.svelte.js";
 import type { MaybeGetter, ReferenceType } from "../types.js";
 import { extract } from "../internal/extract.js";
+import type { ElementProps } from "./use-interactions.svelte.js";
 
 interface UseClickOptions {
 	/**
@@ -43,6 +44,14 @@ interface UseClickOptions {
 	 * @default true
 	 */
 	keyboardHandlers?: MaybeGetter<boolean>;
+
+	/**
+	 * If already open from another event such as the `useHover()` Hook,
+	 * determines whether to keep the floating element open when clicking the
+	 * reference element for the first time.
+	 * @default true
+	 */
+	stickIfOpen?: boolean;
 }
 
 function isButtonTarget(event: KeyboardEvent) {
@@ -53,34 +62,45 @@ function isSpaceIgnored(element: ReferenceType | null) {
 	return isTypeableElement(element);
 }
 
-class ClickInteraction {
+const pointerTypes = ["mouse", "pen", "touch"] as const;
+
+type PointerType = (typeof pointerTypes)[number];
+
+class ClickInteraction implements ElementProps {
 	#enabled = $derived.by(() => extract(this.options?.enabled, true));
 	#eventOption = $derived.by(() => extract(this.options?.event, "click"));
 	#toggle = $derived.by(() => extract(this.options?.toggle, true));
 	#ignoreMouse = $derived.by(() => extract(this.options?.ignoreMouse, false));
+	#stickIfOpen = $derived.by(() => extract(this.options?.stickIfOpen, true));
 	#keyboardHandlers = $derived.by(() =>
 		extract(this.options?.keyboardHandlers, true),
 	);
-	#pointerType: PointerEvent["pointerType"] | undefined = undefined;
+	#pointerType: PointerType | undefined = undefined;
 	#didKeyDown = false;
 
 	constructor(
 		private readonly context: FloatingContext,
 		private readonly options: UseClickOptions = {},
 	) {}
 
+	#onpointerdown = (event: PointerEvent) => {
+		if (!isPointerType(event.pointerType)) return;
+		this.#pointerType = event.pointerType;
+	};
+
 	#onmousedown = (event: MouseEvent) => {
+		// Ignore all buttons except for the "main" button.
+		// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
 		if (event.button !== 0) return;
+		if (this.#eventOption === "click") return;
 		if (isMouseLikePointerType(this.#pointerType, true) && this.#ignoreMouse) {
 			return;
 		}
 
-		if (this.#eventOption === "click") return;
-
 		if (
 			this.context.open &&
 			this.#toggle &&
-			(this.context.data.openEvent
+			(this.context.data.openEvent && this.#stickIfOpen
 				? this.context.data.openEvent.type === "mousedown"
 				: true)
 		) {
@@ -92,10 +112,6 @@ class ClickInteraction {
 		}
 	};
 
-	#onpointerdown = (event: PointerEvent) => {
-		this.#pointerType = event.pointerType;
-	};
-
 	#onclick = (event: MouseEvent) => {
 		if (this.#eventOption === "mousedown" && this.#pointerType) {
 			this.#pointerType = undefined;
@@ -109,7 +125,7 @@ class ClickInteraction {
 		if (
 			this.context.open &&
 			this.#toggle &&
-			(this.context.data.openEvent
+			(this.context.data.openEvent && this.#stickIfOpen
 				? this.context.data.openEvent.type === "click"
 				: true)
 		) {
@@ -165,7 +181,11 @@ class ClickInteraction {
 		}
 	};
 
-	readonly reference = $derived.by(() => {
+	get reference() {
+		return this.#reference;
+	}
+
+	#reference = $derived.by(() => {
 		if (!this.#enabled) return {};
 		return {
 			onpointerdown: this.#onpointerdown,
@@ -175,10 +195,6 @@ class ClickInteraction {
 			onkeyup: this.#onkeyup,
 		};
 	});
-
-	get enabled() {
-		return this.#enabled;
-	}
 }
 
 function useClick(context: FloatingContext, options: UseClickOptions = {}) {

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

@@ -21,6 +21,8 @@ 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";
 
 const bubbleHandlerKeys = {
 	pointerdown: "onpointerdown",
@@ -119,7 +121,7 @@ interface UseDismissOptions {
 	>;
 }
 
-class DismissInteraction {
+class DismissInteraction implements ElementProps {
 	#enabled = $derived.by(() => extract(this.options.enabled, true));
 	#escapeKey = $derived.by(() => extract(this.options.escapeKey, true));
 	#unstable_outsidePress = $derived.by(() => this.options.outsidePress ?? true);
@@ -137,7 +139,6 @@ class DismissInteraction {
 	);
 	#bubbles = $derived.by(() => extract(this.options.bubbles));
 	#capture = $derived.by(() => extract(this.options.capture));
-
 	#outsidePressFn = $derived.by(() =>
 		typeof this.#unstable_outsidePress === "function"
 			? this.#unstable_outsidePress
@@ -264,8 +265,7 @@ class DismissInteraction {
 			};
 		});
 
-		$effect(() => {
-			[this.#outsidePress, this.#outsidePressEvent];
+		watch([() => this.#outsidePress, () => this.#outsidePressEvent], () => {
 			this.#insideTree = false;
 		});
 	}
@@ -454,7 +454,7 @@ class DismissInteraction {
 		getTarget(event)?.addEventListener(this.#outsidePressEvent, callback);
 	}
 
-	readonly reference = $derived.by(() => {
+	#reference = $derived.by(() => {
 		if (!this.#enabled) return {};
 		return {
 			onkeydown: this.#closeOnEscapeKeyDown,
@@ -471,7 +471,7 @@ class DismissInteraction {
 		};
 	});
 
-	readonly floating = $derived.by(() => {
+	#floating = $derived.by(() => {
 		if (!this.#enabled) return {};
 		return {
 			onkeydown: this.#closeOnEscapeKeyDown,
@@ -487,8 +487,12 @@ class DismissInteraction {
 		};
 	});
 
-	get enabled() {
-		return this.#enabled;
+	get reference() {
+		return this.#reference;
+	}
+
+	get floating() {
+		return this.#floating;
 	}
 }
 

packages/floating-ui-svelte/src/hooks/use-floating-root-context.svelte.ts

@@ -71,11 +71,6 @@ class FloatingRootContextOptions {
 		this.reference.current = this.referenceProp;
 		this.floating.current = this.floatingProp;
 
-		$effect.pre(() => {
-			console.log("REFERENCE IN FLOATING ROOT", this.reference.current);
-			console.log("REFERENCE PROP IN FLOATING ROOT", this.referenceProp);
-		});
-
 		$effect.pre(() => {
 			this.reference.current = this.referenceProp;
 		});

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

@@ -96,6 +96,10 @@ interface UseFloatingOptions<RT extends ReferenceType = ReferenceType> {
 	nodeId?: MaybeGetter<string>;
 }
 
+/**
+ * Reactive options for the `useFloating` hook.
+ */
+// This enables us to not have to pass around a bunch of getters and setters internally.
 class FloatingOptions<RT extends ReferenceType = ReferenceType> {
 	open: ReadableBox<boolean>;
 	placement: ReadableBox<Placement>;
@@ -155,21 +159,16 @@ class FloatingOptions<RT extends ReferenceType = ReferenceType> {
 		this.reference.current = this.referenceProp;
 		this.floating.current = this.floatingProp;
 
-		$effect(() => {
-			console.log("REFERENCE IN FLOATING OPTIONS", this.reference.current);
-			console.log("REFERENCE PROP IN FLOATING OPTIONS", this.referenceProp);
-		});
-
-		$effect(() => {
-			this.floating.current = this.floatingProp;
-		});
-
-		$effect(() => {
-			this.reference.current = this.referenceProp;
+		$effect.pre(() => {
+			if (this.floatingProp) {
+				this.floating.current = this.floatingProp;
+			}
 		});
 
-		$effect(() => {
-			console.log("OPEN STATE:", this.open.current);
+		$effect.pre(() => {
+			if (this.referenceProp) {
+				this.reference.current = this.referenceProp;
+			}
 		});
 	}
 }
@@ -288,11 +287,10 @@ class FloatingState<RT extends ReferenceType = ReferenceType> {
 	#rootContext: FloatingRootContext<RT>;
 	#position: PositionState<RT>;
 	#positionReference = $state<ReferenceType | null>(null);
-	#_domReference = $state<NarrowedElement<RT> | null>(null);
 	#derivedDomReference = $derived.by(
 		() =>
 			(this.#rootContext.domReference ||
-				this.#_domReference) as NarrowedElement<RT>,
+				this.options.reference.current) as NarrowedElement<RT>,
 	);
 	#tree: FloatingTreeType<RT> | null;
 	context: FloatingContext<RT>;
@@ -302,6 +300,7 @@ class FloatingState<RT extends ReferenceType = ReferenceType> {
 			open: () => options.open.current ?? true,
 			reference: () => options.reference.current,
 			floating: () => options.floating.current,
+			onOpenChange: options.onOpenChange,
 		});
 
 		this.#rootContext =
@@ -342,7 +341,6 @@ class FloatingState<RT extends ReferenceType = ReferenceType> {
 	}
 
 	set reference(node: RT | null) {
-		console.log("setting reference!", node);
 		if (isElement(node) || node === null) {
 			this.options.reference.current = node;
 		}