update to svelte 5

src/lib/components/Input/Search.svelte

@@ -1,23 +1,34 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	let {
+		id,
+		value = $bindable(),
+		inputValue = $bindable(),
+		suggestionRequired = false,
+		emptyAllowed = false,
+		searchSuggestionFunc = () => Promise.resolve([]),
+		invalidMessage,
+		size = 'md',
+		label,
+		required = false,
+		onsubmit
+	}: {
+		id?: string;
+		value?: string;
+		inputValue?: string;
+		suggestionRequired?: boolean;
+		emptyAllowed?: boolean;
+		searchSuggestionFunc?: (input: string) => Promise<{ name: string; value: string }[]>;
+		invalidMessage?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		label?: string;
+		required?: boolean;
+		onsubmit?: (event: Event & { input: string; value: string }) => void;
+	} = $props();
 
-	export let id: string | null = null;
-	export let value = '';
-	export let inputValue = '';
-	export let suggestionRequired = false;
-	export let emptyAllowed = false;
-	export let searchSuggestionFunc: (
-		input: string
-	) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]);
-	export let invalidMessage: string | null = null;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let label: string | null = null;
-	export let required = false;
-
-	const dispatch = createEventDispatcher();
-
-	let searchSuggestions: { name: string; value: string }[] = [];
-	$: if (!suggestionRequired) value = inputValue;
+	let searchSuggestions: { name: string; value: string }[] = $state([]);
+	$effect(() => {
+		if (!suggestionRequired) value = inputValue;
+	});
 </script>
 
 <div class="relative">
@@ -42,7 +53,7 @@
 			{id}
 			{required}
 			bind:value={inputValue}
-			on:input={(e) => {
+			oninput={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
 				value = '';
 				searchSuggestionFunc(inputValue).then((v) => {
 					searchSuggestions = v;
@@ -51,15 +62,15 @@
 						inputValue = searchSuggestion.name;
 						value = searchSuggestion.value;
 						searchSuggestions = [];
-						e.target?.setCustomValidity('');
-						dispatch('submit', { input: inputValue, value: value });
+						e.currentTarget.setCustomValidity('');
+						onsubmit && onsubmit(Object.assign(e, { input: inputValue, value: value }));
 					} else if (inputValue === '' && emptyAllowed) {
-						dispatch('submit', { input: '', value: '' });
+						onsubmit && onsubmit(Object.assign(e, { input: '', value: '' }));
 					}
 				});
 			}}
-			on:invalid={(e) => {
-				if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
+			oninvalid={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+				invalidMessage && e.currentTarget.setCustomValidity(invalidMessage);
 			}}
 			pattern={suggestionRequired
 				? `${value ? inputValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
@@ -74,11 +85,11 @@
 					<button
 						class="block w-full overflow-hidden text-ellipsis whitespace-nowrap"
 						title="{searchSuggestion.name} ({searchSuggestion.value})"
-						on:click|preventDefault={() => {
+						onclick={(e) => {
 							inputValue = searchSuggestion.name;
 							value = searchSuggestion.value;
 							searchSuggestions = [];
-							dispatch('submit', { input: inputValue, value: value });
+							onsubmit && onsubmit(Object.assign(e, { input: inputValue, value: value }));
 						}}>{searchSuggestion.name}</button
 					>
 				</li>
@@ -90,7 +101,8 @@
 <!-- close the search suggestions box when clicking outside -->
 {#if inputValue && searchSuggestions.length !== 0}
 	<button
+		aria-label=" "
 		class="absolute top-0 left-0 z-10 w-full h-full cursor-default"
-		on:click={() => (searchSuggestions = [])}
-	/>
+		onclick={() => (searchSuggestions = [])}
+	></button>
 {/if}