Feature: Sync external elements

.changeset/twelve-tables-press.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/floating-ui-svelte": patch
+---
+
+Ensures referenced dom elements are synced externally.

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

@@ -332,11 +332,17 @@ function useFloating(options: UseFloatingOptions = {}): UseFloatingReturn {
 	};
 
 	$effect.pre(() => {
-		elements.reference = options.elements?.reference;
+		if (!options.elements || !options.elements.reference) {
+			return;
+		}
+		elements.reference = options.elements.reference;
 	});
 
 	$effect.pre(() => {
-		elements.floating = options.elements?.floating;
+		if (!options.elements || !options.elements.floating) {
+			return;
+		}
+		elements.floating = options.elements.floating;
 	});
 
 	$effect.pre(() => {

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

@@ -85,6 +85,25 @@ describe("useFloating", () => {
 				});
 			}),
 		);
+		it(
+			"is synced externally",
+			withRunes(() => {
+				const elements = $state(createElements());
+
+				const floating = useFloating({
+					get elements() {
+						return elements;
+					},
+				});
+
+				const newElements = createElements();
+
+				floating.elements.reference = newElements.reference;
+				floating.elements.floating = newElements.floating;
+
+				expect(elements).toEqual(newElements);
+			}),
+		);
 	});
 
 	describe("transform", () => {