@joewinke/jatui 0.20.0 → 0.21.0

package/CLAUDE.md

@@ -26,7 +26,7 @@ Then import:
 | `SelectInput` | Dropdown select | `label`, `value` (bindable), `options: SelectOption[]`, `placeholder` |
 | `PhoneInput` | Intl phone (country dropdown + tel input, outputs E.164; caps national digits per country). Fires `onChange(value)` on every change. | `value` (bindable), `name`, `defaultCountry`, `required`, `onChange` |
 | `ChipInput` | Tag/chip entry with suggestions | `chips` (bindable), `suggestions: SuggestionGroup[]`, `placeholder` |
-| `SearchDropdown` | Searchable dropdown with grouped results, keyboard nav, avatar/initials options. `appendToBody` escapes table/overflow stacking contexts; `variant='chip'` renders a compact pill; `size='sm'` a smaller trigger; `dropup` opens upward; `clearable` shows an × when a value is set. Exposes `openDropdown()`. | `groups: SearchDropdownGroup[]`, `value`, `onChange`, `placeholder`, `variant`, `size`, `dropup`, `appendToBody`, `clearable`, `colorFn` |
+| `SearchDropdown` | Searchable dropdown with grouped results, keyboard nav, avatar/initials options. `appendToBody` escapes table/overflow stacking contexts; `variant='chip'` renders a compact pill; `size='sm'` a smaller trigger; `dropup` opens upward; `clearable` shows an × when a value is set. `onSearch` turns the built-in search box into a debounced server-side search hook (fires on open/clear with `''`; internal filtering is bypassed — the consumer updates `groups`). Exposes `openDropdown()`. | `groups: SearchDropdownGroup[]`, `value`, `onChange`, `placeholder`, `variant`, `size`, `dropup`, `appendToBody`, `clearable`, `colorFn`, `onSearch`, `searchDebounceMs` |
 | `FilterDropdown` | Multi-select filter dropdown | `label`, `options: string[]`, `selected: Set<string>` (bindable) |
 | `SortDropdown` | Sort by column with direction | `options: SortOption[]`, `sortBy` (bindable), `sortDir` (bindable) |
 | `InlineEdit` | Click-to-edit text | `value` (bindable), `segments: DisplaySegment[]`, `onSave` |

package/dist/components/SearchDropdown.svelte

@@ -36,6 +36,8 @@
 		triggerAttrs,
 		embedded = false,
 		onChange,
+		onSearch,
+		searchDebounceMs = 250,
 		onCreate,
 		createLabel = (q: string) => `Create "${q}"`,
 	}: {
@@ -65,6 +67,21 @@
 		/** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
 		embedded?: boolean;
 		onChange: (value: string) => void;
+		/**
+		 * Server-side search hook (mos-ibafm). When set, the built-in search box
+		 * drives ASYNC results instead of the client-side substring filter: every
+		 * keystroke (debounced to `searchDebounceMs`) calls onSearch with the
+		 * current query, and the consumer updates `groups` with the server's
+		 * response. Also fires on panel open (typically with '') so the consumer
+		 * can load the initial result set, and again when the query is cleared —
+		 * so '' means "reset to the default list". Internal filtering is bypassed
+		 * entirely while this is set: the consumer owns exactly what the list
+		 * shows (a fuzzy server match must not be re-filtered by substring).
+		 * With it absent, behavior is unchanged (client-side filter).
+		 */
+		onSearch?: (query: string) => void;
+		/** Debounce applied to onSearch keystrokes before the callback fires. */
+		searchDebounceMs?: number;
 		/**
 		 * When set, an always-present "create" row is rendered as the last option
 		 * whenever the search box is non-empty — it survives a zero-match filter (so
@@ -108,6 +125,10 @@
 	const activeColor = $derived(colorFn ? colorFn(value) : undefined);
 
 	const filteredGroups = $derived.by(() => {
+		// Server-search mode: the consumer owns the result set (groups arrive
+		// from onSearch responses) — re-filtering them client-side would hide
+		// fuzzy server matches that don't substring-match the query.
+		if (onSearch) return groups;
 		if (!searchQuery.trim()) return groups;
 		const q = searchQuery.toLowerCase();
 		const result: SearchDropdownGroup[] = [];
@@ -166,6 +187,19 @@
 		});
 	}
 
+	// Debounced onSearch: one timer per open panel; each keystroke reruns the
+	// effect, which clears the pending timer and re-arms it — a burst of
+		// keystrokes collapses into a single callback firing `searchDebounceMs`
+		// after the last one. Firing on open too (query is '' after a reset) is
+		// what lets the consumer load the initial result set from the server.
+		$effect(() => {
+			if (!onSearch) return;
+			if (!open && !embedded) return;
+			const q = searchQuery;
+			const t = setTimeout(() => onSearch(q), searchDebounceMs);
+			return () => clearTimeout(t);
+		});
+
 	function handleSearchKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			e.stopPropagation();

package/dist/components/SearchDropdown.svelte.d.ts

@@ -36,6 +36,21 @@ type $$ComponentProps = {
     /** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
     embedded?: boolean;
     onChange: (value: string) => void;
+    /**
+     * Server-side search hook (mos-ibafm). When set, the built-in search box
+     * drives ASYNC results instead of the client-side substring filter: every
+     * keystroke (debounced to `searchDebounceMs`) calls onSearch with the
+     * current query, and the consumer updates `groups` with the server's
+     * response. Also fires on panel open (typically with '') so the consumer
+     * can load the initial result set, and again when the query is cleared —
+     * so '' means "reset to the default list". Internal filtering is bypassed
+     * entirely while this is set: the consumer owns exactly what the list
+     * shows (a fuzzy server match must not be re-filtered by substring).
+     * With it absent, behavior is unchanged (client-side filter).
+     */
+    onSearch?: (query: string) => void;
+    /** Debounce applied to onSearch keystrokes before the callback fires. */
+    searchDebounceMs?: number;
     /**
      * When set, an always-present "create" row is rendered as the last option
      * whenever the search box is non-empty — it survives a zero-match filter (so

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",