closer but not yet

Author: huntabyte

packages/floating-ui-svelte/package.json

@@ -9,7 +9,9 @@
 		"test:watch": "pnpm test --watch",
 		"sync": "svelte-kit sync && pnpm build"
 	},
-	"files": ["dist"],
+	"files": [
+		"dist"
+	],
 	"sideEffects": false,
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -36,7 +38,7 @@
 		"@testing-library/svelte": "^5.2.6",
 		"@testing-library/user-event": "^14.5.2",
 		"csstype": "^3.1.3",
-		"svelte": "^5.16.0",
+		"svelte": "^5.17.3",
 		"typescript": "^5.7.2",
 		"vite": "^6.0.6",
 		"vitest": "^2.1.8"

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

@@ -2,28 +2,29 @@ import { isHTMLElement } from "@floating-ui/utils/dom";
 import { isMouseLikePointerType } from "../internal/dom.js";
 import { isTypeableElement } from "../internal/is-typeable-element.js";
 import type { FloatingContext } from "./use-floating.svelte.js";
-import type { ReferenceType } from "../types.js";
+import type { MaybeGetter, ReferenceType } from "../types.js";
+import { extract } from "../internal/extract.js";
 
 interface UseClickOptions {
 	/**
 	 * Whether the Hook is enabled, including all internal Effects and event
 	 * handlers.
 	 * @default true
 	 */
-	enabled?: boolean;
+	enabled?: MaybeGetter<boolean>;
 
 	/**
 	 * The type of event to use to determine a “click” with mouse input.
 	 * Keyboard clicks work as normal.
 	 * @default 'click'
 	 */
-	event?: "click" | "mousedown";
+	event?: MaybeGetter<"click" | "mousedown">;
 
 	/**
 	 * Whether to toggle the open state with repeated clicks.
 	 * @default true
 	 */
-	toggle?: boolean;
+	toggle?: MaybeGetter<boolean>;
 
 	/**
 	 * Whether to ignore the logic for mouse input (for example, if `useHover()`
@@ -33,15 +34,15 @@ interface UseClickOptions {
 	 * even once the cursor leaves. This may be not be desirable in some cases.
 	 * @default false
 	 */
-	ignoreMouse?: boolean;
+	ignoreMouse?: MaybeGetter<boolean>;
 
 	/**
 	 * Whether to add keyboard handlers (Enter and Space key functionality) for
 	 * non-button elements (to open/close the floating element via keyboard
 	 * “click”).
 	 * @default true
 	 */
-	keyboardHandlers?: boolean;
+	keyboardHandlers?: MaybeGetter<boolean>;
 }
 
 function isButtonTarget(event: KeyboardEvent) {
@@ -53,11 +54,13 @@ function isSpaceIgnored(element: ReferenceType | null) {
 }
 
 class ClickInteraction {
-	#enabled = $derived.by(() => this.options.enabled ?? "true");
-	#eventOption = $derived.by(() => this.options.event ?? "click");
-	#toggle = $derived.by(() => this.options.toggle ?? true);
-	#ignoreMouse = $derived.by(() => this.options.ignoreMouse ?? false);
-	#keyboardHandlers = $derived.by(() => this.options.keyboardHandlers ?? true);
+	#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));
+	#keyboardHandlers = $derived.by(() =>
+		extract(this.options?.keyboardHandlers, true),
+	);
 	#pointerType: PointerEvent["pointerType"] | undefined = undefined;
 	#didKeyDown = false;
 
@@ -127,10 +130,7 @@ class ClickInteraction {
 			return;
 		}
 
-		if (
-			event.key === " " &&
-			!isSpaceIgnored(this.context.elements.domReference)
-		) {
+		if (event.key === " " && !isSpaceIgnored(this.context.domReference)) {
 			// Prevent scrolling
 			event.preventDefault();
 			this.#didKeyDown = true;
@@ -150,7 +150,7 @@ class ClickInteraction {
 			event.defaultPrevented ||
 			!this.#keyboardHandlers ||
 			isButtonTarget(event) ||
-			isSpaceIgnored(this.context.elements.domReference)
+			isSpaceIgnored(this.context.domReference)
 		) {
 			return;
 		}

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

@@ -15,11 +15,12 @@ import {
 	isRootElement,
 } from "../internal/dom.js";
 import type { FloatingContext } from "./use-floating.svelte.js";
-import type { FloatingTreeType } from "../types.js";
+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";
 
 const bubbleHandlerKeys = {
 	pointerdown: "onpointerdown",
@@ -54,27 +55,27 @@ interface UseDismissOptions {
 	 * handlers.
 	 * @default true
 	 */
-	enabled?: boolean;
+	enabled?: MaybeGetter<boolean>;
 	/**
 	 * Whether to dismiss the floating element upon pressing the `esc` key.
 	 * @default true
 	 */
-	escapeKey?: boolean;
+	escapeKey?: MaybeGetter<boolean>;
 	/**
 	 * Whether to dismiss the floating element upon pressing the reference
 	 * element. You likely want to ensure the `move` option in the `useHover()`
 	 * Hook has been disabled when this is in use.
 	 * @default false
 	 */
-	referencePress?: boolean;
+	referencePress?: MaybeGetter<boolean>;
 	/**
 	 * The type of event to use to determine a “press”.
 	 * - `pointerdown` is eager on both mouse + touch input.
 	 * - `mousedown` is eager on mouse input, but lazy on touch input.
 	 * - `click` is lazy on both mouse + touch input.
 	 * @default 'pointerdown'
 	 */
-	referencePressEvent?: "pointerdown" | "mousedown" | "click";
+	referencePressEvent?: MaybeGetter<"pointerdown" | "mousedown" | "click">;
 	/**
 	 * Whether to dismiss the floating element upon pressing outside of the
 	 * floating element.
@@ -96,38 +97,46 @@ interface UseDismissOptions {
 	 * - `click` is lazy on both mouse + touch input.
 	 * @default 'pointerdown'
 	 */
-	outsidePressEvent?: "pointerdown" | "mousedown" | "click";
+	outsidePressEvent?: MaybeGetter<"pointerdown" | "mousedown" | "click">;
 	/**
 	 * Whether to dismiss the floating element upon scrolling an overflow
 	 * ancestor.
 	 * @default false
 	 */
-	ancestorScroll?: boolean;
+	ancestorScroll?: MaybeGetter<boolean>;
 	/**
 	 * Determines whether event listeners bubble upwards through a tree of
 	 * floating elements.
 	 */
-	bubbles?: boolean | { escapeKey?: boolean; outsidePress?: boolean };
+	bubbles?: MaybeGetter<
+		boolean | { escapeKey?: boolean; outsidePress?: boolean }
+	>;
 	/**
 	 * Determines whether to use capture phase event listeners.
 	 */
-	capture?: boolean | { escapeKey?: boolean; outsidePress?: boolean };
+	capture?: MaybeGetter<
+		boolean | { escapeKey?: boolean; outsidePress?: boolean }
+	>;
 }
 
 class DismissInteraction {
-	#enabled = $derived.by(() => this.options.enabled ?? true);
-	#escapeKey = $derived.by(() => this.options.escapeKey ?? true);
+	#enabled = $derived.by(() => extract(this.options.enabled, true));
+	#escapeKey = $derived.by(() => extract(this.options.escapeKey, true));
 	#unstable_outsidePress = $derived.by(() => this.options.outsidePress ?? true);
-	#outsidePressEvent = $derived.by(
-		() => this.options.outsidePressEvent ?? "pointerdown",
+	#outsidePressEvent = $derived.by(() =>
+		extract(this.options.outsidePressEvent, "pointerdown"),
 	);
-	#referencePress = $derived.by(() => this.options.referencePress ?? false);
-	#referencePressEvent = $derived.by(
-		() => this.options.referencePressEvent ?? "pointerdown",
+	#referencePress = $derived.by(() =>
+		extract(this.options.referencePress, false),
 	);
-	#ancestorScroll = $derived.by(() => this.options.ancestorScroll ?? false);
-	#bubbles = $derived.by(() => this.options.bubbles);
-	#capture = $derived.by(() => this.options.capture);
+	#referencePressEvent = $derived.by(() =>
+		extract(this.options.referencePressEvent, "pointerdown"),
+	);
+	#ancestorScroll = $derived.by(() =>
+		extract(this.options.ancestorScroll, false),
+	);
+	#bubbles = $derived.by(() => extract(this.options.bubbles));
+	#capture = $derived.by(() => extract(this.options.capture));
 
 	#outsidePressFn = $derived.by(() =>
 		typeof this.#unstable_outsidePress === "function"
@@ -184,7 +193,7 @@ class DismissInteraction {
 				);
 			};
 
-			const doc = getDocument(this.context.elements.floating);
+			const doc = getDocument(this.context.floating);
 
 			const listenersToRemove: Array<() => void> = [];
 
@@ -217,25 +226,23 @@ class DismissInteraction {
 			let ancestors: (Element | Window | VisualViewport)[] = [];
 
 			if (this.#ancestorScroll) {
-				if (isElement(this.context.elements.domReference)) {
-					ancestors = getOverflowAncestors(this.context.elements.domReference);
+				if (isElement(this.context.domReference)) {
+					ancestors = getOverflowAncestors(this.context.domReference);
 				}
 
-				if (isElement(this.context.elements.floating)) {
+				if (isElement(this.context.floating)) {
 					ancestors = ancestors.concat(
-						getOverflowAncestors(this.context.elements.floating),
+						getOverflowAncestors(this.context.floating),
 					);
 				}
 
 				if (
-					!isElement(this.context.elements.reference) &&
-					this.context.elements.reference &&
-					this.context.elements.reference.contextElement
+					!isElement(this.context.reference) &&
+					this.context.reference &&
+					this.context.reference.contextElement
 				) {
 					ancestors = ancestors.concat(
-						getOverflowAncestors(
-							this.context.elements.reference.contextElement,
-						),
+						getOverflowAncestors(this.context.reference.contextElement),
 					);
 				}
 			}
@@ -335,9 +342,9 @@ class DismissInteraction {
 
 		const target = getTarget(event);
 		const inertSelector = `[${createAttribute("inert")}]`;
-		const markers = getDocument(
-			this.context.elements.floating,
-		).querySelectorAll(inertSelector);
+		const markers = getDocument(this.context.floating).querySelectorAll(
+			inertSelector,
+		);
 
 		let targetRootAncestor = isElement(target) ? target : null;
 
@@ -355,7 +362,7 @@ class DismissInteraction {
 			isElement(target) &&
 			!isRootElement(target) &&
 			// Clicked on a direct ancestor (e.g. FloatingOverlay).
-			!contains(target, this.context.elements.floating) &&
+			!contains(target, this.context.floating) &&
 			// If the target root element contains none of the markers, then the
 			// element was injected after the floating element rendered.
 			Array.from(markers).every(
@@ -412,12 +419,12 @@ class DismissInteraction {
 		const targetIsInsideChildren =
 			children.length &&
 			children.some((node) =>
-				isEventTargetWithin(event, node.context?.elements.floating),
+				isEventTargetWithin(event, node.context?.floating),
 			);
 
 		if (
-			isEventTargetWithin(event, this.context.elements.floating) ||
-			isEventTargetWithin(event, this.context.elements.domReference) ||
+			isEventTargetWithin(event, this.context.floating) ||
+			isEventTargetWithin(event, this.context.domReference) ||
 			targetIsInsideChildren
 		) {
 			return;

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

@@ -45,10 +45,10 @@ class FloatingRootContextOptions {
 	#stableFloating = $state<HTMLElement | null>(null);
 	reference: WritableBox<Element | null>;
 	floating: WritableBox<HTMLElement | null>;
+	floatingProp = $derived.by(() => extract(this.options.floating, null));
+	referenceProp = $derived.by(() => extract(this.options.reference, null));
 
-	constructor(options: UseFloatingRootContextOptions) {
-		const floatingProp = $derived.by(() => extract(options.floating, null));
-		const referenceProp = $derived.by(() => extract(options.reference, null));
+	constructor(readonly options: UseFloatingRootContextOptions) {
 		this.open = box.with(() => extract(options.open, false));
 		this.onOpenChange = options.onOpenChange ?? noop;
 		this.onReferenceChange = options.onReferenceChange ?? noop;
@@ -68,15 +68,20 @@ class FloatingRootContextOptions {
 			},
 		);
 
-		this.reference.current = referenceProp;
-		this.floating.current = floatingProp;
+		this.reference.current = this.referenceProp;
+		this.floating.current = this.floatingProp;
 
 		$effect.pre(() => {
-			this.reference.current = referenceProp;
+			console.log("REFERENCE IN FLOATING ROOT", this.reference.current);
+			console.log("REFERENCE PROP IN FLOATING ROOT", this.referenceProp);
 		});
 
 		$effect.pre(() => {
-			this.floating.current = floatingProp;
+			this.reference.current = this.referenceProp;
+		});
+
+		$effect.pre(() => {
+			this.floating.current = this.floatingProp;
 		});
 	}
 }