noph-ui 0.24.12 → 0.24.14

package/dist/autocomplete/AutoComplete.svelte

@@ -16,9 +16,7 @@
 		clampMenuWidth = false,
 		children,
 		optionsFilter,
-		showPopover = $bindable(),
-		hidePopover = $bindable(),
-		onoptionselect = (option) => {
+		onoptionselect = (option: AutoCompleteOption) => {
 			value = option.label
 			finalPopulated = populated
 			menuElement?.hidePopover()
@@ -26,43 +24,41 @@
 		onkeydown,
 		onclick,
 		oninput,
+		virtualThreshold = 300,
 		...attributes
 	}: AutoCompleteProps = $props()
 
-	showPopover = () => {
-		menuElement?.showPopover()
-	}
-
-	hidePopover = () => {
-		menuElement?.hidePopover()
-	}
 	const uid = $props.id()
-	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)
+	const query = $derived(value ? value.toLocaleLowerCase() : '')
+	const filterFn = $derived(
+		optionsFilter ||
+			((option: AutoCompleteOption) => !query || option.label.toLocaleLowerCase().includes(query)),
+	)
+	const NO_INDEX = -1
+	let displayOptions = $derived(query === '' && !optionsFilter ? options : options.filter(filterFn))
+	let useVirtualList = $derived(displayOptions.length > virtualThreshold)
+	let widthProp = $derived(clampMenuWidth || useVirtualList ? 'width' : 'min-width')
 	let clientWidth = $state(0)
 	let menuElement = $state<HTMLDivElement>()
 	let menuOpen = $state(false)
 	let finalPopulated = $state(populated)
-	let activeIndex = $state(-1)
+	let activeIndex = $state(NO_INDEX)
 
-	function setActive(index: number) {
+	const setActive = (index: number) => {
 		if (index < 0 || index >= displayOptions.length) {
-			activeIndex = -1
+			activeIndex = NO_INDEX
 			return
 		}
 		activeIndex = index
 	}
 
-	function moveActive(delta: number) {
+	const moveActive = (delta: number) => {
 		if (!displayOptions.length) {
-			activeIndex = -1
+			activeIndex = NO_INDEX
 			return
 		}
 		const next =
-			activeIndex === -1
+			activeIndex === NO_INDEX
 				? delta > 0
 					? 0
 					: displayOptions.length - 1
@@ -70,35 +66,39 @@
 		setActive(next)
 	}
 
+	const selectOption = (option: AutoCompleteOption) => {
+		onoptionselect(option)
+	}
+
 	$effect(() => {
 		if (activeIndex >= displayOptions.length) {
-			activeIndex = -1
+			activeIndex = NO_INDEX
+			return
 		}
-
-		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
-					}
-				}
+		if (!menuOpen || activeIndex < 0) return
+		const id = `${uid}-opt-${activeIndex}`
+		const optEl = document.getElementById(id)
+		if (optEl) {
+			optEl.scrollIntoView({ block: 'nearest' })
+			return
+		}
+		if (useVirtualList && menuElement) {
+			const viewport = menuElement.querySelector(
+				'svelte-virtual-list-viewport',
+			) as HTMLElement | null
+			if (!viewport) return
+			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
 			}
 		}
 	})
@@ -111,14 +111,14 @@
 		aria-selected={index === activeIndex}
 		role="option"
 		tabindex={-1}
-		onmousedown={(e) => {
+		onpointerdown={(e) => {
 			e.preventDefault()
 		}}
 		onmouseenter={() => setActive(index)}
 		onclick={(event) => {
 			event.preventDefault()
 			setActive(index)
-			onoptionselect(option)
+			selectOption(option)
 		}}
 		variant="button"
 		>{option.label}
@@ -138,46 +138,57 @@
 	aria-controls="listbox-{uid}"
 	aria-expanded={menuOpen}
 	aria-autocomplete="list"
-	aria-activedescendant={activeIndex >= 0 ? `${uid}-opt-${activeIndex}` : undefined}
+	aria-activedescendant={menuOpen && activeIndex >= 0 ? `${uid}-opt-${activeIndex}` : undefined}
 	aria-haspopup="listbox"
 	onclick={(event) => {
 		finalPopulated = true
-		showPopover()
+		menuElement?.showPopover()
 		onclick?.(event)
 	}}
 	oninput={(event) => {
-		showPopover()
-		activeIndex = -1
+		menuElement?.showPopover()
+		activeIndex = NO_INDEX
 		oninput?.(event)
 	}}
 	onkeydown={(event) => {
 		if (event.key === 'Tab') {
+			menuElement?.hidePopover()
 			return
 		}
-		if (event.key === 'Escape') {
-			hidePopover()
-			activeIndex = -1
+		if (event.key === 'Escape' && menuOpen) {
+			menuElement?.hidePopover()
+			activeIndex = NO_INDEX
 			event.preventDefault()
 			return
 		}
 		if (event.key === 'ArrowDown') {
 			finalPopulated = true
-			showPopover()
+			menuElement?.showPopover()
 			moveActive(1)
 			event.preventDefault()
 			return
 		}
+		if (event.key === 'Home') {
+			setActive(0)
+			event.preventDefault()
+			return
+		}
+		if (event.key === 'End') {
+			setActive(displayOptions.length - 1)
+			event.preventDefault()
+			return
+		}
 		if (event.key === 'ArrowUp') {
 			finalPopulated = true
-			showPopover()
+			menuElement?.showPopover()
 			moveActive(-1)
 			event.preventDefault()
 			return
 		}
-		if (event.key === 'Enter' && activeIndex >= 0) {
+		if (event.key === 'Enter' && menuOpen && activeIndex >= 0) {
 			const opt = displayOptions[activeIndex]
 			if (opt) {
-				onoptionselect(opt)
+				selectOption(opt)
 			}
 			event.preventDefault()
 			return
@@ -191,9 +202,7 @@
 </TextField>
 <Menu
 	id="listbox-{uid}"
-	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
-		? 'width'
-		: 'min-width'}:{clientWidth}px"
+	style="position-anchor:--{uid};{widthProp}:{clientWidth}px"
 	role="listbox"
 	class={[!displayOptions.length && 'np-auto-complete-empty']}
 	--np-menu-justify-self="none"
@@ -206,15 +215,14 @@
 	ontoggle={(e) => {
 		if (e.newState === 'closed') {
 			menuOpen = false
-			activeIndex = -1
+			activeIndex = NO_INDEX
 			if (!populated && finalPopulated && !value) {
 				finalPopulated = false
 			}
 		} else {
 			menuOpen = true
-			// Ensure activeIndex valid when opening
 			if (activeIndex >= displayOptions.length) {
-				activeIndex = -1
+				activeIndex = NO_INDEX
 			}
 		}
 	}}

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">;
+declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "reportValidity" | "checkValidity">;
 type AutoComplete = ReturnType<typeof AutoComplete>;
 export default AutoComplete;

package/dist/autocomplete/types.d.ts

@@ -10,4 +10,5 @@ export interface AutoCompleteProps extends Omit<InputFieldProps, 'clientWidth' |
     clampMenuWidth?: boolean;
     showPopover?: () => void;
     hidePopover?: () => void;
+    virtualThreshold?: number;
 }

package/dist/chip/InputChip.svelte

@@ -74,7 +74,7 @@
 			size="xs"
 			--np-icon-button-icon-size="1.125rem"
 			aria-label={ariaLabelRemove}
-			onpointerup={(
+			onclick={(
 				event: MouseEvent & {
 					currentTarget: EventTarget & HTMLButtonElement
 				},

package/dist/menu/Menu.svelte

@@ -82,7 +82,7 @@
 	}
 
 	$effect(() => {
-		if (element) {
+		if (element && !('anchorName' in document.documentElement.style)) {
 			getScrollableParent(element).addEventListener('scroll', onScroll, { passive: true })
 		}
 		return () => {

package/dist/select/Select.svelte

@@ -32,6 +32,7 @@
 		reportValidity = $bindable(),
 		checkValidity = $bindable(),
 		multiple,
+		virtualThreshold = 300,
 		clampMenuWidth = false,
 		...attributes
 	}: SelectProps = $props()
@@ -45,17 +46,18 @@
 			value = options.find((option) => option.selected)?.value
 		}
 	}
+
+	let valueArray = $derived<unknown[]>(
+		Array.isArray(value) ? value : value === undefined || value === null ? [] : [value],
+	)
+	let selectedSet = $derived.by<Set<unknown>>(() => new Set(valueArray))
 	let selectedOption: SelectOption[] = $derived(
-		options
-			.filter(
-				(option) =>
-					option.selected ||
-					(Array.isArray(value) ? value.includes(option.value) : value === option.value),
-			)
-			.map((option) => ({ ...option, selected: true })),
+		options.filter((o) => selectedSet.has(o.value)).map((o) => ({ ...o, selected: true })),
 	)
 
-	let useVirtualList = $derived(options.length > 4000)
+	let useVirtualList = $derived(options.length > virtualThreshold)
+
+	let widthProp = $derived(clampMenuWidth || useVirtualList ? 'width' : 'min-width')
 
 	let errorTextRaw: string = $state(errorText)
 	let errorRaw = $state(error)
@@ -129,64 +131,70 @@
 			}
 		}
 	})
-	const handleOptionSelect = (event: Event, option: SelectOption) => {
+
+	let cachedRowHeight = 0
+	const ensureRowHeight = () => {
+		if (!cachedRowHeight && menuElement) {
+			const viewport = menuElement.querySelector(
+				'svelte-virtual-list-viewport',
+			) as HTMLElement | null
+			if (viewport) {
+				const firstRow = viewport.querySelector('[id^="' + uid + '-opt-"]') as HTMLElement | null
+				cachedRowHeight = firstRow?.offsetHeight || 48
+			}
+		}
+		if (!cachedRowHeight) cachedRowHeight = 48
+		return cachedRowHeight
+	}
+	const scrollOptionIntoView = (index: number) => {
+		if (!useVirtualList || !menuElement) return
+		const viewport = menuElement.querySelector('svelte-virtual-list-viewport') as HTMLElement | null
+		if (!viewport) return
+		const rowHeight = ensureRowHeight()
+		const top = index * 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 finalizeSelection = async () => {
+		await tick()
+		if (doValidity && checkValidity()) {
+			errorRaw = error
+			errorTextRaw = errorText
+		}
+		selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
+	}
+	const toggleValue = (option: SelectOption) => {
 		if (multiple) {
-			if (Array.isArray(value)) {
-				if (value.includes(option.value)) {
-					selectedOption = selectedOption.filter((v) => v.value !== option.value)
-					value = value.filter((v) => v !== option.value)
-				} else {
-					selectedOption = [...selectedOption, option]
-					value = [...value, option.value]
-				}
+			let arr = Array.isArray(value) ? [...value] : []
+			const idx = arr.indexOf(option.value)
+			if (idx !== -1) {
+				arr.splice(idx, 1)
 			} else {
-				selectedOption = [option]
-				value = [option.value]
+				arr.push(option.value)
 			}
+			value = arr
 		} else {
-			selectedOption = [option]
 			value = option.value
-			menuElement?.hidePopover()
 		}
+	}
+	const handleOptionSelect = async (event: Event, option: SelectOption) => {
+		if (option.disabled) return
+		toggleValue(option)
+		if (!multiple) menuElement?.hidePopover()
 		event.preventDefault()
-		tick().then(() => {
-			if (doValidity && checkValidity()) {
-				errorRaw = error
-				errorTextRaw = errorText
-			}
-			selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
-		})
+		await finalizeSelection()
 	}
 
 	const openMenuAndFocus = async (index: number) => {
-		if (!menuOpen) {
-			menuElement?.showPopover()
-		}
+		if (!menuOpen) menuElement?.showPopover()
 		focusIndex = Math.min(Math.max(index, 0), options.length - 1)
 		await tick()
 		const el = document.getElementById(`${uid}-opt-${focusIndex}`)
-		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
-				}
-			}
-		}
+		if (el) el.focus()
+		else scrollOptionIntoView(focusIndex)
 	}
 
 	const moveFocus = (delta: number) => {
@@ -254,6 +262,23 @@
 			performTypeahead('')
 		}
 	}
+
+	const handleInvalid = (
+		event: Event & {
+			currentTarget: EventTarget & HTMLSelectElement
+		},
+	) => {
+		event.preventDefault()
+		const { currentTarget } = event
+		errorRaw = true
+		doValidity = true
+		if (errorText === '') {
+			errorTextRaw = currentTarget.validationMessage
+		}
+		if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
+			field?.focus()
+		}
+	}
 </script>
 
 {#snippet arrows()}
@@ -345,7 +370,6 @@
 				}
 				return
 			}
-			// Printable character for typeahead
 			if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
 				performTypeahead(key)
 				return
@@ -400,18 +424,7 @@
 								multiple
 								{onchange}
 								{oninput}
-								oninvalid={(event) => {
-									event.preventDefault()
-									const { currentTarget } = event
-									errorRaw = true
-									doValidity = true
-									if (errorText === '') {
-										errorTextRaw = currentTarget.validationMessage
-									}
-									if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
-										field?.focus()
-									}
-								}}
+								oninvalid={handleInvalid}
 								bind:value
 								bind:this={selectElement}
 							>
@@ -430,18 +443,7 @@
 								{form}
 								{onchange}
 								{oninput}
-								oninvalid={(event) => {
-									event.preventDefault()
-									const { currentTarget } = event
-									errorRaw = true
-									doValidity = true
-									if (errorText === '') {
-										errorTextRaw = currentTarget.validationMessage
-									}
-									if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
-										field?.focus()
-									}
-								}}
+								oninvalid={handleInvalid}
 								bind:value
 								bind:this={selectElement}
 							>
@@ -565,9 +567,7 @@
 
 <Menu
 	id="listbox-{uid}"
-	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
-		? 'width'
-		: 'min-width'}:{clientWidth}px"
+	style={`position-anchor:--${uid};${widthProp}:${clientWidth}px`}
 	role="listbox"
 	aria-multiselectable={multiple}
 	--np-menu-justify-self="none"
@@ -608,7 +608,8 @@
 			rendered={({ start, end }) => {
 				if (focusIndex >= start && focusIndex < end) {
 					const el = document.getElementById(`${uid}-opt-${focusIndex}`)
-					el?.focus()
+					if (el) el.focus()
+					else scrollOptionIntoView(focusIndex)
 				}
 			}}
 		>

package/dist/select/VirtualList.svelte

@@ -170,6 +170,7 @@
 	bind:this={viewport}
 	bind:offsetHeight={viewport_height}
 	onscroll={handle_scroll}
+	tabindex="-1"
 	style="height: {height};"
 >
 	<div bind:this={contents} style="padding-top: {top}px; padding-bottom: {bottom}px;">

package/dist/select/types.d.ts

@@ -20,4 +20,5 @@ export interface SelectProps extends Omit<HTMLSelectAttributes, 'size' | 'autoco
     clampMenuWidth?: boolean;
     reportValidity?: () => boolean;
     checkValidity?: () => boolean;
+    virtualThreshold?: number;
 }

package/dist/text-field/TextField.svelte

@@ -222,12 +222,11 @@
 							></textarea>
 						{:else}
 							<div class="input-wrapper">
-								{#if prefixText}
-									<span class="prefix">
-										{prefixText}
+								{#if suffixText}
+									<span class="suffix">
+										{suffixText}
 									</span>
 								{/if}
-								{@render children?.()}
 								<input
 									aria-describedby={supportingText || (errorTextRaw && errorRaw)
 										? `supporting-text-${uid}`
@@ -242,9 +241,10 @@
 									class="input"
 									aria-invalid={errorRaw}
 								/>
-								{#if suffixText}
-									<span class="suffix">
-										{suffixText}
+								{@render children?.()}
+								{#if prefixText}
+									<span class="prefix">
+										{prefixText}
 									</span>
 								{/if}
 							</div>
@@ -444,6 +444,7 @@
 		flex-wrap: wrap;
 		align-items: baseline;
 		min-width: 0;
+		flex-direction: row-reverse;
 	}
 
 	.input-wrapper > * {

package/package.json

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