@insymetri/styleguide 0.1.34 → 0.1.36

package/dist/IIContextMenu/IIContextMenu.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import type {VirtualElement} from '@floating-ui/dom'
+	import {cn} from '../utils/cn'
+	import {IIIcon} from '../IIIcon'
+	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<[MenuItem]>
+		class?: string
+	}
+
+	let {
+		items,
+		onSelect,
+		open = $bindable(false),
+		children,
+		renderItem,
+		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)
+		close()
+	}
+
+	// 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 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 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 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
+		}
+	}
+
+	// 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: MenuItem)}
+	{#if renderItem}
+		{@render renderItem(item)}
+	{:else}
+		<MenuItemContent icon={item.icon} label={item.label} shortcut={item.shortcut} />
+	{/if}
+{/snippet}
+
+{#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)}
+	</div>
+{/snippet}
+
+{#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
+		}}
+	>
+		<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)}
+			<div role="separator" class={menuStyles.separator}></div>
+		{:else if isGroup(entry)}
+			{@const headingId = `ctx-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 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}
+
+<!-- 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)}
+		</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

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import IIContextMenu from './IIContextMenu.svelte'
+	import {IIIcon} from '../IIIcon'
+
+	function handleSelect(value: string) {
+		console.log('Selected:', value)
+	}
+</script>
+
+{#snippet statusIcon()}<IIIcon iconName="clock" />{/snippet}
+{#snippet clockIcon()}<IIIcon iconName="clock-clockwise" />{/snippet}
+{#snippet circleIcon()}<IIIcon iconName="circle" />{/snippet}
+{#snippet checkCircleIcon()}<IIIcon iconName="check-circle" />{/snippet}
+{#snippet userIcon()}<IIIcon iconName="user" />{/snippet}
+{#snippet warningIcon()}<IIIcon iconName="warning-circle" />{/snippet}
+{#snippet listIcon()}<IIIcon iconName="list" />{/snippet}
+{#snippet pencilIcon()}<IIIcon iconName="pencil-simple" />{/snippet}
+{#snippet trashIcon()}<IIIcon iconName="trash" />{/snippet}
+
+<div class="flex flex-col gap-32">
+	<!-- Basic -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Basic</h2>
+		<p class="text-small text-secondary mb-12">Right-click the area below to open the context menu.</p>
+		<IIContextMenu
+			items={[
+				{label: 'Edit', value: 'edit'},
+				{label: 'Duplicate', value: 'duplicate'},
+				{label: 'Archive', value: 'archive'},
+				{label: 'Delete', value: 'delete', variant: 'destructive'},
+			]}
+			onSelect={handleSelect}
+		>
+			<div class="w-full h-100 border border-dashed border-muted rounded-8 flex items-center justify-center text-small text-secondary">
+				Right-click here
+			</div>
+		</IIContextMenu>
+	</section>
+
+	<!-- With Separators -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">With Separators</h2>
+		<p class="text-small text-secondary mb-12">Menu entries can include separator dividers.</p>
+		<IIContextMenu
+			items={[
+				{label: 'Cut', value: 'cut', shortcut: '⌘X'},
+				{label: 'Copy', value: 'copy', shortcut: '⌘C'},
+				{label: 'Paste', value: 'paste', shortcut: '⌘V'},
+				{type: 'separator'},
+				{label: 'Delete', value: 'delete', variant: 'destructive'},
+			]}
+			onSelect={handleSelect}
+		>
+			<div class="w-full h-100 border border-dashed border-muted rounded-8 flex items-center justify-center text-small text-secondary">
+				Right-click here
+			</div>
+		</IIContextMenu>
+	</section>
+
+	<!-- With Submenus -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">With Submenus</h2>
+		<p class="text-small text-secondary mb-12">Hover over an item with an arrow to reveal its submenu.</p>
+		<IIContextMenu
+			items={[
+				{
+					type: 'sub',
+					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},
+						{label: 'Done', value: 'status-done', icon: checkCircleIcon},
+					],
+				},
+				{
+					type: 'sub',
+					label: 'Assignee',
+					icon: userIcon,
+					shortcut: 'A',
+					searchable: true,
+					searchPlaceholder: 'Assign to...',
+					items: [
+						{label: 'No assignee', value: 'assign-none', icon: userIcon},
+						{type: 'separator'},
+						{
+							type: 'group',
+							heading: 'Team members',
+							items: [
+								{label: 'Alice', value: 'assign-alice', icon: userIcon},
+								{label: 'Bob', value: 'assign-bob', icon: userIcon},
+							],
+						},
+					],
+				},
+				{
+					type: 'sub',
+					label: 'Priority',
+					icon: warningIcon,
+					shortcut: 'P',
+					searchable: true,
+					searchPlaceholder: 'Set priority...',
+					items: [
+						{label: 'Urgent', value: 'priority-urgent'},
+						{label: 'High', value: 'priority-high'},
+						{label: 'Medium', value: 'priority-medium'},
+						{label: 'Low', value: 'priority-low'},
+						{label: 'No priority', value: 'priority-none'},
+					],
+				},
+				{
+					type: 'sub',
+					label: 'Labels',
+					icon: listIcon,
+					shortcut: 'L',
+					searchable: true,
+					searchPlaceholder: 'Add label...',
+					items: [
+						{label: 'Bug', value: 'label-bug'},
+						{label: 'Feature', value: 'label-feature'},
+						{label: 'Improvement', value: 'label-improvement'},
+					],
+				},
+				{type: 'separator'},
+				{label: 'Rename...', value: 'rename', icon: pencilIcon, shortcut: 'R'},
+				{label: 'Delete', value: 'delete', icon: trashIcon, variant: 'destructive'},
+			]}
+			onSelect={handleSelect}
+		>
+			<div class="w-full h-100 border border-dashed border-muted rounded-8 flex items-center justify-center text-small text-secondary">
+				Right-click here
+			</div>
+		</IIContextMenu>
+	</section>
+
+	<!-- With Groups -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">With Groups</h2>
+		<p class="text-small text-secondary mb-12">Items organized into labeled groups with headings.</p>
+		<IIContextMenu
+			items={[
+				{
+					type: 'group',
+					heading: 'Edit',
+					items: [
+						{label: 'Cut', value: 'cut'},
+						{label: 'Copy', value: 'copy'},
+						{label: 'Paste', value: 'paste'},
+					],
+				},
+				{type: 'separator'},
+				{
+					type: 'group',
+					heading: 'Danger Zone',
+					items: [
+						{label: 'Delete', value: 'delete', variant: 'destructive'},
+					],
+				},
+			]}
+			onSelect={handleSelect}
+		>
+			<div class="w-full h-100 border border-dashed border-muted rounded-8 flex items-center justify-center text-small text-secondary">
+				Right-click here
+			</div>
+		</IIContextMenu>
+	</section>
+</div>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IIContextMenuStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IIContextMenuStories = InstanceType<typeof IIContextMenuStories>;
+export default IIContextMenuStories;

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;