noph-ui 0.24.10 → 0.24.11

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,81 @@
 		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
+		}
+	})
 </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"
+		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 +119,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 +162,7 @@
 	>{@render children?.()}
 </TextField>
 <Menu
+	id="listbox-{uid}"
 	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
 		? 'width'
 		: 'min-width'}:{clientWidth}px"
@@ -147,38 +175,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

@@ -457,14 +457,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 +502,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,11 +556,28 @@
 		? '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
+			await tick()
+			const el = document.getElementById(`${uid}-opt-${focusIndex}`)
+			;(el as HTMLElement | null)?.focus?.()
 		} else {
 			menuOpen = false
+			focusIndex = -1
 		}
 	}}
 	bind:element={menuElement}

package/package.json

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