more

Author: huntabyte

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

@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>

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}

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

@@ -15,16 +15,13 @@
 		...restProps
 	}: NavigationMenuTriggerProps = $props();
 
-	let focusProxyMounted = $state(false);
-
 	const triggerState = useNavigationMenuTrigger({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled ?? false),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
-		focusProxyMounted: box.with(() => focusProxyMounted),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
@@ -39,9 +36,9 @@
 {/if}
 
 {#if triggerState.open}
-	<Mounted bind:isMounted={focusProxyMounted} />
-	<VisuallyHidden {...triggerState.visuallyHiddenProps} />
-	{#if triggerState.menu.viewportNode}
-		<span aria-owns={triggerState.item.contentNode?.id ?? undefined}></span>
+	<Mounted onMountedChange={(m) => (triggerState.focusProxyMounted = m)} />
+	<VisuallyHidden {...triggerState.focusProxyProps} />
+	{#if triggerState.context.viewportRef.current}
+		<span aria-owns={triggerState.itemContext.contentId ?? undefined}></span>
 	{/if}
 {/if}

packages/bits-ui/src/lib/bits/navigation-menu-2/exports.ts

@@ -16,4 +16,5 @@ export type {
 	NavigationMenuIndicatorProps as IndicatorProps,
 	NavigationMenuContentProps as ContentProps,
 	NavigationMenuLinkProps as LinkProps,
+	NavigationMenuSubProps as SubProps,
 } from "./types.js";