@insymetri/styleguide 0.1.35 → 0.1.37

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -1,39 +1,27 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
-	import {DropdownMenu} from 'bits-ui'
 	import {cn} from '../utils/cn'
 	import {IIIcon} from '../IIIcon'
-
-	type Item = {
-		label: string
-		value: string
-		icon?: Snippet
-		disabled?: boolean
-		variant?: 'default' | 'destructive'
-	}
-
-	type SeparatorEntry = {
-		type: 'separator'
-	}
-
-	type GroupEntry = {
-		type: 'group'
-		heading?: string
-		items: Item[]
-	}
-
-	type MenuEntry = Item | SeparatorEntry | GroupEntry
+	import {createMenuSearch, 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 MenuSearchInput from '../utils/menu/MenuSearchInput.svelte'
+	import MenuNoResults from '../utils/menu/MenuNoResults.svelte'
+	import IIDropdownMenuSub from './IIDropdownMenuSub.svelte'
+	import IIDropdownMenuSubSimple from './IIDropdownMenuSubSimple.svelte'
 
 	type Props = {
 		items: MenuEntry[]
 		onSelect: (value: string) => void
 		open?: boolean
 		children?: Snippet
-		renderItem?: Snippet<[Item]>
+		renderItem?: Snippet<[MenuItem]>
 		side?: 'top' | 'right' | 'bottom' | 'left'
 		align?: 'start' | 'center' | 'end'
 		collisionPadding?: number
 		triggerClass?: string
+		searchable?: boolean
+		searchPlaceholder?: string
 		class?: string
 	}
 
@@ -47,98 +35,299 @@
 		align = 'end',
 		collisionPadding = 8,
 		triggerClass,
+		searchable = false,
+		searchPlaceholder = 'Search...',
 		class: className,
 	}: Props = $props()
 
+	let triggerEl = $state<HTMLElement | null>(null)
+	let floatingEl = $state<HTMLElement | null>(null)
+	let openSubIndex = $state<number | null>(null)
+	let subTriggerEls: Record<number, HTMLElement | null> = {}
+
+	const placement = $derived(align === 'center' ? side : `${side}-${align}` as const)
+
+	useFloating({
+		reference: () => triggerEl,
+		floating: () => floatingEl,
+		placement: placement as any,
+		offset: 4,
+		shift: {padding: collisionPadding},
+	})
+
+	const search = createMenuSearch({
+		getItems: () => items,
+		onSelect: handleSelect,
+	})
+
+	$effect(() => {
+		if (open && searchable) {
+			search.resetAndFocus()
+		}
+	})
+
+	// Focus first item when menu opens (non-searchable)
+	$effect(() => {
+		if (open && floatingEl && !searchable) {
+			requestAnimationFrame(() => {
+				const first = floatingEl?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+				first?.focus()
+			})
+		}
+	})
+
+	function toggle() {
+		if (open) {
+			close()
+		} else {
+			openSubIndex = null
+			open = true
+		}
+	}
+
+	function close() {
+		open = false
+		openSubIndex = null
+		triggerEl?.focus()
+	}
+
 	function handleSelect(value: string) {
 		onSelect(value)
-		open = false
+		close()
+	}
+
+	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 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 isSeparator(entry: MenuEntry): entry is SeparatorEntry {
-		return 'type' in entry && entry.type === 'separator'
+	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 isGroup(entry: MenuEntry): entry is GroupEntry {
-		return 'type' in entry && entry.type === 'group'
+	function handleMenuKeydown(e: KeyboardEvent) {
+		if (searchable) return // search input handles its own keyboard nav
+
+		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 '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
+		}
 	}
 
-	function isItem(entry: MenuEntry): entry is Item {
-		return !('type' in entry)
+	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
 	}
+
+	const defaultTriggerClass = '[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none'
 </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>
+		<MenuItemContent icon={item.icon} label={item.label} shortcut={item.shortcut} />
 	{/if}
 {/snippet}
 
-{#snippet menuItem(item: Item)}
-	<DropdownMenu.Item
-		disabled={item.disabled}
-		class={cn(
-			'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',
-			item.variant === 'destructive'
-				? 'text-error hover:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none'
-				: 'text-dropdown-item hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none'
-		)}
-		onSelect={() => handleSelect(item.value)}
+{#snippet menuItem(item: MenuItem)}
+	{@const index = searchable ? search.getItemIndex(item) : -1}
+	<div
+		role="menuitem"
+		tabindex="-1"
+		data-disabled={item.disabled ? '' : undefined}
+		class={menuItemClass({variant: item.variant, searchable, isHighlighted: index === search.highlightedIndex})}
+		data-search-item={searchable ? '' : undefined}
+		onclick={() => handleSelect(item.value)}
+		onfocus={searchable ? search.refocusInput : undefined}
+		onpointermove={searchable ? () => search.setHighlight(index) : undefined}
+		onpointerenter={!searchable ? (e) => {
+			openSubIndex = null
+			;(e.currentTarget as HTMLElement).focus()
+		} : undefined}
 	>
 		{@render itemContent(item)}
-	</DropdownMenu.Item>
+	</div>
 {/snippet}
 
-<DropdownMenu.Root bind:open>
-	<DropdownMenu.Trigger
-		class={cn(
-			children && triggerClass
-				? triggerClass
-				: '[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none',
-			!children && !triggerClass && ''
-		)}
+{#snippet subMenu(entry: SubEntry)}
+	{@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
+		}}
 	>
-		{#if children}
-			{@render children()}
+		<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}
+			<IIDropdownMenuSub
+				items={entry.items}
+				onSelect={handleSelect}
+				onClose={() => {
+					openSubIndex = null
+					subTriggerEls[subIdx]?.focus()
+				}}
+				triggerEl={subTriggerEls[subIdx]}
+				searchPlaceholder={entry.searchPlaceholder}
+				renderItemContent={itemContent}
+			/>
 		{:else}
-			<IIIcon iconName="dots-three-vertical" />
+			<IIDropdownMenuSubSimple
+				items={entry.items}
+				onSelect={handleSelect}
+				onClose={() => {
+					openSubIndex = null
+					subTriggerEls[subIdx]?.focus()
+				}}
+				triggerEl={subTriggerEls[subIdx]}
+				renderItemContent={itemContent}
+				renderSubMenu={subMenu}
+			/>
 		{/if}
-	</DropdownMenu.Trigger>
-	<DropdownMenu.Portal>
-		<DropdownMenu.Content
-			{side}
-			{align}
-			{collisionPadding}
-			class={cn(
-				'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',
-				className
-			)}
-		>
-			{#each items as entry, i (i)}
-				{#if isSeparator(entry)}
-					<DropdownMenu.Separator class="h-1 bg-muted mx-4 my-4" />
-				{:else if isGroup(entry)}
-					<DropdownMenu.Group>
-						{#if entry.heading}
-							<DropdownMenu.GroupHeading class="text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none">
-								{entry.heading}
-							</DropdownMenu.GroupHeading>
-						{/if}
-						{#each entry.items as item (item.value)}
-							{@render menuItem(item)}
-						{/each}
-					</DropdownMenu.Group>
-				{:else if isItem(entry)}
-					{@render menuItem(entry)}
+	{/if}
+{/snippet}
+
+{#snippet menuEntries(entries: MenuEntry[])}
+	{#each entries as entry, i (i)}
+		{#if isSeparator(entry)}
+			<div role="separator" class={menuStyles.separator}></div>
+		{:else if isGroup(entry)}
+			{@const headingId = `dd-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}
-		</DropdownMenu.Content>
-	</DropdownMenu.Portal>
-</DropdownMenu.Root>
+				{#each entry.items as groupItem (isItem(groupItem) ? groupItem.value : groupItem.label)}
+					{#if isSub(groupItem)}
+						{@render subMenu(groupItem)}
+					{:else if isItem(groupItem)}
+						{@render menuItem(groupItem)}
+					{/if}
+				{/each}
+			</div>
+		{:else if isSub(entry)}
+			{@render subMenu(entry)}
+		{:else if isItem(entry)}
+			{@render menuItem(entry)}
+		{/if}
+	{/each}
+{/snippet}
+
+<button
+	bind:this={triggerEl}
+	type="button"
+	aria-haspopup="menu"
+	aria-expanded={open}
+	data-state={open ? 'open' : 'closed'}
+	class={cn(children && triggerClass ? triggerClass : defaultTriggerClass)}
+	onclick={toggle}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<IIIcon iconName="dots-three-vertical" />
+	{/if}
+</button>
+
+{#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}
+		>
+			{#if searchable}
+				<MenuSearchInput
+					bind:inputEl={search.inputEl}
+					bind:searchQuery={search.searchQuery}
+					placeholder={searchPlaceholder}
+					onkeydown={(e) => search.handleKeydown(e, '[data-menu-content]')}
+				/>
+			{/if}
+			{@render menuEntries(searchable ? search.filteredItems : items)}
+			{#if searchable && search.filteredItems.length === 0}
+				<MenuNoResults />
+			{/if}
+		</div>
+	</div>
+{/if}

package/dist/IIDropdownMenu/IIDropdownMenu.svelte.d.ts

@@ -1,30 +1,17 @@
 import type { Snippet } from 'svelte';
-type Item = {
-    label: string;
-    value: string;
-    icon?: Snippet;
-    disabled?: boolean;
-    variant?: 'default' | 'destructive';
-};
-type SeparatorEntry = {
-    type: 'separator';
-};
-type GroupEntry = {
-    type: 'group';
-    heading?: string;
-    items: Item[];
-};
-type MenuEntry = Item | SeparatorEntry | GroupEntry;
+import { type MenuItem, type MenuEntry } from '../utils/menu';
 type Props = {
     items: MenuEntry[];
     onSelect: (value: string) => void;
     open?: boolean;
     children?: Snippet;
-    renderItem?: Snippet<[Item]>;
+    renderItem?: Snippet<[MenuItem]>;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
     collisionPadding?: number;
     triggerClass?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
     class?: string;
 };
 declare const IIDropdownMenu: import("svelte").Component<Props, {}, "open">;

package/dist/IIDropdownMenu/IIDropdownMenuStories.svelte

@@ -75,6 +75,26 @@
 		</IIDropdownMenu>
 	</section>
 
+	<!-- Searchable -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Searchable</h2>
+		<p class="text-small text-secondary mb-12">A search input at the top filters menu items as you type.</p>
+		<IIDropdownMenu
+			items={[
+				{label: 'Edit', value: 'edit'},
+				{label: 'Duplicate', value: 'duplicate'},
+				{label: 'Archive', value: 'archive'},
+				{label: 'Export', value: 'export'},
+				{label: 'Share', value: 'share'},
+				{label: 'Print', value: 'print'},
+				{type: 'separator'},
+				{label: 'Delete', value: 'delete', variant: 'destructive'},
+			]}
+			onSelect={handleSelect}
+			searchable
+		/>
+	</section>
+
 	<!-- Mixed Entries -->
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Mixed: Items + Separators + Groups</h2>

package/dist/IIDropdownMenu/IIDropdownMenuSub.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 = `dd-sub-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/IIDropdownMenu/IIDropdownMenuSub.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 IIDropdownMenuSub: import("svelte").Component<Props, {}, "">;
+type IIDropdownMenuSub = ReturnType<typeof IIDropdownMenuSub>;
+export default IIDropdownMenuSub;