Merge pull request #37 from huntabyte/fix/menubar

huntabyte · Aug 14, 2023 · e5c2e92 · e5c2e92
2 parents 87d896f + 3c326a2
commit e5c2e92
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 8 deletions.
diff --git a/.changeset/ten-fireants-try.md b/.changeset/ten-fireants-try.md
@@ -0,0 +1,5 @@
+---
+"@huntabyte/primitives": patch
+---
+
+Fix menubar kbd navigation bug
diff --git a/src/lib/primitives/hover-card/components/HoverCard.svelte b/src/lib/primitives/hover-card/components/HoverCard.svelte
@@ -6,8 +6,8 @@
 	export let positioning: $$Props["positioning"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let openDelay: $$Props["openDelay"] = undefined;
-	export let closeDelay: $$Props["closeDelay"] = undefined;
+	export let openDelay: $$Props["openDelay"] = 700;
+	export let closeDelay: $$Props["closeDelay"] = 300;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let arrowSize: $$Props["arrowSize"] = undefined;

diff --git a/src/lib/primitives/menubar/components/MenubarMenu.svelte b/src/lib/primitives/menubar/components/MenubarMenu.svelte
@@ -6,7 +6,6 @@
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
@@ -28,8 +27,8 @@
 		loop,
 		dir,
 		onOpenChange: ({ next }) => {
-			open = next;
 			onOpenChange?.(next);
+			open = next;
 			return next;
 		}
 	});
@@ -38,7 +37,6 @@
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
-	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("preventScroll", preventScroll);
 	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("positioning", positioning);

diff --git a/src/lib/primitives/menubar/ctx.ts b/src/lib/primitives/menubar/ctx.ts
@@ -63,7 +63,7 @@ function setMenu(props: CreateMenubarMenuProps) {
 		builders: { createMenu }
 	} = get();
 
-	const menu = createMenu({ ...removeUndefined(props), forceVisible: false });
+	const menu = createMenu(removeUndefined(props));
 	setContext(MENU_NAME, menu);
 	return {
 		...menu,

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import * as Select from "$lib/primitives/select";
+	import * as Select from "@/primitives/select";
+	import * as Menubar from "@/primitives/menubar";
 	const fruits = [
 		{ value: "apple", label: "Apple" },
 		{ value: "banana", label: "Banana" },
@@ -34,3 +35,112 @@
 		<Select.Input name="favoriteFruit" />
 	</Select.Root>
 </div>
+
+<div class="flex min-h-[500px] p-12 bg-neutral-800">
+	<Menubar.Root>
+		<Menubar.Menu>
+			<Menubar.Trigger
+				class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-emerald-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none overflow-visible data-[highlighted]:bg-emerald-200 data-[highlighted]:ring-green-400 cursor-default text-sm font-medium leading-none focus:z-30 focus:ring"
+				>File</Menubar.Trigger
+			>
+			<Menubar.Content
+				class="z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30 rounded-md bg-white p-1 lg:max-h-none"
+			>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Single F</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Double F</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Triple F</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Fourth F</Menubar.Item
+				>
+			</Menubar.Content>
+		</Menubar.Menu>
+		<Menubar.Menu>
+			<Menubar.Trigger
+				class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-emerald-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none overflow-visible data-[highlighted]:bg-emerald-200 data-[highlighted]:ring-green-400 cursor-default text-sm font-medium leading-none focus:z-30 focus:ring"
+				>Edit</Menubar.Trigger
+			>
+			<Menubar.Content
+				class="z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30 rounded-md bg-white p-1 lg:max-h-none"
+			>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Single E</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Double E</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Triple E</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Fourth E</Menubar.Item
+				>
+			</Menubar.Content>
+		</Menubar.Menu>
+		<Menubar.Menu>
+			<Menubar.Trigger
+				class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-emerald-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none overflow-visible data-[highlighted]:bg-emerald-200 data-[highlighted]:ring-green-400 cursor-default text-sm font-medium leading-none focus:z-30 focus:ring"
+				>View</Menubar.Trigger
+			>
+			<Menubar.Content
+				class="z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30 rounded-md bg-white p-1 lg:max-h-none"
+			>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Single V</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Double V</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Triple V</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Fourth V</Menubar.Item
+				>
+			</Menubar.Content>
+		</Menubar.Menu>
+		<Menubar.Menu>
+			<Menubar.Trigger
+				class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-emerald-900 transition-colors hover:bg-white/90 data-[highlighted]:outline-none overflow-visible data-[highlighted]:bg-emerald-200 data-[highlighted]:ring-green-400 cursor-default text-sm font-medium leading-none focus:z-30 focus:ring"
+				>Help</Menubar.Trigger
+			>
+			<Menubar.Content
+				class="z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg shadow-neutral-900/30 rounded-md bg-white p-1 lg:max-h-none"
+			>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Single H</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Double H</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Triple H</Menubar.Item
+				>
+				<Menubar.Item
+					class="relative h-6 min-h-[24px] select-none rounded-sm pl-6 pr-1 z-20 text-emerald-900 outline-none data-[highlighted]:bg-emerald-200 data-[highlighted]:text-green-900 data-[dsiabled]:text-neutral-300 flex items-center text-sm leading-none cursor-default ring-0"
+					>Fourth H</Menubar.Item
+				>
+			</Menubar.Content>
+		</Menubar.Menu>
+	</Menubar.Root>
+</div>
diff --git a/svelte.config.js b/svelte.config.js
@@ -13,7 +13,9 @@ const config = {
 			$lib: "src/lib",
 			"$lib/*": "src/lib/*",
 			$internal: "src/lib/internal",
-			"$internal/*": "src/lib/internal/*"
+			"$internal/*": "src/lib/internal/*",
+			"@/": "src/lib",
+			"@/*": "src/lib/*"
 		}
 	}
 };