useMergeRefs

Author: huntabyte

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

@@ -0,0 +1,67 @@
+import type { ReferenceType } from "../types.js";
+import { FloatingState } from "./use-floating.svelte.js";
+
+interface BoxedRef {
+	current: ReferenceType | null;
+}
+
+/**
+ * Merges the references of either floating instances or refs into a single reference
+ * that can be accessed and set via the `.current` property.
+ */
+class MergeRefs {
+	#current = $state<ReferenceType | null>(null);
+	constructor(
+		private readonly floatingOrRef: Array<FloatingState | BoxedRef>,
+	) {}
+
+	get current() {
+		return this.#current;
+	}
+
+	set current(node: ReferenceType | null) {
+		for (const arg of this.floatingOrRef) {
+			if (arg instanceof FloatingState) {
+				arg.reference = node;
+				continue;
+			}
+			arg.current = node;
+		}
+		this.#current = node;
+	}
+}
+
+/**
+ * Use the same reference for multiple floating instances at once.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useMergeRefs, useFloating, type BoxedRef } from "@skeletonlabs/floating-ui-svelte";
+ *   const tooltip = useFloating();
+ *   const menu = useFloating()
+ *
+ *   let someOtherRef: BoxedRef = $state({ current: null })
+ *
+ *   const tooltipInt = useInteractions([])
+ *   const menuInt = useInteractions([])
+ *
+ *   const ref = useMergeRefs([tooltip, menu, someOtherRef])
+ *   const props = $derived(tooltipInt.getReferenceProps(menuInt.getReferenceProps()))
+ * </script>
+ *
+ * <button bind:this={ref.current} {...props}>
+ * 	<!-- ... -->
+ * </button>
+ *```
+ *
+ *
+ * @param floatingInstances
+ * @returns
+ */
+function useMergeRefs(refLikes: Array<FloatingState | BoxedRef>) {
+	return new MergeRefs(refLikes);
+}
+
+export { MergeRefs, useMergeRefs };
+export type { BoxedRef };

…oating-ui-svelte/test/hooks/use-click.ts …g-ui-svelte/test/hooks/use-click.test.tspackages/floating-ui-svelte/test/hooks/use-click.ts renamed to packages/floating-ui-svelte/test/hooks/use-click.test.ts packages/floating-ui-svelte/test/hooks/use-click.ts renamed to packages/floating-ui-svelte/test/hooks/use-click.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it, vi } from "vitest";
+import { useFloating } from "../../src/index.js";
+import { withRunes } from "../internal/with-runes.svelte.js";
+import {
+	useMergeRefs,
+	type BoxedRef,
+} from "../../src/hooks/use-merge-refs.svelte.js";
+
+describe("useMergeRefs", () => {
+	vi.mock(import("svelte"), async (importOriginal) => {
+		const actual = await importOriginal();
+		return {
+			...actual,
+			getContext: vi.fn().mockReturnValue(null),
+		};
+	});
+
+	it(
+		"merges the references of multiple floating instances or other boxed elements",
+		withRunes(() => {
+			const ref1 = useFloating();
+			const ref2 = useFloating();
+			const ref3: BoxedRef = $state({ current: null });
+
+			const mergedRef = useMergeRefs([ref1, ref2, ref3]);
+			expect(mergedRef.current).toBe(null);
+			expect(ref1.reference).toBe(null);
+			expect(ref2.reference).toBe(null);
+			expect(ref3.current).toBe(null);
+
+			const node = document.createElement("div");
+			mergedRef.current = node;
+			expect(mergedRef.current).toBe(node);
+			expect(ref1.reference).toBe(node);
+			expect(ref2.reference).toBe(node);
+			expect(ref3.current).toBe(node);
+			mergedRef.current = null;
+			expect(mergedRef.current).toBe(null);
+			expect(ref1.reference).toBe(null);
+			expect(ref2.reference).toBe(null);
+			expect(ref3.current).toBe(null);
+		}),
+	);
+});