sveltacular 0.0.77 → 1.0.0

package/dist/forms/list-box/list-box.svelte

@@ -1,103 +1,159 @@
-<script>import { createEventDispatcher } from "svelte";
-import FormField from "../form-field.svelte";
-import FormLabel from "../form-label.svelte";
-import { uniqueId } from "../../helpers/unique-id.js";
-import Menu from "../../generic/menu/menu.svelte";
-import AngleUpIcon from "../../icons/angle-up-icon.svelte";
-import debounce from "../../helpers/debounce.js";
-import { browser } from "$app/environment";
-export let value = null;
-export let items = [];
-export let size = "full";
-export let disabled = false;
-export let required = false;
-export let searchable = false;
-export let search = void 0;
-export let placeholder = "";
-const id = uniqueId();
-const dispatch = createEventDispatcher();
-const getText = () => items.find((item) => item.value == value)?.name || "";
-let text = getText();
-let isMenuOpen = false;
-let highlightIndex = -1;
-let filteredItems = [];
-$: isSeachable = searchable || !!search;
-const onSelect = (e) => {
-  value = e.detail.value;
-  dispatch("change", value);
-  text = getText();
-  applyFilter();
-  isMenuOpen = false;
-};
-const focusOnInput = () => {
-  if (browser) document.getElementById(id)?.focus();
-};
-const toggle = () => isMenuOpen = !open;
-const clickArrow = () => {
-  if (disabled) return;
-  toggle();
-  if (isMenuOpen) focusOnInput();
-};
-const onInputKeyPress = (e) => {
-  if (disabled) return;
-  if (e.key == "Escape") {
-    isMenuOpen = false;
-    return;
-  }
-  if (e.key == "Enter" || e.key == "Tab") {
-    isMenuOpen = false;
-    if (highlightIndex > -1) {
-      onSelect(new CustomEvent("select", { detail: filteredItems[highlightIndex] }));
-    }
-    return;
-  }
-  if (e.key == "ArrowDown") {
-    highlightIndex = Math.min(highlightIndex + 1, filteredItems.length - 1);
-    isMenuOpen = true;
-    return;
-  }
-  if (e.key == "ArrowUp") {
-    highlightIndex = Math.max(highlightIndex - 1, -1);
-    if (highlightIndex == -1) isMenuOpen = false;
-    return;
-  }
-  if (e.key.length == 1 || e.key == "Backspace" || e.key == "Delete") {
-    isMenuOpen = true;
-    highlightIndex = 0;
-    triggerSearch();
-  }
-};
-const triggerSearch = debounce(async () => {
-  if (search && isSeachable) {
-    items = await search(text);
-  }
-  updateText();
-  applyFilter();
-}, 300);
-const applyFilter = () => {
-  const searchText = text.trim().toLowerCase();
-  filteredItems = searchText && isSeachable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
-};
-const clear = () => {
-  if (disabled) return;
-  text = "";
-  value = "";
-  triggerSearch();
-  focusOnInput();
-};
-const updateText = async () => {
-  if (browser) {
-    const textBox = document.getElementById(id);
-    if (document.activeElement != textBox) text = getText();
-  }
-};
-triggerSearch();
-$: open = isMenuOpen && !disabled;
+<script lang="ts">
+	import type { DropdownOption, FormFieldSizeOptions, MenuOption } from '../../types/form.js';
+	import FormField from '../form-field.svelte';
+	import FormLabel from '../form-label.svelte';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import Menu from '../../generic/menu/menu.svelte';
+	import AngleUpIcon from '../../icons/angle-up-icon.svelte';
+	import debounce from '../../helpers/debounce.js';
+	import { browser } from '$app/environment';
+	import type { SearchFunction } from './list-box.js';
+
+	let {
+		value = $bindable(null as string | null),
+		items = [] as DropdownOption[],
+		size = 'full' as FormFieldSizeOptions,
+		disabled = false,
+		required = false,
+		searchable = false,
+		search = undefined as SearchFunction | undefined,
+		placeholder = '',
+		onChange = undefined,
+		label = undefined,
+		virtualScroll = false,
+		itemHeight = 40
+	}: {
+		value?: string | null;
+		items?: DropdownOption[];
+		size?: FormFieldSizeOptions;
+		disabled?: boolean;
+		required?: boolean;
+		searchable?: boolean;
+		search?: SearchFunction | undefined;
+		placeholder?: string;
+		onChange?: ((value: string | null) => void) | undefined;
+		label?: string;
+		virtualScroll?: boolean;
+		itemHeight?: number;
+	} = $props();
+
+	const id = uniqueId();
+	const listboxId = `${id}-listbox`;
+	const getText = () => items.find((item) => item.value == value)?.name || '';
+
+	let text = $state(getText());
+	let isMenuOpen = $state(false);
+	let highlightIndex = $state(-1);
+	let filteredItems = $state<MenuOption[]>([]);
+	let isSeachable = $derived(searchable || !!search);
+	
+	// Get the ID of the highlighted option for ARIA
+	let activeDescendant = $derived(
+		highlightIndex >= 0 && filteredItems[highlightIndex]
+			? `${listboxId}-option-${highlightIndex}`
+			: undefined
+	);
+
+	// When an item is selected from the dropdown menu
+	const onSelect = (item: MenuOption) => {
+		value = item.value;
+		onChange?.(value);
+		text = getText();
+		applyFilter();
+		isMenuOpen = false;
+	};
+
+	const focusOnInput = () => {
+		if (browser) document.getElementById(id)?.focus();
+	};
+
+	// Toggle open or closed
+	const toggle = () => (isMenuOpen = !open);
+
+	// Click arrow
+	const clickArrow = () => {
+		if (disabled) return;
+		toggle();
+		if (isMenuOpen) focusOnInput();
+	};
+
+	// Handle key presses in the input
+	const onInputKeyPress = (e: KeyboardEvent) => {
+		if (disabled) return;
+		if (e.key == 'Escape') {
+			isMenuOpen = false;
+			return;
+		}
+		if (e.key == 'Enter' || e.key == 'Tab') {
+			isMenuOpen = false;
+			if (highlightIndex > -1) {
+				onSelect(filteredItems[highlightIndex]);
+			}
+			return;
+		}
+		if (e.key == 'ArrowDown') {
+			highlightIndex = Math.min(highlightIndex + 1, filteredItems.length - 1);
+			isMenuOpen = true;
+			return;
+		}
+		if (e.key == 'ArrowUp') {
+			highlightIndex = Math.max(highlightIndex - 1, -1);
+			if (highlightIndex == -1) isMenuOpen = false;
+			return;
+		}
+		if (e.key.length == 1 || e.key == 'Backspace' || e.key == 'Delete') {
+			isMenuOpen = true;
+			highlightIndex = 0;
+			triggerSearch();
+		}
+	};
+
+	// User is typing in the search box
+	const triggerSearch = debounce(async () => {
+		if (search && isSeachable) {
+			items = await search(text);
+		}
+		updateText();
+		applyFilter();
+	}, 300);
+
+	// Text or items have changed, we should apply the filter
+	const applyFilter = () => {
+		const searchText = text.trim().toLowerCase();
+		filteredItems =
+			searchText && isSeachable
+				? items
+						.map((item, index) => ({ ...item, index }))
+						.filter((item) => item.name.toLowerCase().includes(searchText))
+				: items.map((item, index) => ({ ...item, index }));
+	};
+
+	const clear = () => {
+		if (disabled) return;
+		text = '';
+		value = '';
+		triggerSearch();
+		focusOnInput();
+	};
+
+	// When items change, we should change the text to match the value
+	const updateText = async () => {
+		if (browser) {
+			const textBox = document.getElementById(id) as HTMLInputElement;
+			// Don't change text if they're currently typing
+			if (document.activeElement != textBox) text = getText();
+		}
+	};
+
+	// Do initial search
+	triggerSearch();
+
+	let open = $derived(isMenuOpen && !disabled);
 </script>
 
 <FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required} {disabled}><slot /></FormLabel>
+	{#if label}
+		<FormLabel {id} {required} {disabled} {label} />
 	{/if}
 	<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
 		<input
@@ -108,16 +164,38 @@ $: open = isMenuOpen && !disabled;
 			{disabled}
 			{placeholder}
 			readonly={!isSeachable}
-			on:focus={() => (isMenuOpen = true)}
-			on:keyup={onInputKeyPress}
+			role="combobox"
+			aria-expanded={open}
+			aria-controls={listboxId}
+			aria-autocomplete={isSeachable ? 'list' : 'none'}
+			aria-activedescendant={activeDescendant}
+			aria-haspopup="listbox"
+			onfocus={() => (isMenuOpen = true)}
+			onkeyup={onInputKeyPress}
 			data-value={value}
 			data-text={text}
 		/>
-		<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow} {disabled}>
+		<button
+			type="button"
+			class="icon"
+			onclick={clickArrow}
+			onkeydown={clickArrow}
+			{disabled}
+			aria-label={open ? 'Close options' : 'Open options'}
+			tabindex="-1"
+		>
 			<AngleUpIcon />
 		</button>
 		{#if text && isSeachable}
-			<button type="button" class="clear" on:click={clear} on:keydown={clear} {disabled}>
+			<button
+				type="button"
+				class="clear"
+				onclick={clear}
+				onkeydown={clear}
+				{disabled}
+				aria-label="Clear selection"
+				tabindex="-1"
+			>
 				X
 			</button>
 		{/if}
@@ -127,10 +205,13 @@ $: open = isMenuOpen && !disabled;
 				{open}
 				closeAfterSelect={false}
 				searchText={text}
-				on:select={onSelect}
+				onSelect={onSelect}
 				size="full"
 				bind:highlightIndex
 				bind:value
+				{listboxId}
+				{virtualScroll}
+				{itemHeight}
 			/>
 		</div>
 	</div>
@@ -146,15 +227,15 @@ div.disabled {
 }
 div input {
   width: 100%;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--form-input-border, black);
-  background-color: var(--form-input-bg, white);
-  color: var(--form-input-fg, black);
-  font-size: 0.875rem;
+  padding: var(--spacing-sm) var(--spacing-base);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--form-input-border);
+  background-color: var(--form-input-bg);
+  color: var(--form-input-fg);
+  font-size: var(--font-base);
   font-weight: 500;
   line-height: 1.25rem;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
+  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
   user-select: none;
   white-space: nowrap;
 }

package/dist/forms/list-box/list-box.svelte.d.ts

@@ -1,31 +1,19 @@
-import { SvelteComponent } from "svelte";
 import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
 import type { SearchFunction } from './list-box.js';
-declare const __propDef: {
-    props: {
-        value?: string | null;
-        items?: DropdownOption[];
-        size?: FormFieldSizeOptions;
-        disabled?: boolean;
-        required?: boolean;
-        searchable?: boolean;
-        search?: SearchFunction | undefined;
-        placeholder?: string;
-    };
-    events: {
-        change: CustomEvent<string | null>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    value?: string | null;
+    items?: DropdownOption[];
+    size?: FormFieldSizeOptions;
+    disabled?: boolean;
+    required?: boolean;
+    searchable?: boolean;
+    search?: SearchFunction | undefined;
+    placeholder?: string;
+    onChange?: ((value: string | null) => void) | undefined;
+    label?: string;
+    virtualScroll?: boolean;
+    itemHeight?: number;
 };
-export type ListBoxProps = typeof __propDef.props;
-export type ListBoxEvents = typeof __propDef.events;
-export type ListBoxSlots = typeof __propDef.slots;
-export default class ListBox extends SvelteComponent<ListBoxProps, ListBoxEvents, ListBoxSlots> {
-}
-export {};
+declare const ListBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ListBox = ReturnType<typeof ListBox>;
+export default ListBox;