@insymetri/styleguide 0.1.35 → 0.1.37

package/dist/IIContextMenu/IIContextMenu.svelte

@@ -1,45 +1,20 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
-	import {ContextMenu} from 'bits-ui'
+	import type {VirtualElement} from '@floating-ui/dom'
 	import {cn} from '../utils/cn'
 	import {IIIcon} from '../IIIcon'
-
-	type Item = {
-		label: string
-		value: string
-		icon?: Snippet
-		disabled?: boolean
-		variant?: 'default' | 'destructive'
-		shortcut?: string
-	}
-
-	type SeparatorEntry = {
-		type: 'separator'
-	}
-
-	type GroupEntry = {
-		type: 'group'
-		heading?: string
-		items: (Item | SubEntry)[]
-	}
-
-	type SubEntry = {
-		type: 'sub'
-		label: string
-		icon?: Snippet
-		disabled?: boolean
-		shortcut?: string
-		items: MenuEntry[]
-	}
-
-	type MenuEntry = Item | SeparatorEntry | GroupEntry | SubEntry
+	import {isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
+	import {useFloating, portal, clickOutside} from '../utils/menu'
+	import MenuItemContent from '../utils/menu/MenuItemContent.svelte'
+	import IIContextMenuSub from './IIContextMenuSub.svelte'
+	import IIContextMenuSubSimple from './IIContextMenuSubSimple.svelte'
 
 	type Props = {
 		items: MenuEntry[]
 		onSelect: (value: string) => void
 		open?: boolean
 		children: Snippet
-		renderItem?: Snippet<[Item]>
+		renderItem?: Snippet<[MenuItem]>
 		class?: string
 	}
 
@@ -52,103 +27,245 @@
 		class: className,
 	}: Props = $props()
 
+	let virtualRef = $state<VirtualElement | null>(null)
+	let floatingEl = $state<HTMLElement | null>(null)
+	let previousFocus = $state<HTMLElement | null>(null)
+	let openSubIndex = $state<number | null>(null)
+	let subTriggerEls: Record<number, HTMLElement | null> = {}
+
+	useFloating({
+		reference: () => virtualRef,
+		floating: () => floatingEl,
+		placement: 'bottom-start',
+		offset: 4,
+		shift: {padding: 8},
+	})
+
+	function handleContextMenu(e: MouseEvent) {
+		e.preventDefault()
+		previousFocus = document.activeElement as HTMLElement
+		openSubIndex = null
+		virtualRef = {
+			getBoundingClientRect: () => ({
+				x: e.clientX,
+				y: e.clientY,
+				width: 0,
+				height: 0,
+				top: e.clientY,
+				left: e.clientX,
+				right: e.clientX,
+				bottom: e.clientY,
+			}),
+		}
+		open = true
+	}
+
+	function close() {
+		open = false
+		openSubIndex = null
+		previousFocus?.focus()
+	}
+
 	function handleSelect(value: string) {
 		onSelect(value)
-		open = false
+		close()
 	}
 
-	function isSeparator(entry: MenuEntry): entry is SeparatorEntry {
-		return 'type' in entry && entry.type === 'separator'
+	// Focus first item when menu opens
+	$effect(() => {
+		if (open && floatingEl) {
+			requestAnimationFrame(() => {
+				const first = floatingEl?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+				first?.focus()
+			})
+		}
+	})
+
+	function getMenuItems(): HTMLElement[] {
+		if (!floatingEl) return []
+		return Array.from(floatingEl.querySelectorAll<HTMLElement>(':scope > [role="menuitem"]:not([data-disabled]), :scope > [role="group"] > [role="menuitem"]:not([data-disabled])'))
 	}
 
-	function isGroup(entry: MenuEntry): entry is GroupEntry {
-		return 'type' in entry && entry.type === 'group'
+	function focusItem(items: HTMLElement[], currentIndex: number, direction: 1 | -1) {
+		if (items.length === 0) return
+		const nextIndex = direction === 1
+			? (currentIndex >= items.length - 1 ? 0 : currentIndex + 1)
+			: (currentIndex <= 0 ? items.length - 1 : currentIndex - 1)
+		items[nextIndex]?.focus()
 	}
 
-	function isSub(entry: MenuEntry): entry is SubEntry {
-		return 'type' in entry && entry.type === 'sub'
+	function openAndFocusSub(trigger: HTMLElement) {
+		trigger.click()
+		requestAnimationFrame(() => {
+			const subContent = document.querySelector('[data-menu-sub-content]')
+			const input = subContent?.querySelector('input') as HTMLInputElement
+			if (input) {
+				input.focus()
+			} else {
+				const firstItem = subContent?.querySelector('[role="menuitem"]:not([data-disabled])') as HTMLElement
+				firstItem?.focus()
+			}
+		})
 	}
 
-	function isItem(entry: MenuEntry): entry is Item {
-		return !('type' in entry)
+	function handleMenuKeydown(e: KeyboardEvent) {
+		const menuItems = getMenuItems()
+		const currentIndex = menuItems.indexOf(document.activeElement as HTMLElement)
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault()
+				focusItem(menuItems, currentIndex, 1)
+				break
+			case 'ArrowUp':
+				e.preventDefault()
+				focusItem(menuItems, currentIndex, -1)
+				break
+			case 'Tab':
+				e.preventDefault()
+				e.stopImmediatePropagation()
+				focusItem(menuItems, currentIndex, e.shiftKey ? -1 : 1)
+				break
+			case 'Enter':
+			case ' ': {
+				e.preventDefault()
+				const focused = document.activeElement as HTMLElement
+				if (focused?.hasAttribute('aria-haspopup')) {
+					openAndFocusSub(focused)
+				} else {
+					focused?.click()
+				}
+				break
+			}
+			case 'ArrowRight': {
+				const focused = document.activeElement as HTMLElement
+				if (focused?.hasAttribute('aria-haspopup')) {
+					e.preventDefault()
+					openAndFocusSub(focused)
+				}
+				break
+			}
+			case 'Escape':
+				e.preventDefault()
+				close()
+				break
+		}
 	}
 
-	const itemClass = 'flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none'
-	const itemDefaultClass = 'text-dropdown-item hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none'
-	const itemDestructiveClass = 'text-error hover:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none'
-	const contentClass = 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 animate-slide-in motion-reduce:animate-none'
+	// Deterministic sub-index: walks the items tree and counts subs until it finds the target
+	function getSubIndex(entries: MenuEntry[], target: SubEntry): number {
+		let idx = 0
+		for (const e of entries) {
+			if (e === target) return idx
+			if (isSub(e)) idx++
+			if (isGroup(e)) {
+				for (const gi of e.items) {
+					if (gi === target) return idx
+					if (isSub(gi)) idx++
+				}
+			}
+		}
+		return -1
+	}
 </script>
 
-{#snippet itemContent(item: Item)}
+{#snippet itemContent(item: MenuItem)}
 	{#if renderItem}
 		{@render renderItem(item)}
 	{:else}
-		{#if item.icon}
-			<div class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
-				{@render item.icon()}
-			</div>
-		{/if}
-		<span class="flex-1">{item.label}</span>
-		{#if item.shortcut}
-			<span class="text-tiny text-tertiary ml-8">{item.shortcut}</span>
-		{/if}
+		<MenuItemContent icon={item.icon} label={item.label} shortcut={item.shortcut} />
 	{/if}
 {/snippet}
 
-{#snippet menuItem(item: Item)}
-	<ContextMenu.Item
-		disabled={item.disabled}
-		class={cn(itemClass, item.variant === 'destructive' ? itemDestructiveClass : itemDefaultClass)}
-		onSelect={() => handleSelect(item.value)}
+{#snippet menuItem(item: MenuItem)}
+	<div
+		role="menuitem"
+		tabindex="-1"
+		data-disabled={item.disabled ? '' : undefined}
+		class={menuItemClass({variant: item.variant})}
+		onclick={() => handleSelect(item.value)}
+		onpointerenter={(e) => {
+			openSubIndex = null
+			;(e.currentTarget as HTMLElement).focus()
+		}}
 	>
 		{@render itemContent(item)}
-	</ContextMenu.Item>
+	</div>
 {/snippet}
 
 {#snippet subMenu(entry: SubEntry)}
-	<ContextMenu.Sub>
-		<ContextMenu.SubTrigger
-			disabled={entry.disabled}
-			class={cn(itemClass, itemDefaultClass)}
-		>
-			{#if entry.icon}
-				<div class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
-					{@render entry.icon()}
-				</div>
-			{/if}
-			<span class="flex-1">{entry.label}</span>
-			{#if entry.shortcut}
-				<span class="text-tiny text-tertiary ml-8">{entry.shortcut}</span>
-			{/if}
-			<IIIcon iconName="caret-right" class="w-12 h-12 text-tertiary shrink-0" />
-		</ContextMenu.SubTrigger>
-		<ContextMenu.Portal>
-			<ContextMenu.SubContent class={contentClass}>
-				{@render menuEntries(entry.items)}
-			</ContextMenu.SubContent>
-		</ContextMenu.Portal>
-	</ContextMenu.Sub>
+	{@const subIdx = getSubIndex(items, entry)}
+	{@const isOpen = openSubIndex === subIdx}
+	<div
+		role="menuitem"
+		tabindex="-1"
+		aria-haspopup="menu"
+		aria-expanded={isOpen}
+		data-state={isOpen ? 'open' : 'closed'}
+		data-disabled={entry.disabled ? '' : undefined}
+		class={cn(menuStyles.item, menuStyles.itemDefault)}
+		bind:this={subTriggerEls[subIdx]}
+		onpointerenter={(e) => {
+			openSubIndex = subIdx
+			;(e.currentTarget as HTMLElement).focus()
+		}}
+		onpointerleave={(e) => e.stopImmediatePropagation()}
+		onclick={() => {
+			openSubIndex = isOpen ? null : subIdx
+		}}
+	>
+		<MenuItemContent icon={entry.icon} label={entry.label} shortcut={entry.shortcut} />
+		<IIIcon iconName="caret-right" class="w-12 h-12 text-tertiary shrink-0" />
+	</div>
+	{#if isOpen}
+		{#if entry.searchable}
+			<IIContextMenuSub
+				items={entry.items}
+				onSelect={handleSelect}
+				onClose={() => {
+					openSubIndex = null
+					subTriggerEls[subIdx]?.focus()
+				}}
+				triggerEl={subTriggerEls[subIdx]}
+				searchPlaceholder={entry.searchPlaceholder}
+				renderItemContent={itemContent}
+			/>
+		{:else}
+			<IIContextMenuSubSimple
+				items={entry.items}
+				onSelect={handleSelect}
+				onClose={() => {
+					openSubIndex = null
+					subTriggerEls[subIdx]?.focus()
+				}}
+				triggerEl={subTriggerEls[subIdx]}
+				renderItemContent={itemContent}
+				renderSubMenu={subMenu}
+			/>
+		{/if}
+	{/if}
 {/snippet}
 
 {#snippet menuEntries(entries: MenuEntry[])}
 	{#each entries as entry, i (i)}
 		{#if isSeparator(entry)}
-			<ContextMenu.Separator class="h-1 bg-muted mx-4 my-4" />
+			<div role="separator" class={menuStyles.separator}></div>
 		{:else if isGroup(entry)}
-			<ContextMenu.Group>
+			{@const headingId = `ctx-group-${i}`}
+			<div role="group" aria-labelledby={entry.heading ? headingId : undefined}>
 				{#if entry.heading}
-					<ContextMenu.GroupHeading class="text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none">
+					<div id={headingId} role="presentation" class={menuStyles.groupHeading}>
 						{entry.heading}
-					</ContextMenu.GroupHeading>
+					</div>
 				{/if}
 				{#each entry.items as groupItem (isItem(groupItem) ? groupItem.value : groupItem.label)}
 					{#if isSub(groupItem)}
 						{@render subMenu(groupItem)}
-					{:else}
+					{:else if isItem(groupItem)}
 						{@render menuItem(groupItem)}
 					{/if}
 				{/each}
-			</ContextMenu.Group>
+			</div>
 		{:else if isSub(entry)}
 			{@render subMenu(entry)}
 		{:else if isItem(entry)}
@@ -157,13 +274,21 @@
 	{/each}
 {/snippet}
 
-<ContextMenu.Root bind:open>
-	<ContextMenu.Trigger class="inline-block">
-		{@render children()}
-	</ContextMenu.Trigger>
-	<ContextMenu.Portal>
-		<ContextMenu.Content class={cn(contentClass, className)}>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="inline-block" oncontextmenu={handleContextMenu}>
+	{@render children()}
+</div>
+
+{#if open}
+	<div use:portal use:clickOutside={{onClose: close}}>
+		<div
+			bind:this={floatingEl}
+			role="menu"
+			data-menu-content
+			class={cn(menuStyles.content, className)}
+			onkeydown={handleMenuKeydown}
+		>
 			{@render menuEntries(items)}
-		</ContextMenu.Content>
-	</ContextMenu.Portal>
-</ContextMenu.Root>
+		</div>
+	</div>
+{/if}

package/dist/IIContextMenu/IIContextMenu.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type MenuItem, type MenuEntry } from '../utils/menu';
+type Props = {
+    items: MenuEntry[];
+    onSelect: (value: string) => void;
+    open?: boolean;
+    children: Snippet;
+    renderItem?: Snippet<[MenuItem]>;
+    class?: string;
+};
+declare const IIContextMenu: import("svelte").Component<Props, {}, "open">;
+type IIContextMenu = ReturnType<typeof IIContextMenu>;
+export default IIContextMenu;

package/dist/IIContextMenu/IIContextMenuStories.svelte

@@ -68,6 +68,8 @@
 					label: 'Status',
 					icon: statusIcon,
 					shortcut: 'S',
+					searchable: true,
+					searchPlaceholder: 'Set status...',
 					items: [
 						{label: 'To Do', value: 'status-todo', icon: circleIcon},
 						{label: 'In Progress', value: 'status-progress', icon: clockIcon},
@@ -79,6 +81,8 @@
 					label: 'Assignee',
 					icon: userIcon,
 					shortcut: 'A',
+					searchable: true,
+					searchPlaceholder: 'Assign to...',
 					items: [
 						{label: 'No assignee', value: 'assign-none', icon: userIcon},
 						{type: 'separator'},
@@ -97,6 +101,8 @@
 					label: 'Priority',
 					icon: warningIcon,
 					shortcut: 'P',
+					searchable: true,
+					searchPlaceholder: 'Set priority...',
 					items: [
 						{label: 'Urgent', value: 'priority-urgent'},
 						{label: 'High', value: 'priority-high'},
@@ -110,6 +116,8 @@
 					label: 'Labels',
 					icon: listIcon,
 					shortcut: 'L',
+					searchable: true,
+					searchPlaceholder: 'Add label...',
 					items: [
 						{label: 'Bug', value: 'label-bug'},
 						{label: 'Feature', value: 'label-feature'},

package/dist/IIContextMenu/IIContextMenuSub.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {createMenuSearch, isItem, isGroup, isSeparator, type MenuItem, type MenuEntry} from '../utils/menu'
+	import {menuStyles, menuItemClass} from '../utils/menu'
+	import {useFloating, portal} from '../utils/menu'
+	import MenuSearchInput from '../utils/menu/MenuSearchInput.svelte'
+	import MenuNoResults from '../utils/menu/MenuNoResults.svelte'
+
+	type Props = {
+		items: MenuEntry[]
+		onSelect: (value: string) => void
+		onClose: () => void
+		triggerEl: HTMLElement | null
+		searchPlaceholder?: string
+		renderItemContent: Snippet<[MenuItem]>
+	}
+
+	let {
+		items,
+		onSelect,
+		onClose,
+		triggerEl,
+		searchPlaceholder = 'Search...',
+		renderItemContent,
+	}: Props = $props()
+
+	const search = createMenuSearch({
+		getItems: () => items,
+		onSelect,
+		passthroughKeys: ['ArrowLeft'],
+	})
+
+	let floatingEl = $state<HTMLElement | null>(null)
+
+	useFloating({
+		reference: () => triggerEl,
+		floating: () => floatingEl,
+		placement: 'right-start',
+		offset: 4,
+	})
+
+	// Reset search state on mount but don't focus — focus transfers on ArrowRight or pointer enter
+	$effect(() => {
+		if (floatingEl) {
+			search.reset()
+		}
+	})
+
+	function activate() {
+		search.resetAndFocus()
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+			e.preventDefault()
+			onClose()
+			return
+		}
+		search.handleKeydown(e, '[data-menu-sub-content]')
+	}
+</script>
+
+<div use:portal>
+	<div
+		bind:this={floatingEl}
+		role="menu"
+		data-menu-content
+		data-menu-sub-content
+		class={menuStyles.searchableSubContent}
+		onpointerleave={(e) => {
+			e.stopImmediatePropagation()
+			search.inputEl?.blur()
+		}}
+		onpointerenter={() => {
+			activate()
+		}}
+	>
+		<MenuSearchInput
+			bind:inputEl={search.inputEl}
+			bind:searchQuery={search.searchQuery}
+			placeholder={searchPlaceholder}
+			onkeydown={handleKeydown}
+		/>
+		<div class={menuStyles.scrollableItems}>
+			{#each search.filteredItems as entry, i (i)}
+				{#if isSeparator(entry)}
+					<div role="separator" class={menuStyles.separator}></div>
+				{:else if isGroup(entry)}
+					{@const headingId = `menu-group-${i}`}
+					<div role="group" aria-labelledby={entry.heading ? headingId : undefined}>
+						{#if entry.heading}
+							<div id={headingId} role="presentation" class={menuStyles.groupHeading}>
+								{entry.heading}
+							</div>
+						{/if}
+						{#each entry.items.filter(isItem) as item (item.value)}
+							{@const index = search.getItemIndex(item)}
+							<div
+								role="menuitem"
+								tabindex="-1"
+								data-disabled={item.disabled ? '' : undefined}
+								class={menuItemClass({variant: item.variant, searchable: true, isHighlighted: index === search.highlightedIndex})}
+								data-search-item=""
+								onclick={() => onSelect(item.value)}
+								onpointermove={() => search.setHighlight(index)}
+							>
+								{@render renderItemContent(item)}
+							</div>
+						{/each}
+					</div>
+				{:else if isItem(entry)}
+					{@const index = search.getItemIndex(entry)}
+					<div
+						role="menuitem"
+						tabindex="-1"
+						data-disabled={entry.disabled ? '' : undefined}
+						class={menuItemClass({variant: entry.variant, searchable: true, isHighlighted: index === search.highlightedIndex})}
+						data-search-item=""
+						onclick={() => onSelect(entry.value)}
+						onpointermove={() => search.setHighlight(index)}
+					>
+						{@render renderItemContent(entry)}
+					</div>
+				{/if}
+			{/each}
+			{#if search.filteredItems.length === 0}
+				<MenuNoResults />
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/IIContextMenu/IIContextMenuSub.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type MenuItem, type MenuEntry } from '../utils/menu';
+type Props = {
+    items: MenuEntry[];
+    onSelect: (value: string) => void;
+    onClose: () => void;
+    triggerEl: HTMLElement | null;
+    searchPlaceholder?: string;
+    renderItemContent: Snippet<[MenuItem]>;
+};
+declare const IIContextMenuSub: import("svelte").Component<Props, {}, "">;
+type IIContextMenuSub = ReturnType<typeof IIContextMenuSub>;
+export default IIContextMenuSub;