@insymetri/styleguide 0.1.35 → 0.1.37

package/dist/IIContextMenu/IIContextMenuSubSimple.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
+	import {useFloating, portal} from '../utils/menu'
+	import {cn} from '../utils/cn'
+	import {IIIcon} from '../IIIcon'
+	import MenuItemContent from '../utils/menu/MenuItemContent.svelte'
+
+	type Props = {
+		items: MenuEntry[]
+		onSelect: (value: string) => void
+		onClose: () => void
+		triggerEl: HTMLElement | null
+		renderItemContent: Snippet<[MenuItem]>
+		renderSubMenu: Snippet<[SubEntry]>
+	}
+
+	let {
+		items,
+		onSelect,
+		onClose,
+		triggerEl,
+		renderItemContent,
+		renderSubMenu,
+	}: Props = $props()
+
+	let floatingEl = $state<HTMLElement | null>(null)
+
+	useFloating({
+		reference: () => triggerEl,
+		floating: () => floatingEl,
+		placement: 'right-start',
+		offset: 4,
+	})
+
+	function activate() {
+		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 handleKeydown(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 'ArrowLeft':
+			case 'Escape':
+				e.preventDefault()
+				onClose()
+				break
+			case 'Enter':
+			case ' ':
+				e.preventDefault()
+				;(document.activeElement as HTMLElement)?.click()
+				break
+		}
+	}
+</script>
+
+<div use:portal>
+	<div
+		bind:this={floatingEl}
+		role="menu"
+		data-menu-content
+		class={menuStyles.subContent}
+		onkeydown={handleKeydown}
+		onpointerenter={() => activate()}
+		onpointerleave={(e) => e.stopImmediatePropagation()}
+	>
+		{#each items as entry, i (i)}
+			{#if isSeparator(entry)}
+				<div role="separator" class={menuStyles.separator}></div>
+			{:else if isGroup(entry)}
+				{@const headingId = `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 as groupItem (isItem(groupItem) ? groupItem.value : groupItem.label)}
+						{#if isSub(groupItem)}
+							{@render renderSubMenu(groupItem)}
+						{:else if isItem(groupItem)}
+							<div
+								role="menuitem"
+								tabindex="-1"
+								data-disabled={groupItem.disabled ? '' : undefined}
+								class={menuItemClass({variant: groupItem.variant})}
+								onclick={() => onSelect(groupItem.value)}
+								onpointerenter={(e) => (e.currentTarget as HTMLElement).focus()}
+							>
+								{@render renderItemContent(groupItem)}
+							</div>
+						{/if}
+					{/each}
+				</div>
+			{:else if isSub(entry)}
+				{@render renderSubMenu(entry)}
+			{:else if isItem(entry)}
+				<div
+					role="menuitem"
+					tabindex="-1"
+					data-disabled={entry.disabled ? '' : undefined}
+					class={menuItemClass({variant: entry.variant})}
+					onclick={() => onSelect(entry.value)}
+					onpointerenter={(e) => (e.currentTarget as HTMLElement).focus()}
+				>
+					{@render renderItemContent(entry)}
+				</div>
+			{/if}
+		{/each}
+	</div>
+</div>

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

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

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -1,27 +1,25 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
-	import {DropdownMenu} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
 	import {useDensity} from '../density'
-
-	type Item = {
-		label: string
-		value: string
-		icon?: Snippet
-		disabled?: boolean
-	}
+	import {createMenuSearch, type MenuItem} from '../utils/menu'
+	import {useFloating, portal, clickOutside} from '../utils/menu'
+	import MenuSearchInput from '../utils/menu/MenuSearchInput.svelte'
+	import MenuNoResults from '../utils/menu/MenuNoResults.svelte'
 
 	type Props = {
-		items: Item[]
+		items: MenuItem[]
 		value?: string | undefined
 		placeholder?: string
 		label?: string
 		disabled?: boolean
 		onSelect?: (value: string) => void
 		matchTriggerWidth?: boolean
-		renderItem?: Snippet<[item: Item, selected: boolean]>
-		renderSelected?: Snippet<[item: Item]>
+		renderItem?: Snippet<[item: MenuItem, selected: boolean]>
+		renderSelected?: Snippet<[item: MenuItem]>
+		searchable?: boolean
+		searchPlaceholder?: string
 		class?: string
 	}
 
@@ -35,6 +33,8 @@
 		matchTriggerWidth = false,
 		renderItem,
 		renderSelected,
+		searchable = false,
+		searchPlaceholder = 'Search...',
 		class: className,
 	}: Props = $props()
 
@@ -56,31 +56,113 @@
 
 	let open = $state(false)
 	let triggerEl = $state<HTMLElement | null>(null)
-	let triggerWidth = $state<number | undefined>(undefined)
+	let floatingEl = $state<HTMLElement | null>(null)
 
 	const selectedItem = $derived(items.find(i => i.value === value))
 	const selectedLabel = $derived(selectedItem?.label ?? placeholder)
 
-	function handleSelect(item: Item) {
+	const search = createMenuSearch({
+		getItems: () => items,
+		onSelect: handleSelectValue,
+	})
+
+	useFloating({
+		reference: () => triggerEl,
+		floating: () => floatingEl,
+		placement: 'bottom-start',
+		offset: 2,
+		matchWidth: matchTriggerWidth,
+	})
+
+	function handleSelect(item: MenuItem) {
 		value = item.value
 		open = false
 		onSelect?.(item.value)
+		triggerEl?.focus()
+	}
+
+	function handleSelectValue(val: string) {
+		const item = items.find(i => i.value === val)
+		if (item) handleSelect(item)
+	}
+
+	function toggle() {
+		if (disabled) return
+		open = !open
+	}
+
+	function close() {
+		open = false
+		triggerEl?.focus()
 	}
 
 	$effect(() => {
-		if (matchTriggerWidth && open && triggerEl) {
-			triggerWidth = triggerEl.offsetWidth
+		if (open && searchable) {
+			search.resetAndFocus()
 		}
 	})
+
+	// Focus first item when opened (non-searchable)
+	$effect(() => {
+		if (open && floatingEl && !searchable) {
+			requestAnimationFrame(() => {
+				const first = floatingEl?.querySelector<HTMLElement>('[role="option"]:not([data-disabled])')
+				first?.focus()
+			})
+		}
+	})
+
+	function getOptionItems(): HTMLElement[] {
+		if (!floatingEl) return []
+		return Array.from(floatingEl.querySelectorAll<HTMLElement>('[role="option"]:not([data-disabled])'))
+	}
+
+	function focusItem(optionItems: HTMLElement[], currentIndex: number, direction: 1 | -1) {
+		if (optionItems.length === 0) return
+		const nextIndex = direction === 1
+			? (currentIndex >= optionItems.length - 1 ? 0 : currentIndex + 1)
+			: (currentIndex <= 0 ? optionItems.length - 1 : currentIndex - 1)
+		optionItems[nextIndex]?.focus()
+	}
+
+	function handleListKeydown(e: KeyboardEvent) {
+		if (searchable) return
+
+		const optionItems = getOptionItems()
+		const currentIndex = optionItems.indexOf(document.activeElement as HTMLElement)
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault()
+				focusItem(optionItems, currentIndex, 1)
+				break
+			case 'ArrowUp':
+				e.preventDefault()
+				focusItem(optionItems, currentIndex, -1)
+				break
+			case 'Enter':
+			case ' ':
+				e.preventDefault()
+				;(document.activeElement as HTMLElement)?.click()
+				break
+			case 'Escape':
+				e.preventDefault()
+				close()
+				break
+		}
+	}
 </script>
 
 <div class="flex flex-col">
 	{#if label}
 		<span class="text-small-emphasis text-secondary mb-4">{label}</span>
 	{/if}
-<DropdownMenu.Root bind:open>
-	<DropdownMenu.Trigger
-		bind:ref={triggerEl}
+	<button
+		bind:this={triggerEl}
+		type="button"
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-expanded={open}
 		{disabled}
 		class={cn(
 			'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border bg-input-bg cursor-default text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
@@ -88,6 +170,7 @@
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
 		)}
+		onclick={toggle}
 	>
 		{#if renderSelected && selectedItem}
 			{@render renderSelected(selectedItem)}
@@ -95,50 +178,68 @@
 			<span>{selectedLabel}</span>
 		{/if}
 		<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
-	</DropdownMenu.Trigger>
-	<DropdownMenu.Portal>
-		<DropdownMenu.Content
-			class="min-w-100 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 outline-none"
-			sideOffset={2}
-			side="bottom"
-			align="start"
-		>
-			{#snippet child({props, wrapperProps})}
-				<div {...wrapperProps} style:min-width={matchTriggerWidth && triggerWidth ? `${triggerWidth}px` : undefined}>
-					<div {...props}>
-						<div class="max-h-300 overflow-y-auto">
-							{#each items as item (item.value)}
-								<DropdownMenu.Item
-									disabled={item.disabled}
-									class={cn(
-										'flex items-center justify-between gap-12 px-12 rounded-6 text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
-										itemDensityClasses[density.value],
-										value === item.value && 'text-dropdown-item-selected'
-									)}
-									onSelect={() => handleSelect(item)}
-								>
-									{#if renderItem}
-										{@render renderItem(item, value === item.value)}
-									{:else}
-										<span class="flex items-center gap-8">
-											{#if item.icon}
-												<span class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
-													{@render item.icon()}
-												</span>
-											{/if}
-											{item.label}
+	</button>
+
+	{#if open}
+		<div use:portal use:clickOutside={{onClose: close}}>
+			<div
+				bind:this={floatingEl}
+				role="listbox"
+				data-menu-content
+				class="min-w-100 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 outline-none"
+				onkeydown={handleListKeydown}
+			>
+				{#if searchable}
+					<MenuSearchInput
+						bind:inputEl={search.inputEl}
+						bind:searchQuery={search.searchQuery}
+						placeholder={searchPlaceholder}
+						onkeydown={(e) => search.handleKeydown(e, '[data-menu-content]')}
+					/>
+				{/if}
+				<div class="max-h-300 overflow-y-auto">
+					{#each (searchable ? search.filteredItems as MenuItem[] : items) as item (item.value)}
+						{@const index = searchable ? search.getItemIndex(item) : -1}
+						<div
+							role="option"
+							tabindex="-1"
+							aria-selected={value === item.value}
+							data-disabled={item.disabled ? '' : undefined}
+							class={cn(
+								'flex items-center justify-between gap-12 px-12 rounded-6 text-dropdown-item cursor-default outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+								itemDensityClasses[density.value],
+								value === item.value && 'text-dropdown-item-selected',
+								!searchable && 'focus:bg-dropdown-item-hover',
+								searchable && index === search.highlightedIndex && 'bg-dropdown-item-hover'
+							)}
+							data-search-item={searchable ? '' : undefined}
+							onclick={() => handleSelect(item)}
+							onfocus={searchable ? search.refocusInput : undefined}
+							onpointermove={searchable ? () => search.setHighlight(index) : undefined}
+							onpointerenter={!searchable ? (e) => (e.currentTarget as HTMLElement).focus() : undefined}
+						>
+							{#if renderItem}
+								{@render renderItem(item, value === item.value)}
+							{:else}
+								<span class="flex items-center gap-8">
+									{#if item.icon}
+										<span class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
+											{@render item.icon()}
 										</span>
-										{#if value === item.value}
-											<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
-										{/if}
 									{/if}
-								</DropdownMenu.Item>
-							{/each}
+									{item.label}
+								</span>
+								{#if value === item.value}
+									<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
+								{/if}
+							{/if}
 						</div>
-					</div>
+					{/each}
+					{#if searchable && search.filteredItems.length === 0}
+						<MenuNoResults />
+					{/if}
 				</div>
-			{/snippet}
-		</DropdownMenu.Content>
-	</DropdownMenu.Portal>
-</DropdownMenu.Root>
+			</div>
+		</div>
+	{/if}
 </div>

package/dist/IIDropdownInput/IIDropdownInput.svelte.d.ts

@@ -1,20 +1,17 @@
 import type { Snippet } from 'svelte';
-type Item = {
-    label: string;
-    value: string;
-    icon?: Snippet;
-    disabled?: boolean;
-};
+import { type MenuItem } from '../utils/menu';
 type Props = {
-    items: Item[];
+    items: MenuItem[];
     value?: string | undefined;
     placeholder?: string;
     label?: string;
     disabled?: boolean;
     onSelect?: (value: string) => void;
     matchTriggerWidth?: boolean;
-    renderItem?: Snippet<[item: Item, selected: boolean]>;
-    renderSelected?: Snippet<[item: Item]>;
+    renderItem?: Snippet<[item: MenuItem, selected: boolean]>;
+    renderSelected?: Snippet<[item: MenuItem]>;
+    searchable?: boolean;
+    searchPlaceholder?: string;
     class?: string;
 };
 declare const IIDropdownInput: import("svelte").Component<Props, {}, "value">;