noph-ui 0.24.10 → 0.24.12

package/README.md

@@ -71,6 +71,7 @@ Beta (No breaking changes expected)
 
 In progress (Breaking changes expected)
 
+- Auto complete
 - Chips (Docs missing)
 - Dialogs (Fullscreen + Docs missing)
 - Menus (Positioning missing + Docs missing)

package/dist/autocomplete/AutoComplete.svelte

@@ -26,9 +26,6 @@
 		onkeydown,
 		onclick,
 		oninput,
-		onblur,
-		onfocusout,
-		focused = $bindable(false),
 		...attributes
 	}: AutoCompleteProps = $props()
 
@@ -40,61 +37,109 @@
 		menuElement?.hidePopover()
 	}
 	const uid = $props.id()
-	let defaultOptionsFilter = (option: AutoCompleteOption) => {
+	const defaultOptionsFilter = (option: AutoCompleteOption) => {
 		return !value || option.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())
 	}
 	let displayOptions = $derived(options.filter(optionsFilter || defaultOptionsFilter))
 	let useVirtualList = $derived(displayOptions.length > 4000)
 	let clientWidth = $state(0)
-	let menuElement: HTMLDivElement | undefined = $state()
+	let menuElement = $state<HTMLDivElement>()
+	let menuOpen = $state(false)
 	let finalPopulated = $state(populated)
-	let blockEvent = $state(false)
+	let activeIndex = $state(-1)
+
+	function setActive(index: number) {
+		if (index < 0 || index >= displayOptions.length) {
+			activeIndex = -1
+			return
+		}
+		activeIndex = index
+	}
+
+	function moveActive(delta: number) {
+		if (!displayOptions.length) {
+			activeIndex = -1
+			return
+		}
+		const next =
+			activeIndex === -1
+				? delta > 0
+					? 0
+					: displayOptions.length - 1
+				: (activeIndex + delta + displayOptions.length) % displayOptions.length
+		setActive(next)
+	}
+
+	$effect(() => {
+		if (activeIndex >= displayOptions.length) {
+			activeIndex = -1
+		}
+
+		if (menuOpen && activeIndex >= 0) {
+			const id = `${uid}-opt-${activeIndex}`
+			const optEl = document.getElementById(id)
+			if (optEl) {
+				optEl.scrollIntoView({ block: 'nearest' })
+			} else if (useVirtualList && menuElement) {
+				const viewport = menuElement.querySelector(
+					'svelte-virtual-list-viewport',
+				) as HTMLElement | null
+				if (viewport) {
+					let rowHeight = 48
+					const firstRow = viewport.querySelector('[id^="' + uid + '-opt-"]') as HTMLElement | null
+					if (firstRow) {
+						rowHeight = firstRow.offsetHeight || rowHeight
+					}
+					const top = activeIndex * rowHeight
+					const bottom = top + rowHeight
+					const { scrollTop, clientHeight } = viewport
+					if (top < scrollTop) {
+						viewport.scrollTop = top
+					} else if (bottom > scrollTop + clientHeight) {
+						viewport.scrollTop = bottom - clientHeight
+					}
+				}
+			}
+		}
+	})
 </script>
 
-{#snippet item(option: AutoCompleteOption)}
+{#snippet item(option: AutoCompleteOption, index: number)}
 	<Item
+		id="{uid}-opt-{index}"
+		softFocus={index === activeIndex}
+		aria-selected={index === activeIndex}
+		role="option"
+		tabindex={-1}
+		onmousedown={(e) => {
+			e.preventDefault()
+		}}
+		onmouseenter={() => setActive(index)}
 		onclick={(event) => {
 			event.preventDefault()
-			element?.focus()
+			setActive(index)
 			onoptionselect(option)
 		}}
-		role="option"
-		disabled={option.disabled}
-		onkeydown={(event) => {
-			if (event.key === 'ArrowDown') {
-				blockEvent = true
-				;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
-				event.preventDefault()
-			}
-			if (event.key === 'ArrowUp') {
-				blockEvent = true
-				;(event.currentTarget?.previousElementSibling as HTMLElement)?.focus()
-				event.preventDefault()
-			}
-			if (event.key === 'Enter') {
-				onoptionselect(option)
-			}
-			if (event.key === 'Tab') {
-				finalPopulated = populated
-				blockEvent = false
-				hidePopover?.()
-			}
-		}}
 		variant="button"
 		>{option.label}
 	</Item>
 {/snippet}
 
 <TextField
-	autocomplete="off"
 	{...attributes}
+	autocomplete="off"
 	{variant}
 	type="text"
 	populated={finalPopulated}
 	bind:clientWidth
 	bind:value
-	bind:focused
 	style="anchor-name:--{uid};"
+	role="combobox"
+	aria-controls="listbox-{uid}"
+	aria-expanded={menuOpen}
+	aria-autocomplete="list"
+	aria-activedescendant={activeIndex >= 0 ? `${uid}-opt-${activeIndex}` : undefined}
+	aria-haspopup="listbox"
 	onclick={(event) => {
 		finalPopulated = true
 		showPopover()
@@ -102,32 +147,42 @@
 	}}
 	oninput={(event) => {
 		showPopover()
+		activeIndex = -1
 		oninput?.(event)
 	}}
 	onkeydown={(event) => {
-		if (event.key === 'Tab' || event.key === 'Escape') {
-			blockEvent = false
+		if (event.key === 'Tab') {
+			return
+		}
+		if (event.key === 'Escape') {
 			hidePopover()
-		} else {
-			if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-				event.preventDefault()
-				finalPopulated = true
-				blockEvent = true
-				showPopover()
-				;(menuElement?.firstElementChild?.firstElementChild as HTMLElement)?.focus()
-			}
+			activeIndex = -1
+			event.preventDefault()
+			return
 		}
-		onkeydown?.(event)
-	}}
-	onblur={(event) => {
-		if (!blockEvent) {
-			onblur?.(event)
+		if (event.key === 'ArrowDown') {
+			finalPopulated = true
+			showPopover()
+			moveActive(1)
+			event.preventDefault()
+			return
 		}
-	}}
-	onfocusout={(event) => {
-		if (!blockEvent) {
-			onfocusout?.(event)
+		if (event.key === 'ArrowUp') {
+			finalPopulated = true
+			showPopover()
+			moveActive(-1)
+			event.preventDefault()
+			return
 		}
+		if (event.key === 'Enter' && activeIndex >= 0) {
+			const opt = displayOptions[activeIndex]
+			if (opt) {
+				onoptionselect(opt)
+			}
+			event.preventDefault()
+			return
+		}
+		onkeydown?.(event)
 	}}
 	bind:reportValidity
 	bind:checkValidity
@@ -135,6 +190,7 @@
 	>{@render children?.()}
 </TextField>
 <Menu
+	id="listbox-{uid}"
 	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
 		? 'width'
 		: 'min-width'}:{clientWidth}px"
@@ -147,38 +203,32 @@
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={element}
-	onbeforetoggle={(e) => {
-		if (e.newState !== 'closed') {
-			blockEvent = true
-		}
-	}}
 	ontoggle={(e) => {
 		if (e.newState === 'closed') {
-			blockEvent = false
+			menuOpen = false
+			activeIndex = -1
 			if (!populated && finalPopulated && !value) {
 				finalPopulated = false
 			}
-		}
-		if (!focused) {
-			const event = {
-				...new FocusEvent('blur', { relatedTarget: element }),
-				currentTarget: element as EventTarget & HTMLInputElement,
-			} as FocusEvent & { currentTarget: EventTarget & HTMLInputElement }
-			onblur?.(event)
-			onfocusout?.(event)
+		} else {
+			menuOpen = true
+			// Ensure activeIndex valid when opening
+			if (activeIndex >= displayOptions.length) {
+				activeIndex = -1
+			}
 		}
 	}}
 	bind:element={menuElement}
 >
 	{#if useVirtualList}
 		<VirtualList height="250px" itemHeight={48} items={displayOptions}>
-			{#snippet row(option)}
-				{@render item(option)}
+			{#snippet row(option, index)}
+				{@render item(option, index)}
 			{/snippet}
 		</VirtualList>
 	{:else}
 		{#each displayOptions as option, index (index)}
-			{@render item(option)}
+			{@render item(option, index)}
 		{/each}
 	{/if}
 </Menu>

package/dist/autocomplete/AutoComplete.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { AutoCompleteProps } from './types.ts';
-declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "showPopover" | "hidePopover" | "reportValidity" | "checkValidity" | "focused">;
+declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "showPopover" | "hidePopover" | "reportValidity" | "checkValidity">;
 type AutoComplete = ReturnType<typeof AutoComplete>;
 export default AutoComplete;

package/dist/autocomplete/types.d.ts

@@ -2,8 +2,6 @@ import type { InputFieldProps } from '../types.ts';
 export interface AutoCompleteOption {
     value?: string | number;
     label: string;
-    disabled?: boolean;
-    selected?: boolean | undefined | null;
 }
 export interface AutoCompleteProps extends Omit<InputFieldProps, 'clientWidth' | 'clientHeight'> {
     options: AutoCompleteOption[];

package/dist/list/Item.svelte

@@ -13,10 +13,11 @@
 		disabled = false,
 		onfocus,
 		onblur,
+		softFocus = false,
 		...attributes
 	}: ItemProps = $props()
 
-	let focused = $state(false)
+	let focused = $derived(softFocus)
 	let visible = $state(false)
 	let element: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement | undefined = $state()
 	let observer: IntersectionObserver | undefined

package/dist/list/types.d.ts

@@ -6,6 +6,7 @@ interface ButtonProps extends HTMLButtonAttributes {
     end?: Snippet;
     variant: 'button';
     supportingText?: Snippet;
+    softFocus?: boolean;
 }
 interface AnchorProps extends HTMLAnchorAttributes {
     selected?: boolean;
@@ -14,6 +15,7 @@ interface AnchorProps extends HTMLAnchorAttributes {
     disabled?: boolean;
     variant: 'link';
     supportingText?: Snippet;
+    softFocus?: boolean;
 }
 interface TextProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
@@ -22,6 +24,7 @@ interface TextProps extends HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     variant?: 'text';
     supportingText?: Snippet;
+    softFocus?: boolean;
 }
 export type ItemProps = ButtonProps | AnchorProps | TextProps;
 export type ListItemProps = ButtonProps | AnchorProps | TextProps;

package/dist/select/Select.svelte

@@ -165,7 +165,28 @@
 		focusIndex = Math.min(Math.max(index, 0), options.length - 1)
 		await tick()
 		const el = document.getElementById(`${uid}-opt-${focusIndex}`)
-		;(el as HTMLElement | null)?.focus?.()
+		if (el) {
+			el.focus()
+		} else if (useVirtualList && menuElement) {
+			const viewport = menuElement.querySelector(
+				'svelte-virtual-list-viewport',
+			) as HTMLElement | null
+			if (viewport) {
+				let rowHeight = 48
+				const firstRow = viewport.querySelector('[id^="' + uid + '-opt-"]') as HTMLElement | null
+				if (firstRow) {
+					rowHeight = firstRow.offsetHeight || rowHeight
+				}
+				const top = focusIndex * rowHeight
+				const bottom = top + rowHeight
+				const { scrollTop, clientHeight } = viewport
+				if (top < scrollTop) {
+					viewport.scrollTop = top
+				} else if (bottom > scrollTop + clientHeight) {
+					viewport.scrollTop = bottom - clientHeight
+				}
+			}
+		}
 	}
 
 	const moveFocus = (delta: number) => {
@@ -457,14 +478,15 @@
 	</div>
 </div>
 
-{#snippet item(option: SelectOption, index?: number)}
+{#snippet item(option: SelectOption, index: number)}
 	{#if Array.isArray(value) && multiple}
 		<Item
-			id={typeof index === 'number' ? `${uid}-opt-${index}` : undefined}
+			id="{uid}-opt-{index}"
 			onclick={(event) => {
 				handleOptionSelect(event, option)
 				field?.focus()
 			}}
+			tabindex={-1}
 			disabled={option.disabled}
 			aria-disabled={option.disabled}
 			role="option"
@@ -501,11 +523,12 @@
 		</Item>
 	{:else}
 		<Item
-			id={typeof index === 'number' ? `${uid}-opt-${index}` : undefined}
+			id="{uid}-opt-{index}"
 			onclick={(event) => {
 				handleOptionSelect(event, option)
 				field?.focus()
 			}}
+			tabindex={-1}
 			disabled={option.disabled}
 			aria-disabled={option.disabled}
 			role="option"
@@ -554,17 +577,41 @@
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={anchorElement}
-	ontoggle={({ newState }) => {
+	ontoggle={async ({ newState }) => {
 		if (newState === 'open') {
 			menuOpen = true
+			let idx = -1
+			if (multiple) {
+				if (Array.isArray(value) && value.length) {
+					idx = options.findIndex((o) => value.includes(o.value) && !o.disabled)
+				}
+			} else {
+				idx = options.findIndex((o) => o.value === value && !o.disabled)
+			}
+			if (idx < 0) {
+				idx = options.findIndex((o) => !o.disabled)
+			}
+			if (idx < 0) idx = 0
+			focusIndex = idx
 		} else {
 			menuOpen = false
+			focusIndex = -1
 		}
 	}}
 	bind:element={menuElement}
 >
 	{#if useVirtualList}
-		<VirtualList height="250px" itemHeight={48} items={options}>
+		<VirtualList
+			height="250px"
+			itemHeight={48}
+			items={options}
+			rendered={({ start, end }) => {
+				if (focusIndex >= start && focusIndex < end) {
+					const el = document.getElementById(`${uid}-opt-${focusIndex}`)
+					el?.focus()
+				}
+			}}
+		>
 			{#snippet row(option, index)}
 				{@render item(option, index)}
 			{/snippet}

package/dist/select/VirtualList.svelte

@@ -10,6 +10,7 @@
 		end?: number
 		row: Snippet<[T, number]>
 		overscan?: number
+		rendered?: (event: { start: number; end: number }) => void
 	}
 
 	let {
@@ -19,7 +20,8 @@
 		start = $bindable(0),
 		end = $bindable(0),
 		row,
-		overscan = 4,
+		overscan = 0,
+		rendered,
 	}: VirtualListProps = $props()
 
 	let height_map: number[] = []
@@ -79,6 +81,8 @@
 
 		bottom = remaining * average_height
 		height_map.length = items.length
+
+		rendered?.({ start, end })
 	}
 
 	async function handle_scroll() {
@@ -151,6 +155,8 @@
 			const d = actual_height - expected_height
 			viewport.scrollTo(0, scrollTop + d)
 		}
+		await tick()
+		rendered?.({ start, end })
 	}
 
 	onMount(() => {

package/dist/select/VirtualList.svelte.d.ts

@@ -9,6 +9,10 @@ declare function $$render<T>(): {
         end?: number;
         row: Snippet<[T, number]>;
         overscan?: number;
+        rendered?: (event: {
+            start: number;
+            end: number;
+        }) => void;
     };
     exports: {};
     bindings: "start" | "end";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.24.10",
+  "version": "0.24.12",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {