feat(Menu): expose openDelay prop on *Menu.SubTrigger (#1845)

Author: huntabyte

.changeset/public-humans-behave.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat(Menu): expose `openDelay` prop on `*Menu.SubTrigger` to control open delay

docs/src/lib/content/api-reference/menu.api.ts

@@ -59,6 +59,7 @@ import {
 	defineSimpleDataAttr,
 	defineStringProp,
 	defineSimplePropSchema,
+	defineNumberProp,
 } from "../utils.js";
 
 const sharedItemProps = {
@@ -242,6 +243,11 @@ const subTriggerProps = {
 		default: false,
 		description: "Whether or not the submenu trigger is disabled.",
 	}),
+	openDelay: defineNumberProp({
+		default: 100,
+		description:
+			"The amount of time in ms from when the mouse enters the subtrigger until the submenu opens.",
+	}),
 	...omit(sharedItemProps, "closeOnSelect"),
 } satisfies PropObj<DropdownMenuSubTriggerPropsWithoutHTML>;
 

packages/bits-ui/src/lib/bits/menu/components/menu-sub-trigger.svelte

@@ -15,6 +15,7 @@
 		children,
 		child,
 		onSelect = noop,
+		openDelay = 100,
 		...restProps
 	}: MenuSubTriggerProps = $props();
 
@@ -26,6 +27,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		openDelay: boxWith(() => openDelay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, subTriggerState.props));

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

@@ -9,6 +9,7 @@ import {
 	type WritableBoxedValues,
 	simpleBox,
 	boxWith,
+	type ReadableBox,
 } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import {
@@ -609,7 +610,9 @@ export class MenuItemState {
 
 interface MenuSubTriggerStateOpts
 	extends MenuItemSharedStateOpts,
-		Pick<MenuItemStateOpts, "onSelect"> {}
+		Pick<MenuItemStateOpts, "onSelect"> {
+	openDelay: ReadableBox<number>;
+}
 
 export class MenuSubTriggerState {
 	static create(opts: MenuSubTriggerStateOpts) {
@@ -664,7 +667,7 @@ export class MenuSubTriggerState {
 			this.#openTimer = this.content.domContext.setTimeout(() => {
 				this.submenu.onOpen();
 				this.#clearOpenTimer();
-			}, 100);
+			}, this.opts.openDelay.current);
 		}
 	}
 

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

@@ -223,8 +223,22 @@ export type MenuSubContentStaticPropsWithoutHTML = Expand<
 export type MenuSubContentStaticProps = MenuSubContentStaticPropsWithoutHTML &
 	Without<BitsPrimitiveDivAttributes, MenuSubContentStaticPropsWithoutHTML>;
 
-export type MenuSubTriggerPropsWithoutHTML = Omit<MenuItemPropsWithoutHTML, "closeOnSelect">;
-export type MenuSubTriggerProps = Omit<MenuItemProps, "closeOnSelect">;
+export type MenuSubTriggerPropsWithoutHTML = Omit<MenuItemPropsWithoutHTML, "closeOnSelect"> & {
+	/**
+	 * The amount of time in ms from when the mouse enters the subtrigger until
+	 * the submenu opens. This is useful for preventing the submenu from opening
+	 * as a user is moving their mouse through the menu without a true intention to open that
+	 * submenu.
+	 *
+	 * To disable the behavior, set it to `0`.
+	 *
+	 * @default 100
+	 */
+	openDelay?: number;
+};
+
+export type MenuSubTriggerProps = MenuSubTriggerPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, MenuSubTriggerPropsWithoutHTML>;
 
 export type MenuSeparatorPropsWithoutHTML = WithChild;
 export type MenuSeparatorProps = MenuSeparatorPropsWithoutHTML &