@insymetri/styleguide 0.1.54 → 0.1.56

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import {tick} from 'svelte'
 	import type {Snippet} from 'svelte'
 	import {fly} from 'svelte/transition'
 	import {IIIcon} from '../IIIcon'
@@ -25,6 +24,7 @@
 		renderSelected?: Snippet<[item: MenuItem]>
 		searchable?: boolean
 		searchPlaceholder?: string
+		autofocus?: boolean
 		class?: string
 	}
 
@@ -43,6 +43,7 @@
 		renderSelected,
 		searchable = false,
 		searchPlaceholder = 'Search...',
+		autofocus = false,
 		class: className,
 	}: Props = $props()
 
@@ -67,10 +68,36 @@
 	let open = $state(false)
 	let triggerEl = $state<HTMLElement | null>(null)
 	let floatingEl = $state<HTMLElement | null>(null)
+	let highlightedIndex = $state(-1)
+
+	$effect(() => {
+		if (autofocus && triggerEl) triggerEl.focus({focusVisible: true} as FocusOptions)
+	})
 
 	const selectedItem = $derived(items.find(i => i.value === value))
 	const selectedLabel = $derived(selectedItem?.label ?? placeholder)
 
+	function scrollHighlightedIntoView() {
+		requestAnimationFrame(() => {
+			const el = floatingEl?.querySelector<HTMLElement>(`[role="option"][data-index="${highlightedIndex}"]`)
+			el?.scrollIntoView({block: 'nearest'})
+		})
+	}
+
+	function moveHighlight(direction: 1 | -1) {
+		const enabled = items.map((item, i) => (item.disabled ? -1 : i)).filter(i => i >= 0)
+		if (enabled.length === 0) return
+		const currentPos = enabled.indexOf(highlightedIndex)
+		const nextPos =
+			currentPos === -1
+				? direction === 1 ? 0 : enabled.length - 1
+				: direction === 1
+					? (currentPos >= enabled.length - 1 ? 0 : currentPos + 1)
+					: (currentPos <= 0 ? enabled.length - 1 : currentPos - 1)
+		highlightedIndex = enabled[nextPos]
+		scrollHighlightedIntoView()
+	}
+
 	const search = createMenuSearch({
 		getItems: () => items,
 		onSelect: handleSelectValue,
@@ -106,21 +133,17 @@
 		clearTimeout(typeaheadTimer)
 		typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, 500)
 
-		const match = items.find(
+		const matchIndex = items.findIndex(
 			i => !i.disabled && i.label.toLowerCase().startsWith(typeaheadBuffer)
 		)
-		if (match) {
-			value = match.value
-			onSelect?.(match.value)
+		if (matchIndex >= 0) {
+			const match = items[matchIndex]
 			if (!wasOpen) {
-				open = false
-				triggerEl?.focus()
+				value = match.value
+				onSelect?.(match.value)
 			} else {
-				tick().then(() => {
-					const el = floatingEl?.querySelector<HTMLElement>('[aria-selected="true"]')
-					el?.focus()
-					el?.scrollIntoView({block: 'nearest'})
-				})
+				highlightedIndex = matchIndex
+				scrollHighlightedIntoView()
 			}
 		}
 	}
@@ -128,15 +151,38 @@
 	function handleTriggerKeydown(e: KeyboardEvent) {
 		if (disabled) return
 
-		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+		if (e.key === 'Escape' && open) {
 			e.preventDefault()
-			if (!open) open = true
+			close()
 			return
 		}
 
-		if (e.key === ' ' || e.key === 'Enter') {
+		if (e.key === 'ArrowDown') {
 			e.preventDefault()
 			if (!open) open = true
+			else moveHighlight(1)
+			return
+		}
+		if (e.key === 'ArrowUp') {
+			e.preventDefault()
+			if (!open) open = true
+			else moveHighlight(-1)
+			return
+		}
+
+		if (e.key === 'Tab' && open) {
+			e.preventDefault()
+			moveHighlight(e.shiftKey ? -1 : 1)
+			return
+		}
+
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			if (!open) {
+				open = true
+			} else if (highlightedIndex >= 0 && !items[highlightedIndex]?.disabled) {
+				handleSelect(items[highlightedIndex])
+			}
 			return
 		}
 
@@ -163,66 +209,17 @@
 		}
 	})
 
-	// Focus selected item (or first) when opened (non-searchable)
+	// Initialize highlight to selected (or first enabled) when opened (non-searchable)
 	$effect(() => {
-		if (open && floatingEl && !searchable) {
-			requestAnimationFrame(() => {
-				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'})
-			})
+		if (open && !searchable) {
+			const selectedIdx = items.findIndex(i => i.value === value && !i.disabled)
+			const firstIdx = items.findIndex(i => !i.disabled)
+			highlightedIndex = selectedIdx >= 0 ? selectedIdx : firstIdx
+			scrollHighlightedIntoView()
+		} else if (!open) {
+			highlightedIndex = -1
 		}
 	})
-
-	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 'Tab':
-				e.preventDefault()
-				focusItem(optionItems, currentIndex, e.shiftKey ? -1 : 1)
-				break
-			case 'ArrowDown':
-				e.preventDefault()
-				focusItem(optionItems, currentIndex, 1)
-				break
-			case 'ArrowUp':
-				e.preventDefault()
-				focusItem(optionItems, currentIndex, -1)
-				break
-			case 'Enter':
-				e.preventDefault()
-				;(document.activeElement as HTMLElement)?.click()
-				break
-			case 'Escape':
-				e.preventDefault()
-				close()
-				break
-			default:
-				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-					e.preventDefault()
-					typeahead(e.key)
-				}
-				break
-		}
-	}
 </script>
 
 <div class="flex flex-col">
@@ -262,8 +259,7 @@
 				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}
+				class="min-w-100 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 pointer-events-auto outline-none"
 				transition:fly={{y: -4, duration: 150}}
 			>
 				{#if searchable}
@@ -275,25 +271,29 @@
 					/>
 				{/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}
+					{#each (searchable ? search.filteredItems as MenuItem[] : items) as item, listIndex (item.value)}
+						{@const index = searchable ? search.getItemIndex(item) : listIndex}
+						{@const isHighlighted = searchable
+							? index === search.highlightedIndex
+							: index === highlightedIndex}
 						<div
 							role="option"
 							tabindex="-1"
 							aria-selected={value === item.value}
 							data-disabled={item.disabled ? '' : undefined}
+							data-index={index}
 							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'
+								isHighlighted && '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}
+							onpointermove={searchable
+								? () => search.setHighlight(index)
+								: () => { if (!item.disabled) highlightedIndex = index }}
 						>
 							{#if renderItem}
 								{@render renderItem(item, value === item.value)}

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

@@ -15,6 +15,7 @@ type Props = {
     renderSelected?: Snippet<[item: MenuItem]>;
     searchable?: boolean;
     searchPlaceholder?: string;
+    autofocus?: boolean;
     class?: string;
 };
 declare const IIDropdownInput: import("svelte").Component<Props, {}, "value">;

package/dist/IIDropdownInput/IIDropdownInputModalStories.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import IIDropdownInput from './IIDropdownInput.svelte'
+	import IIModal from '../IIModal/IIModal.svelte'
+	import IIButton from '../IIButton/IIButton.svelte'
+
+	let open = $state(true)
+	let value = $state('pto')
+
+	const items = [
+		{label: 'PTO', value: 'pto'},
+		{label: 'Sick', value: 'sick'},
+		{label: 'Personal', value: 'personal'},
+	]
+</script>
+
+<IIButton onclick={() => (open = true)}>Open modal</IIButton>
+
+{#if open}
+	<IIModal bind:open title="Request time off" size="sm" onOpenChange={v => (open = v)}>
+		<div class="flex flex-col gap-16">
+			<p class="text-small text-secondary m-0">
+				Repro: bits-ui Dialog sets <code>body &#123; pointer-events: none &#125;</code> when open. The dropdown's
+				portaled listbox needs <code>pointer-events: auto</code> or clicks fall through to the dialog content,
+				which triggers <code>clickOutside</code> and closes the dropdown without selecting.
+			</p>
+			<div class="flex flex-col gap-8">
+				<label for="type" class="text-small-emphasis text-secondary">Type</label>
+				<IIDropdownInput {items} bind:value matchTriggerWidth autofocus />
+			</div>
+			<p class="text-small text-secondary m-0">Selected value: <strong>{value}</strong></p>
+		</div>
+	</IIModal>
+{/if}

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

@@ -0,0 +1,3 @@
+declare const IIDropdownInputModalStories: import("svelte").Component<Record<string, never>, {}, "">;
+type IIDropdownInputModalStories = ReturnType<typeof IIDropdownInputModalStories>;
+export default IIDropdownInputModalStories;

package/package.json

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