mertani-web-toolkit 0.1.54 → 0.1.55

package/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.svelte

@@ -57,6 +57,8 @@
 		emptyMessage?: string;
 		closeOnSelect?: boolean;
 		loadingSuggestions?: boolean;
+		/** Jika false, suggestions tidak difilter di client (untuk data dari API yang sudah difilter) */
+		filterSuggestionsClientSide?: boolean;
 
 		// Events
 		onSelectSuggestion?: (value: string, option: SuggestionOption) => void;
@@ -126,6 +128,7 @@
 		emptyMessage = 'Tidak ada hasil',
 		closeOnSelect = true,
 		loadingSuggestions = false,
+		filterSuggestionsClientSide = true,
 
 		// Events
 		onSelectSuggestion,
@@ -155,15 +158,15 @@
 		...props
 	}: Props = $props();
 
-	let inputValue = $state(value);
-	let errorMessage = $state('');
-	let isFocused = $state(false);
-	let showList = $state(false);
-	let activeIndex = $state(-1);
-	let wrapperEl: HTMLDivElement | null = $state(null);
-	let inputEl: HTMLInputElement | null = $state(null);
-	let searchByValue = $state(searchBy);
-	let searchByOpen = $state(false);
+	let inputValue = $derived(value);
+	let errorMessage = $derived('');
+	let isFocused = $derived(false);
+	let showList = $derived(false);
+	let activeIndex = $derived(-1);
+	let wrapperEl: HTMLDivElement | null = $derived(null);
+	let inputEl: HTMLInputElement | null = $derived(null);
+	let searchByValue = $derived(searchBy);
+	let searchByOpen = $derived(false);
 
 	$effect(() => {
 		inputValue = value;
@@ -180,6 +183,11 @@
 		}
 	});
 
+	$effect(() => {
+		suggestions = suggestions;
+		activeIndex = -1;
+	});
+
 	const sizeConfig = $derived(() => {
 		switch (size) {
 			case 48:
@@ -309,12 +317,17 @@
 		return classes.join(' ');
 	});
 
-	function normalizeSuggestion(option: SuggestionOption) {
+	function normalizeSuggestion(option: SuggestionOption): {
+		label: string;
+		value: string;
+		raw: SuggestionOption;
+	} {
 		if (typeof option === 'string') {
 			return { label: option, value: option, raw: option };
 		}
-		const val = option.value ?? option.label;
-		return { label: option.label, value: val, raw: option };
+		const val = String(option.value ?? option.id ?? option.label ?? '');
+		const lbl = String(option.label ?? option.value ?? option.id ?? '');
+		return { label: lbl, value: val, raw: option };
 	}
 
 	const filteredSuggestions = $derived(() => {
@@ -325,9 +338,10 @@
 			return [];
 		}
 
-		const result = query
-			? normalized.filter((item) => item.label.toLowerCase().includes(query))
-			: normalized;
+		const result =
+			filterSuggestionsClientSide && query
+				? normalized.filter((item) => item.label.toLowerCase().includes(query))
+				: normalized;
 		return result.slice(0, maxSuggestions);
 	});
 
@@ -388,12 +402,6 @@
 		oninput?.(e);
 	}
 
-	function handleSearchByChange(e: Event) {
-		const target = e.target as HTMLSelectElement;
-		searchByValue = target.value;
-		searchBy = target.value;
-	}
-
 	function selectSearchBy(option: SearchByOption) {
 		searchByValue = option.value;
 		searchBy = option.value;
@@ -469,12 +477,15 @@
 	}
 
 	$effect(() => {
-		if (showList) {
-			setTimeout(() => document.addEventListener('click', handleClickOutside), 10);
-		} else {
+		if (!showList) {
 			document.removeEventListener('click', handleClickOutside);
+			return;
 		}
-		return () => document.removeEventListener('click', handleClickOutside);
+		const tid = setTimeout(() => document.addEventListener('click', handleClickOutside), 10);
+		return () => {
+			clearTimeout(tid);
+			document.removeEventListener('click', handleClickOutside);
+		};
 	});
 </script>
 

package/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.svelte.d.ts

@@ -42,6 +42,8 @@ interface Props extends HTMLInputAttributes {
     emptyMessage?: string;
     closeOnSelect?: boolean;
     loadingSuggestions?: boolean;
+    /** Jika false, suggestions tidak difilter di client (untuk data dari API yang sudah difilter) */
+    filterSuggestionsClientSide?: boolean;
     onSelectSuggestion?: (value: string, option: SuggestionOption) => void;
     onclick?: (event: MouseEvent) => void;
     oninput?: (event: Event) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.54",
+	"version": "0.1.55",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",