Merge branch 'huntabyte:main' into select-align-item

Author: maxffarrell

packages/bits-ui/CHANGELOG.md

@@ -1,5 +1,15 @@
 # bits-ui
 
+## 2.18.1
+
+### Patch Changes
+
+- fix(text-selection-layer): snapshot enabled and pointer handlers for listeners ([#2041](https://github.com/huntabyte/bits-ui/pull/2041))
+
+- fix(Tooltip): set wrapper pointer-events when hoverable content is disabled ([#2041](https://github.com/huntabyte/bits-ui/pull/2041))
+
+- fix(Menu): prevent page scroll-jump on item hover when `scroll-padding` is set ([#2035](https://github.com/huntabyte/bits-ui/pull/2035))
+
 ## 2.18.0
 
 ### Minor Changes

packages/bits-ui/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bits-ui",
-	"version": "2.18.0",
+	"version": "2.18.1",
 	"license": "MIT",
 	"repository": "github:huntabyte/bits-ui",
 	"funding": "https://github.com/sponsors/huntabyte",

packages/bits-ui/src/lib/bits/menu/menu.svelte.ts

@@ -1117,7 +1117,7 @@ export class MenuContentState {
 		if (this.#isPointerMovingToSubmenu() || this.parentMenu.root.isUsingKeyboard.current)
 			return;
 		const contentNode = this.parentMenu.contentNode;
-		contentNode?.focus();
+		contentNode?.focus({ preventScroll: true });
 		this.rovingFocusGroup.setCurrentTabStopId("");
 	}
 
@@ -1213,7 +1213,7 @@ class MenuItemSharedState {
 			if (defaultPrevented) return;
 			const item = e.currentTarget;
 			if (!isHTMLElement(item)) return;
-			item.focus();
+			item.focus({ preventScroll: true });
 		}
 	}
 

packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content.svelte

@@ -74,15 +74,20 @@
 		contentPointerEvents={contentState.root.disableHoverableContent ? "none" : "auto"}
 	>
 		{#snippet popper({ props, wrapperProps })}
+			{@const finalWrapperProps = mergeProps(wrapperProps, {
+				style: {
+					pointerEvents: contentState.root.disableHoverableContent ? "none" : undefined,
+				},
+			})}
 			{@const finalProps = mergeProps(
 				props,
 				{ style: getFloatingContentCSSVars("tooltip") },
 				{ style }
 			)}
 			{#if child}
-				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps: finalWrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...wrapperProps}>
+				<div {...finalWrapperProps}>
 					<div {...finalProps}>
 						{@render children?.()}
 					</div>
@@ -106,15 +111,20 @@
 		contentPointerEvents={contentState.root.disableHoverableContent ? "none" : "auto"}
 	>
 		{#snippet popper({ props, wrapperProps })}
+			{@const finalWrapperProps = mergeProps(wrapperProps, {
+				style: {
+					pointerEvents: contentState.root.disableHoverableContent ? "none" : undefined,
+				},
+			})}
 			{@const finalProps = mergeProps(
 				props,
 				{ style: getFloatingContentCSSVars("tooltip") },
 				{ style }
 			)}
 			{#if child}
-				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps: finalWrapperProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...wrapperProps}>
+				<div {...finalWrapperProps}>
 					<div {...finalProps}>
 						{@render children?.()}
 					</div>

packages/bits-ui/src/lib/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.ts

@@ -8,10 +8,12 @@ import {
 } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
-import type { TextSelectionLayerImplProps } from "./types.js";
+import type { PointerHandler, TextSelectionLayerImplProps } from "./types.js";
 import { noop } from "$lib/internal/noop.js";
 import { isHTMLElement } from "$lib/internal/is.js";
 
+const noopPointer: PointerHandler = () => {};
+
 interface TextSelectionLayerStateOpts
 	extends ReadableBoxedValues<
 		Required<
@@ -30,6 +32,9 @@ export class TextSelectionLayerState {
 	readonly opts: TextSelectionLayerStateOpts;
 	readonly domContext: DOMContext;
 	#unsubSelectionLock = noop;
+	#enabledSnapshot = false;
+	#onPointerDownSnapshot: PointerHandler = noopPointer;
+	#onPointerUpSnapshot: PointerHandler = noopPointer;
 
 	constructor(opts: TextSelectionLayerStateOpts) {
 		this.opts = opts;
@@ -38,14 +43,24 @@ export class TextSelectionLayerState {
 		let unsubEvents = noop;
 
 		watch(
-			() => this.opts.enabled.current,
-			(isEnabled) => {
-				if (isEnabled) {
+			() =>
+				[
+					this.opts.enabled.current,
+					this.opts.onPointerDown.current,
+					this.opts.onPointerUp.current,
+				] as const,
+			([enabled, onPointerDown, onPointerUp]) => {
+				this.#enabledSnapshot = enabled;
+				this.#onPointerDownSnapshot = onPointerDown;
+				this.#onPointerUpSnapshot = onPointerUp;
+
+				if (enabled) {
 					globalThis.bitsTextSelectionLayers.set(this, this.opts.enabled);
 					unsubEvents();
 					unsubEvents = this.#addEventListeners();
 				}
 				return () => {
+					this.#enabledSnapshot = false;
 					unsubEvents();
 					this.#resetSelectionLock();
 					globalThis.bitsTextSelectionLayers.delete(this);
@@ -60,22 +75,26 @@ export class TextSelectionLayerState {
 			on(
 				this.domContext.getDocument(),
 				"pointerup",
-				composeHandlers(this.#resetSelectionLock, this.opts.onPointerUp.current)
+				composeHandlers(this.#resetSelectionLock, this.#pointerupUserHandler)
 			)
 		);
 	}
 
+	#pointerupUserHandler = (e: PointerEvent) => {
+		this.#onPointerUpSnapshot(e);
+	};
+
 	#pointerdown = (e: PointerEvent) => {
 		const node = this.opts.ref.current;
 		const target = e.target;
-		if (!isHTMLElement(node) || !isHTMLElement(target) || !this.opts.enabled.current) return;
+		if (!isHTMLElement(node) || !isHTMLElement(target) || !this.#enabledSnapshot) return;
 		/**
 		 * We only lock user-selection overflow if layer is the top most layer and
 		 * pointerdown occurred inside the node. You are still allowed to select text
 		 * outside the node provided pointerdown occurs outside the node.
 		 */
 		if (!isHighestLayer(this) || !contains(node, target)) return;
-		this.opts.onPointerDown.current(e);
+		this.#onPointerDownSnapshot(e);
 		if (e.defaultPrevented) return;
 		this.#unsubSelectionLock = preventTextSelectionOverflow(
 			node,

tests/src/tests/dropdown-menu/dropdown-menu-scroll-padding-test.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import { DropdownMenu } from "bits-ui";
+	export type DropdownMenuScrollPaddingTestProps = {
+		contentProps?: Omit<DropdownMenu.ContentProps, "children" | "child">;
+	};
+</script>
+
+<script lang="ts">
+	let { contentProps = {} }: DropdownMenuScrollPaddingTestProps = $props();
+	const rows = Array.from({ length: 80 }, (_, i) => i + 1);
+</script>
+
+<svelte:head>
+	<style>
+		:root {
+			scroll-padding-top: 200px;
+		}
+	</style>
+</svelte:head>
+
+<div data-testid="page">
+	{#each rows as row, i (i)}
+		<div style="height: 24px;">Row {row}</div>
+	{/each}
+
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger data-testid="trigger">Open</DropdownMenu.Trigger>
+		<DropdownMenu.Portal>
+			<DropdownMenu.Content {...contentProps} data-testid="content" preventScroll={false}>
+				<DropdownMenu.Item data-testid="item-1">Item 1</DropdownMenu.Item>
+				<DropdownMenu.Item data-testid="item-2">Item 2</DropdownMenu.Item>
+				<DropdownMenu.Item data-testid="item-3">Item 3</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu.Portal>
+	</DropdownMenu.Root>
+
+	{#each rows as row, i (i)}
+		<div style="height: 24px;">After row {row}</div>
+	{/each}
+</div>

tests/src/tests/dropdown-menu/dropdown-menu.browser.test.ts

@@ -14,6 +14,7 @@ import {
 } from "../browser-utils";
 import DropdownMenuTest from "./dropdown-menu-test.svelte";
 import DropdownMenuMultipleTest from "./dropdown-menu-multiple-test.svelte";
+import DropdownMenuScrollPaddingTest from "./dropdown-menu-scroll-padding-test.svelte";
 
 const kbd = getTestKbd();
 const OPEN_KEYS = [kbd.ENTER, kbd.ARROW_DOWN, kbd.SPACE];
@@ -762,3 +763,40 @@ it("keyboard navigation should not cause unwanted jumps between menus", async ()
 	await userEvent.keyboard(kbd.ARROW_DOWN);
 	await expectNotExists(content1);
 });
+
+it("should call `focus` with `preventScroll: true` on hover and item-leave so `scroll-padding` does not scroll the page", async () => {
+	const t = render(DropdownMenuScrollPaddingTest);
+	onTestFinished(() => t.unmount());
+
+	await page.getByTestId("trigger").click();
+	await expectExists(page.getByTestId("content"));
+
+	const focusSpy = vi.spyOn(HTMLElement.prototype, "focus");
+	try {
+		const scrollYBeforeHover = window.scrollY;
+		// hover one item then another to trigger both onpointermove (item focus)
+		// and onItemLeave (content focus)
+		await page.getByTestId("item-1").hover();
+		await page.getByTestId("item-2").hover();
+
+		const relevantCalls = focusSpy.mock.calls
+			.map(([options], i) => ({
+				options,
+				testid: (focusSpy.mock.contexts[i] as HTMLElement).getAttribute("data-testid"),
+			}))
+			.filter(
+				({ testid }) => testid === "item-1" || testid === "item-2" || testid === "content"
+			);
+
+		expect(window.scrollY).toBe(scrollYBeforeHover);
+		expect(relevantCalls).toEqual(
+			expect.arrayContaining([
+				{ testid: "item-1", options: { preventScroll: true } },
+				{ testid: "item-2", options: { preventScroll: true } },
+				{ testid: "content", options: { preventScroll: true } },
+			])
+		);
+	} finally {
+		focusSpy.mockRestore();
+	}
+});