Add support for Anchor dropdown items (#131)

Co-authored-by: Hunter Johnston <[email protected]>

.changeset/serious-spoons-heal.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+Add support for Anchor dropdown items

src/components/demos/dropdown-menu-demo.svelte

@@ -56,6 +56,7 @@
 		<DropdownMenu.Item>
 			<span>Support</span>
 		</DropdownMenu.Item>
+		<DropdownMenu.Item href="/">Anchor Link</DropdownMenu.Item>
 		<DropdownMenu.Item>
 			<span>API</span>
 		</DropdownMenu.Item>

src/content/api-reference/dropdown-menu.ts

@@ -97,6 +97,11 @@ export const item: APISchema = {
 			type: "boolean",
 			default: "false",
 			description: "Whether or not the menu item is disabled."
+		},
+		{
+			name: "href",
+			type: "string",
+			description: "An optional prop that when passed converts the dropdown item into an anchor tag."
 		}
 	],
 	dataAttributes: [

src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
+	import { createDispatcher } from "$lib/internal/events.js";
 	import { disabledAttrs } from "$lib/internal/helpers.js";
+	import { melt } from "@melt-ui/svelte";
 	import { ctx } from "../ctx.js";
 	import type { ItemEvents, ItemProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
 	type $$Props = ItemProps;
 	type $$Events = ItemEvents;
+	export let href: $$Props["href"] = undefined;
 	export let asChild = false;
 	export let disabled = false;
 	const {
@@ -20,7 +21,9 @@
 	<slot builder={$item} />
 {:else}
 	{@const builder = $item}
-	<div
+	<svelte:element
+		this={href ? "a" : "div"}
+		{href}
 		use:melt={builder}
 		{...$$restProps}
 		on:m-click={dispatch}
@@ -33,5 +36,5 @@
 		{...disabledAttrs(disabled)}
 	>
 		<slot {builder} />
-	</div>
+	</svelte:element>
 {/if}

src/lib/bits/dropdown-menu/types.ts

@@ -17,7 +17,7 @@ import type {
 	DropdownMenuRadioItemProps,
 	CreateDropdownSubmenuProps
 } from "@melt-ui/svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 
 type Props = Expand<
 	OmitOpen<CreateDropdownMenuProps> & {
@@ -61,6 +61,7 @@ type GroupProps = AsChild & HTMLDivAttributes;
 type ItemProps = Expand<
 	{
 		disabled?: boolean;
+		href?: HTMLAnchorAttributes["href"];
 	} & AsChild
 > &
 	HTMLDivAttributes;
@@ -128,52 +129,51 @@ type SubContentEvents<T extends Element = HTMLDivElement> = {
 };
 
 export type {
-	Props,
 	ArrowProps,
+	CheckboxItemEvents,
+	CheckboxItemIndicatorProps,
 	CheckboxItemProps,
+	ContentEvents,
 	ContentProps,
-	GroupProps,
-	ItemProps,
-	CheckboxItemIndicatorProps,
-	LabelProps,
-	RadioGroupProps,
-	RadioItemProps,
-	SeparatorProps,
-	SubProps,
-	SubContentProps,
-	SubTriggerProps,
-	TriggerProps,
-
-	//
-	Props as DropdownMenuProps,
 	ArrowProps as DropdownMenuArrowProps,
+	CheckboxItemEvents as DropdownMenuCheckboxItemEvents,
+	CheckboxItemIndicatorProps as DropdownMenuCheckboxItemIndicatorProps,
 	CheckboxItemProps as DropdownMenuCheckboxItemProps,
+	ContentEvents as DropdownMenuContentEvents,
 	ContentProps as DropdownMenuContentProps,
 	GroupProps as DropdownMenuGroupProps,
+	ItemEvents as DropdownMenuItemEvents,
 	ItemProps as DropdownMenuItemProps,
-	CheckboxItemIndicatorProps as DropdownMenuCheckboxItemIndicatorProps,
 	LabelProps as DropdownMenuLabelProps,
+	//
+	Props as DropdownMenuProps,
 	RadioGroupProps as DropdownMenuRadioGroupProps,
+	RadioItemEvents as DropdownMenuRadioItemEvents,
 	RadioItemProps as DropdownMenuRadioItemProps,
 	SeparatorProps as DropdownMenuSeparatorProps,
-	SubProps as DropdownMenuSubProps,
+	SubContentEvents as DropdownMenuSubContentEvents,
 	SubContentProps as DropdownMenuSubContentProps,
+	SubProps as DropdownMenuSubProps,
+	SubTriggerEvents as DropdownMenuSubTriggerEvents,
 	SubTriggerProps as DropdownMenuSubTriggerProps,
+	//,
+	TriggerEvents as DropdownMenuTriggerEvents,
 	TriggerProps as DropdownMenuTriggerProps,
-	//
-	TriggerEvents,
-	CheckboxItemEvents,
-	ContentEvents,
+	GroupProps,
+	ItemEvents,
+	ItemProps,
+	LabelProps,
+	Props,
+	RadioGroupProps,
 	RadioItemEvents,
+	RadioItemProps,
+	SeparatorProps,
 	SubContentEvents,
+	SubContentProps,
+	SubProps,
 	SubTriggerEvents,
-	ItemEvents,
-	//,
-	TriggerEvents as DropdownMenuTriggerEvents,
-	CheckboxItemEvents as DropdownMenuCheckboxItemEvents,
-	ContentEvents as DropdownMenuContentEvents,
-	RadioItemEvents as DropdownMenuRadioItemEvents,
-	SubContentEvents as DropdownMenuSubContentEvents,
-	SubTriggerEvents as DropdownMenuSubTriggerEvents,
-	ItemEvents as DropdownMenuItemEvents
+	SubTriggerProps,
+	//
+	TriggerEvents,
+	TriggerProps
 };