@insymetri/styleguide 0.1.44 → 0.1.45

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import {tick} from 'svelte'
 	import type {Snippet} from 'svelte'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
@@ -86,6 +87,55 @@
 		if (item) handleSelect(item)
 	}
 
+	let typeaheadBuffer = $state('')
+	let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
+
+	function typeahead(char: string) {
+		const wasOpen = open
+		typeaheadBuffer += char.toLowerCase()
+		clearTimeout(typeaheadTimer)
+		typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, 500)
+
+		const match = items.find(
+			i => !i.disabled && i.label.toLowerCase().startsWith(typeaheadBuffer)
+		)
+		if (match) {
+			value = match.value
+			onSelect?.(match.value)
+			if (!wasOpen) {
+				open = false
+				triggerEl?.focus()
+			} else {
+				tick().then(() => {
+					const el = floatingEl?.querySelector<HTMLElement>('[aria-selected="true"]')
+					el?.focus()
+					el?.scrollIntoView({block: 'nearest'})
+				})
+			}
+		}
+	}
+
+	function handleTriggerKeydown(e: KeyboardEvent) {
+		if (disabled) return
+
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+			e.preventDefault()
+			if (!open) open = true
+			return
+		}
+
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault()
+			if (!open) open = true
+			return
+		}
+
+		if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			e.preventDefault()
+			typeahead(e.key)
+		}
+	}
+
 	function toggle() {
 		if (disabled) return
 		open = !open
@@ -102,12 +152,14 @@
 		}
 	})
 
-	// Focus first item when opened (non-searchable)
+	// Focus selected item (or first) when opened (non-searchable)
 	$effect(() => {
 		if (open && floatingEl && !searchable) {
 			requestAnimationFrame(() => {
-				const first = floatingEl?.querySelector<HTMLElement>('[role="option"]:not([data-disabled])')
-				first?.focus()
+				const selected = floatingEl?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]:not([data-disabled])')
+				const target = selected ?? floatingEl?.querySelector<HTMLElement>('[role="option"]:not([data-disabled])')
+				target?.focus()
+				target?.scrollIntoView({block: 'nearest'})
 			})
 		}
 	})
@@ -132,6 +184,10 @@
 		const currentIndex = optionItems.indexOf(document.activeElement as HTMLElement)
 
 		switch (e.key) {
+			case 'Tab':
+				e.preventDefault()
+				focusItem(optionItems, currentIndex, e.shiftKey ? -1 : 1)
+				break
 			case 'ArrowDown':
 				e.preventDefault()
 				focusItem(optionItems, currentIndex, 1)
@@ -141,7 +197,6 @@
 				focusItem(optionItems, currentIndex, -1)
 				break
 			case 'Enter':
-			case ' ':
 				e.preventDefault()
 				;(document.activeElement as HTMLElement)?.click()
 				break
@@ -149,6 +204,12 @@
 				e.preventDefault()
 				close()
 				break
+			default:
+				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+					e.preventDefault()
+					typeahead(e.key)
+				}
+				break
 		}
 	}
 </script>
@@ -171,6 +232,7 @@
 			className
 		)}
 		onclick={toggle}
+		onkeydown={handleTriggerKeydown}
 	>
 		{#if renderSelected && selectedItem}
 			{@render renderSelected(selectedItem)}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.44",
+	"version": "0.1.45",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {