@djcali570/component-lib 0.1.96 → 0.1.97

package/dist/DropDown5.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import type { DropDown5ColorScheme, DropDownItem } from './types.js';
 
+	// Props
 	let {
 		colorScheme: partialColorScheme = {},
 		name = 'dropdown',
 		title = 'Title',
-		value = $bindable(),
-		valueKey = $bindable(),
-		extraValue = $bindable(),
-		onUpdate = (key, v, ev) => {},
+		value = $bindable<any>(),
+		valueKey = $bindable<string | null | undefined>(),
+		extraValue = $bindable<string | null | undefined>(),
+		onUpdate = () => {},
 		disabled = false,
 		dropdownItems = [] as DropDownItem[]
 	}: {
@@ -26,6 +27,7 @@
 		dropdownItems?: DropDownItem[];
 	} = $props();
 
+	// Default color scheme
 	const defaultColorScheme: DropDown5ColorScheme = {
 		textColor: '#D6D6D6',
 		bgColor: '#121212',
@@ -38,112 +40,134 @@
 		itemHoverTextColor: '#121212'
 	};
 
-	// Merge partial colorScheme with defaults
-	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+	// Merge partial scheme with defaults
+	const colorScheme = $derived({ ...defaultColorScheme, ...partialColorScheme });
 
-	const id = generateRandomString();
-	let showDropdown = $state(false);
+	// Refs & state
+	let containerRef: HTMLDivElement | null = $state(null);
 	let dropdownRef: HTMLDivElement | null = $state(null);
+	let showDropdown = $state(false);
 	let filteredItems: DropDownItem[] = $state([]);
+	let highlightedIndex = $state(-1);
+	const id = generateRandomString();
 
+	// Effects
 	$effect(() => {
 		if (!BROWSER || !showDropdown || !dropdownRef) return;
+
 		setTimeout(() => {
 			if (!dropdownRef) return;
-			const dropdownRect = dropdownRef.getBoundingClientRect();
+
+			const rect = dropdownRef.getBoundingClientRect();
 			const viewportHeight = window.innerHeight;
-			if (dropdownRect.bottom > viewportHeight) {
-				const scrollY = window.scrollY + (dropdownRect.bottom - viewportHeight) + 10;
+
+			if (rect.bottom > viewportHeight) {
+				const scrollY = window.scrollY + (rect.bottom - viewportHeight) + 10;
 				window.scrollTo({ top: scrollY, behavior: 'smooth' });
 			}
 		}, 0);
 	});
 
-	onMount(() => {
-		document.addEventListener('click', closeDropdown);
-	});
+	$effect(() => {
+		if (!showDropdown || !dropdownRef || highlightedIndex < 0) return;
 
-	onDestroy(() => {
-		try {
-			document.removeEventListener('click', closeDropdown);
-		} catch (error) {}
+		const items = dropdownRef.querySelectorAll<HTMLButtonElement>('button');
+		items[highlightedIndex]?.scrollIntoView({ block: 'nearest' });
 	});
 
-	/**
-	 * Generate a random string so that each
-	 * input will have a unique id in the dom
-	 */
-	function generateRandomString() {
-		const length = 6;
-		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
-		let result = '';
-		for (let i = 0; i < length; i++) {
-			const randomIndex = Math.floor(Math.random() * characters.length);
-			result += characters.charAt(randomIndex);
-		}
+	// Outside click
+	function setupOutsideClick() {
+		if (!BROWSER) return;
+
+		const handler = (event: Event) => {
+			if (!containerRef?.contains(event.target as Node)) {
+				showDropdown = false;
+				validateInput();
+			}
+		};
 
-		return result;
+		document.addEventListener('pointerdown', handler);
+		return () => document.removeEventListener('pointerdown', handler);
+	}
+
+	onMount(() => setupOutsideClick());
+
+	// Helpers
+	function generateRandomString(length = 6) {
+		const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+		return Array.from({ length }, () =>
+			chars.charAt(Math.floor(Math.random() * chars.length))
+		).join('');
+	}
+
+	function handleBlur() {
+		setTimeout(() => {
+			if (!showDropdown) validateInput();
+		}, 100);
 	}
 
-	/**
-	 * Show the dropdown list
-	 */
 	function showDropdownList() {
 		showDropdown = true;
 		filteredItems = dropdownItems;
+		highlightedIndex = filteredItems.length > 0 ? 0 : -1;
 	}
 
-	function closeDropdown(event: Event) {
-		const target = event.target as HTMLElement;
-
-		if (target.id !== `dropdown-${id}`) {
-			showDropdown = false;
-			validateInput();
-		}
-	}
 	function filterItems() {
-		filteredItems = dropdownItems.filter((item) =>
-			item.value.toLowerCase().includes(value.toLowerCase())
-		);
+		const search = (value ?? '').toLowerCase();
+		filteredItems = dropdownItems.filter((item) => item.value.toLowerCase().includes(search));
+		highlightedIndex = filteredItems.length > 0 ? 0 : -1;
 	}
+
 	function selectItem(item: DropDownItem) {
-		// Set all bound values
 		value = item.value;
 		valueKey = item.id ?? '';
 		extraValue = item.extraValue ?? '';
-
-		// Notify parent
 		onUpdate(valueKey, value, extraValue);
-
-		// Close dropdown
 		showDropdown = false;
+		highlightedIndex = -1;
 	}
 
 	function validateInput() {
-		const matchedItem = dropdownItems.find(
-			(item) => item.value.toLowerCase() === value.toLowerCase()
-		);
-
-		if (matchedItem) {
-			// Valid match: sync values
-			value = matchedItem.value;
-			valueKey = matchedItem.id ?? '';
-			extraValue = matchedItem.extraValue ?? '';
-		} else {
-			// No match: clear all
+		const search = (value ?? '').toLowerCase();
+		const match = dropdownItems.find((item) => item.value.toLowerCase() === search);
+
+		if (match) selectItem(match);
+		else {
 			value = '';
 			valueKey = '';
 			extraValue = '';
+			onUpdate(valueKey, value, extraValue);
 		}
+	}
 
-		// Always notify parent of the current state
-		onUpdate(valueKey, value, extraValue);
+	function handleKeydown(e: KeyboardEvent) {
+		if (!showDropdown) return;
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlightedIndex = Math.min(highlightedIndex + 1, filteredItems.length - 1);
+		}
+
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlightedIndex = Math.max(highlightedIndex - 1, 0);
+		}
+
+		if (e.key === 'Enter' && highlightedIndex >= 0) {
+			e.preventDefault();
+			selectItem(filteredItems[highlightedIndex]);
+		}
+
+		if (e.key === 'Escape') {
+			showDropdown = false;
+			highlightedIndex = -1;
+		}
 	}
 </script>
 
 <div
 	class="dropdown5__container"
+	bind:this={containerRef}
 	style="
 --dropdown5__textColor: {colorScheme.textColor};
 --dropdown5__mainBgColor: {colorScheme.bgColor};
@@ -166,9 +190,10 @@
 				aria-haspopup="listbox"
 				{name}
 				bind:value
+				onkeydown={handleKeydown}
 				oninput={filterItems}
 				onfocus={showDropdownList}
-				onblur={validateInput}
+				onblur={handleBlur}
 				autocomplete="off"
 				{disabled}
 			/>
@@ -188,24 +213,22 @@
 			role="listbox"
 			aria-labelledby="dropdown-{id}-title"
 			bind:this={dropdownRef}
-			oninput={filterItems}
-			transition:fly={{
-				y: 10
-			}}
+			transition:fly={{ y: 10 }}
 		>
 			<div style="height:100%;">
 				{#each filteredItems as item, index}
 					<button
 						type="button"
 						class="dropdown5__list__item"
+						class:selected={index === highlightedIndex}
 						role="option"
 						aria-selected={item.value === value ? 'true' : 'false'}
-						onclick={() => selectItem(item)}
+						onmousedown={() => selectItem(item)}
 					>
-						{#if item.value === value}
-							<div class="fic">
-								<div style="padding-right: 0.5rem;">
-									<div class="fca" style="width: 1rem; height: 1rem;">
+						<div class="fic">
+							<div style="padding-right: 0.5rem;">
+								<div class="fca" style="width: 1rem; height: 1rem;">
+									{#if item.value === value}
 										<svg
 											viewBox="0 0 12 12"
 											xmlns="http://www.w3.org/2000/svg"
@@ -213,36 +236,24 @@
 											role="presentation"
 											focusable="false"
 											style="display: block; height: 12px; width: 12px; fill: currentcolor;"
-											><path
-												d="m10.5 1.939 1.061 1.061-7.061 7.061-.53-.531-3-3-.531-.53 1.061-1.061 3 3 5.47-5.469z"
-											></path></svg
 										>
-									</div>
+											<path
+												d="m10.5 1.939 1.061 1.061-7.061 7.061-.53-.531-3-3-.531-.53 1.061-1.061 3 3 5.47-5.469z"
+											></path>
+										</svg>
+									{/if}
 								</div>
-								{#if item.component}
-									{@const Component = item.component}
-									<div class="component" style={item.componentStyles}>
-										<Component {...item.props} />
-									</div>
-								{/if}
-								<div>{item.value}</div>
 							</div>
-						{:else}
-							<div class="fic">
-								<div style="padding-right: 0.5rem;">
-									<div style="width: 1rem; height: 1rem;"></div>
-								</div>
 
-								{#if item.component}
-									{@const Component = item.component}
-									<div class="component" style={item.componentStyles}>
-										<Component {...item.props} />
-									</div>
-								{/if}
+							{#if item.component}
+								{@const Component = item.component}
+								<div class="component" style={item.componentStyles}>
+									<Component {...item.props} />
+								</div>
+							{/if}
 
-								<div>{item.value}</div>
-							</div>
-						{/if}
+							<div>{item.value}</div>
+						</div>
 					</button>
 				{/each}
 			</div>
@@ -332,4 +343,9 @@
 		width: 2rem;
 		height: 2rem;
 	}
+
+	.selected {
+		background-color: var(--dropdown5__itemHoverBgColor);
+		color: var(--dropdown5__itemHoverTextColor);
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@djcali570/component-lib",
-	"version": "0.1.96",
+	"version": "0.1.97",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",