next: Nav Menu Improvements

packages/bits-ui/src/lib/bits/index.ts

@@ -19,6 +19,7 @@ export { Label } from "./label/index.js";
 export { LinkPreview } from "./link-preview/index.js";
 export { Menubar } from "./menubar/index.js";
 export { NavigationMenu } from "./navigation-menu/index.js";
+export { NavigationMenu as NavMenu } from "./navigation-menu-2/index.js";
 export { Pagination } from "./pagination/index.js";
 export { PinInput } from "./pin-input/index.js";
 export { Popover } from "./popover/index.js";

packages/bits-ui/src/lib/bits/navigation-menu-2/components/navigation-menu-content-impl.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { untrack } from "svelte";
+	import type { NavigationMenuContentProps } from "../types.js";
+	import {
+		NavigationMenuItemState,
+		useNavigationMenuContentImpl,
+	} from "../navigation-menu.svelte.js";
+	import { noop } from "$lib/internal/noop.js";
+	import { useId } from "$lib/internal/use-id.js";
+	import DismissibleLayer from "$lib/bits/utilities/dismissible-layer/dismissible-layer.svelte";
+	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
+
+	let {
+		ref = $bindable(null),
+		id = useId(),
+		child: _child,
+		children: _childrenProp,
+		onInteractOutside = noop,
+		onFocusOutside = noop,
+		onEscapeKeydown = noop,
+		escapeKeydownBehavior = "close",
+		interactOutsideBehavior = "close",
+		itemState,
+		onRefChange,
+		...restProps
+	}: NavigationMenuContentProps & {
+		itemState?: NavigationMenuItemState;
+		onRefChange?: (ref: HTMLElement | null) => void;
+	} = $props();
+
+	const contentImplState = useNavigationMenuContentImpl(
+		{
+			id: box.with(() => id),
+			ref: box.with(
+				() => ref,
+				(v) => {
+					ref = v;
+					untrack(() => onRefChange?.(v));
+				}
+			),
+		},
+		itemState
+	);
+
+	const mergedProps = $derived(mergeProps(restProps, contentImplState.props));
+</script>
+
+<DismissibleLayer
+	{id}
+	enabled={true}
+	onInteractOutside={(e) => {
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+		contentImplState.onInteractOutside(e);
+	}}
+	onFocusOutside={(e) => {
+		onFocusOutside(e);
+		if (e.defaultPrevented) return;
+		contentImplState.onFocusOutside(e);
+	}}
+	{interactOutsideBehavior}
+>
+	{#snippet children({ props: dismissibleProps })}
+		<EscapeLayer
+			enabled={true}
+			onEscapeKeydown={(e) => {
+				onEscapeKeydown(e);
+				if (e.defaultPrevented) return;
+				contentImplState.onEscapeKeydown(e);
+			}}
+			{escapeKeydownBehavior}
+		>
+			{@const finalProps = mergeProps(mergedProps, dismissibleProps)}
+			{#if contentImplState.itemContext.contentChild.current}
+				{@render contentImplState.itemContext.contentChild.current?.({ props: finalProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render contentImplState.itemContext.contentChildren.current?.()}
+				</div>
+			{/if}
+		</EscapeLayer>
+	{/snippet}
+</DismissibleLayer>

packages/bits-ui/src/lib/bits/navigation-menu-2/components/navigation-menu-content.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useNavigationMenuContent } from "../navigation-menu.svelte.js";
+	import NavigationMenuContentImpl from "./navigation-menu-content-impl.svelte";
+	import NavigationMenuViewportContentMounter from "./navigation-menu-viewport-content-mounter.svelte";
+	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
+	import { useId } from "$lib/internal/use-id.js";
+	import type { NavigationMenuContentProps } from "$lib/types.js";
+
+	let {
+		ref = $bindable(null),
+		id = useId(),
+		forceMount = false,
+		children,
+		child,
+		...restProps
+	}: NavigationMenuContentProps = $props();
+
+	const contentState = useNavigationMenuContent({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if !contentState.context.viewportRef.current}
+	<PresenceLayer {id} present={forceMount || contentState.open}>
+		{#snippet presence()}
+			<NavigationMenuContentImpl {...mergedProps} {children} {child} />
+		{/snippet}
+	</PresenceLayer>
+{:else}
+	<NavigationMenuViewportContentMounter {children} {child} {...mergedProps} />
+{/if}

packages/bits-ui/src/lib/bits/navigation-menu-2/components/navigation-menu-indicator-impl.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { NavigationMenuIndicatorProps } from "../types.js";
+	import { useNavigationMenuIndicatorImpl } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: NavigationMenuIndicatorProps = $props();
+
+	const indicatorState = useNavigationMenuIndicatorImpl({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, indicatorState.props));
+</script>
+
+{#if indicatorState.position}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+{/if}

packages/bits-ui/src/lib/bits/navigation-menu-2/components/navigation-menu-indicator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import type { NavigationMenuIndicatorProps } from "../types.js";
+	import { useNavigationMenuIndicator } from "../navigation-menu.svelte.js";
+	import NavigationMenuIndicatorImpl from "./navigation-menu-indicator-impl.svelte";
+	import { useId } from "$lib/internal/use-id.js";
+	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
+	import Portal from "$lib/bits/utilities/portal/portal.svelte";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		forceMount = false,
+		...restProps
+	}: NavigationMenuIndicatorProps = $props();
+
+	const indicatorState = useNavigationMenuIndicator();
+	const mergedProps = $derived(mergeProps(restProps));
+</script>
+
+{#if indicatorState.context.indicatorTrackRef.current}
+	<Portal to={indicatorState.context.indicatorTrackRef.current}>
+		<PresenceLayer {id} present={forceMount || indicatorState.isVisible}>
+			{#snippet presence()}
+				<NavigationMenuIndicatorImpl {...mergedProps} {children} {child} {id} bind:ref />
+			{/snippet}
+		</PresenceLayer>
+	</Portal>
+{/if}

packages/bits-ui/src/lib/bits/navigation-menu-2/components/navigation-menu-item.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { NavigationMenuItemProps } from "../types.js";
+	import { useNavigationMenuItem } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+
+	let {
+		id = useId(),
+		value = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		...restProps
+	}: NavigationMenuItemProps = $props();
+
+	const itemState = useNavigationMenuItem({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: box.with(() => value),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<li {...mergedProps}>
+		{@render children?.()}
+	</li>
+{/if}

packages/bits-ui/src/lib/bits/navigation-menu-2/components/navigation-menu-link.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { NavigationMenuLinkProps } from "../types.js";
+	import { useNavigationMenuLink } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+	import { noop } from "$lib/internal/noop.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		active = false,
+		onSelect = noop,
+		...restProps
+	}: NavigationMenuLinkProps = $props();
+
+	const linkState = useNavigationMenuLink({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		active: box.with(() => active),
+		onSelect: box.with(() => onSelect),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, linkState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}

packages/bits-ui/src/lib/bits/navigation-menu-2/components/navigation-menu-list.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { NavigationMenuListProps } from "../types.js";
+	import { useNavigationMenuList } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+
+	let {
+		id = useId(),
+		children,
+		child,
+		ref = $bindable(null),
+		...restProps
+	}: NavigationMenuListProps = $props();
+
+	const listState = useNavigationMenuList({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, listState.props));
+	const wrapperProps = $derived(mergeProps(listState.wrapperProps));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, wrapperProps })}
+{:else}
+	<div {...wrapperProps}>
+		<ul {...mergedProps}>
+			{@render children?.()}
+		</ul>
+	</div>
+{/if}

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { NavigationMenuSubProps } from "../types.js";
+	import { useNavigationMenuSub } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/use-id.js";
+	import { noop } from "$lib/internal/noop.js";
+
+	let {
+		child,
+		children,
+		id = useId(),
+		ref = $bindable(null),
+		value = $bindable(""),
+		onValueChange = noop,
+		orientation = "horizontal",
+		controlledValue = false,
+		...restProps
+	}: NavigationMenuSubProps = $props();
+
+	const rootState = useNavigationMenuSub({
+		id: box.with(() => id),
+		value: box.with(
+			() => value,
+			(v) => {
+				if (controlledValue) {
+					onValueChange(v);
+				} else {
+					value = v;
+					onValueChange(v);
+				}
+			}
+		),
+		orientation: box.with(() => orientation),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}