@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -100,6 +100,20 @@
 	}
 	export type NavigableItem = DropdownMenuActionItem | NavigableExpandable;
 
+	/** Search configuration options */
+	export interface DropdownMenuSearchConfig {
+		/** Placeholder text for search input */
+		placeholder?: string;
+		/** Search strategy */
+		strategy?: "prefix" | "exact" | "fuzzy";
+		/** Custom function to extract searchable text from an item */
+		getContent?: (item: DropdownMenuActionItem | DropdownMenuExpandableItem) => string;
+		/** Auto-focus search input when menu opens */
+		autoFocus?: boolean;
+		/** Message shown when no results found */
+		noResultsMessage?: string;
+	}
+
 	export interface Props extends Omit<HTMLButtonAttributes, "children"> {
 		/** Menu items to display */
 		items: DropdownMenuItem[];
@@ -119,6 +133,8 @@
 		closeOnEscape?: boolean;
 		/** Force fallback positioning mode (for testing) */
 		forceFallback?: boolean;
+		/** Enable search/filter functionality (true for defaults, or config object) */
+		search?: boolean | DropdownMenuSearchConfig;
 		/** Classes for the wrapper element */
 		class?: string;
 		/** Classes for the trigger button */
@@ -145,6 +161,10 @@
 		classExpandableContent?: string;
 		/** Classes for backdrop (fallback mode only) */
 		classBackdrop?: string;
+		/** Classes for search input container */
+		classSearchContainer?: string;
+		/** Classes for search input */
+		classSearchInput?: string;
 		/** Show backdrop in fallback mode (default: true) */
 		showBackdrop?: boolean;
 		/** Custom trigger snippet - receives isOpen state, toggle function, and ARIA props for full control */
@@ -223,13 +243,12 @@
 	import { getId } from "../../utils/get-id.js";
 	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
 	import { ItemCollection } from "@marianmeres/item-collection";
-	import { iconChevronDown, iconChevronRight } from "../../icons/index.js";
+	import { iconChevronDown, iconChevronRight, iconSearch, iconX } from "../../icons/index.js";
 	import { onClickOutside } from "runed";
 	import { slide, fade } from "svelte/transition";
 	import { untrack } from "svelte";
 	import Thc from "../Thc/Thc.svelte";
 	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
-	import "./index.css";
 	import { BodyScroll } from "../../utils/body-scroll-locker.js";
 	import { waitForTwoRepaints } from "../../utils/paint.js";
 
@@ -243,6 +262,7 @@
 		closeOnClickOutside = true,
 		closeOnEscape = true,
 		forceFallback = false,
+		search,
 		class: classProp,
 		classTrigger,
 		classDropdown,
@@ -256,6 +276,8 @@
 		classExpandable,
 		classExpandableContent,
 		classBackdrop,
+		classSearchContainer,
+		classSearchInput,
 		showBackdrop = true,
 		trigger,
 		children,
@@ -289,6 +311,91 @@
 	// Track expanded sections (independent toggle - multiple can be open)
 	let expandedSections = $state<Set<string | number>>(new Set());
 
+	// Search state
+	let searchQuery = $state("");
+	let searchInputEl: HTMLInputElement | undefined = $state();
+
+	// Default content extractor for search
+	function defaultGetContent(
+		item: DropdownMenuActionItem | DropdownMenuExpandableItem
+	): string {
+		if (typeof item.label === "string") return item.label;
+		if (item.label && typeof item.label === "object" && "text" in item.label) {
+			return (item.label as { text?: string }).text || "";
+		}
+		return String(item.id);
+	}
+
+	// Normalize search config
+	let searchConfig = $derived.by(() => {
+		if (!search) return null;
+		const defaults = {
+			placeholder: "Search...",
+			strategy: "prefix" as const,
+			getContent: defaultGetContent,
+			autoFocus: true,
+			noResultsMessage: "No results found",
+		};
+		return search === true ? defaults : { ...defaults, ...search };
+	});
+
+	// Extract all searchable items (action + expandable + nested actions)
+	let allSearchableItems = $derived.by(() => {
+		const result: (DropdownMenuActionItem | DropdownMenuExpandableItem)[] = [];
+		for (const item of items) {
+			if (item.type === "action") result.push(item);
+			if (item.type === "expandable") {
+				result.push(item);
+				for (const child of item.items) {
+					if (child.type === "action") result.push(child);
+				}
+			}
+		}
+		return result;
+	});
+
+	// Searchable collection (recreate when items or config changes)
+	let searchableCollection = $derived.by(() => {
+		if (!searchConfig) return null;
+		return new ItemCollection(allSearchableItems, {
+			idPropName: "id",
+			searchable: { getContent: searchConfig.getContent },
+		});
+	});
+
+	// Filtered items based on search
+	let filteredItems = $derived.by(() => {
+		if (!searchConfig || !searchQuery.trim() || !searchableCollection) {
+			return items;
+		}
+		const results = searchableCollection.search(searchQuery, searchConfig.strategy);
+		const matchedIds = new Set(results.map((r) => r.id));
+
+		return items.filter((item) => {
+			if (item.type === "divider" || item.type === "header" || item.type === "custom") {
+				return false; // Hide during search
+			}
+			if (item.type === "action") return matchedIds.has(item.id);
+			if (item.type === "expandable") {
+				return (
+					matchedIds.has(item.id) ||
+					item.items.some((c) => c.type === "action" && matchedIds.has(c.id))
+				);
+			}
+			return false;
+		});
+	});
+
+	// Matched IDs for use in template filtering during search
+	let searchMatchedIds = $derived.by(() => {
+		if (!searchConfig || !searchQuery.trim() || !searchableCollection) {
+			return null;
+		}
+		return new Set(
+			searchableCollection.search(searchQuery, searchConfig.strategy).map((r) => r.id)
+		);
+	});
+
 	// Initialize expanded sections from defaultExpanded
 	$effect(() => {
 		const initial = new Set<string | number>();
@@ -307,10 +414,20 @@
 	});
 	let _navItems = $derived($navItems);
 
-	// Flatten navigable items (respects expanded state)
+	// Flatten navigable items (respects expanded state and search filter)
 	let navigableItems = $derived.by(() => {
+		const sourceItems = searchConfig && searchQuery.trim() ? filteredItems : items;
 		const flat: NavigableItem[] = [];
-		for (const item of items) {
+
+		// When searching, get matched IDs to filter expandable children
+		const matchedIds =
+			searchConfig && searchQuery.trim() && searchableCollection
+				? new Set(
+						searchableCollection.search(searchQuery, searchConfig.strategy).map((r) => r.id)
+					)
+				: null;
+
+		for (const item of sourceItems) {
 			if (item.type === "action" && !item.disabled) {
 				flat.push(item);
 			} else if (item.type === "expandable" && !item.disabled) {
@@ -320,7 +437,14 @@
 				if (expandedSections.has(item.id)) {
 					for (const child of item.items) {
 						if (child.type === "action" && !child.disabled) {
-							flat.push(child);
+							// During search, only include matched children
+							if (matchedIds) {
+								if (matchedIds.has(child.id)) {
+									flat.push(child);
+								}
+							} else {
+								flat.push(child);
+							}
 						}
 					}
 				}
@@ -350,6 +474,45 @@
 		}
 	});
 
+	// Auto-focus search input when menu opens
+	$effect(() => {
+		if (isOpen && searchConfig?.autoFocus && searchInputEl) {
+			requestAnimationFrame(() => searchInputEl?.focus());
+		}
+	});
+
+	// Reset search when menu closes
+	$effect(() => {
+		if (!isOpen) {
+			searchQuery = "";
+		}
+	});
+
+	// Auto-expand sections with matching children during search
+	$effect(() => {
+		if (!searchConfig || !searchQuery.trim() || !searchableCollection) return;
+		const matchedIds = new Set(
+			searchableCollection.search(searchQuery, searchConfig.strategy).map((r) => r.id)
+		);
+		// Use untrack to avoid infinite loop (read without creating dependency)
+		const currentExpanded = untrack(() => expandedSections);
+		const newExpanded = new Set(currentExpanded);
+		let hasChanges = false;
+		for (const item of items) {
+			if (item.type === "expandable") {
+				if (item.items.some((c) => c.type === "action" && matchedIds.has(c.id))) {
+					if (!newExpanded.has(item.id)) {
+						newExpanded.add(item.id);
+						hasChanges = true;
+					}
+				}
+			}
+		}
+		if (hasChanges) {
+			expandedSections = newExpanded;
+		}
+	});
+
 	// Reset runtime fallback when menu closes
 	$effect(() => {
 		if (!isOpen) {
@@ -475,28 +638,57 @@
 		}
 	}
 
+	// Handle keyboard events in search input
+	function handleSearchKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape" && searchQuery) {
+			e.preventDefault();
+			e.stopPropagation();
+			searchQuery = "";
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			e.stopPropagation();
+			navItems.setActiveFirst();
+		}
+		if (e.key === "Enter" && filteredItems.length > 0) {
+			e.preventDefault();
+			const first = filteredItems.find(
+				(i): i is DropdownMenuActionItem => i.type === "action" && !i.disabled
+			);
+			if (first) selectItem(first);
+		}
+	}
+
 	// Computed transition duration
 	let transitionDuration = $derived(reducedMotion.current ? 0 : 100);
 
 	// Position styles for CSS Anchor Positioning
 	let dropdownStyle = $derived.by(() => {
 		if (isSupported) {
+			// Use fixed height when search is enabled AND position is a "top" variant
+			// to prevent jarring resize during filtering (dropdown grows upward)
+			const isTopPosition = position.startsWith("top");
+			const heightStyle =
+				searchConfig && isTopPosition ? `height: ${maxHeight};` : `max-height: ${maxHeight};`;
 			return `
 				position: fixed;
 				position-anchor: ${anchorName};
 				position-area: ${POSITION_MAP[position] || "bottom"};
 				margin: ${offset};
-				max-height: ${maxHeight};
+				${heightStyle}
 			`;
 		} else {
 			// Fallback: centered modal overlay
+			// Use fixed height when search is enabled to prevent jarring resize during filtering
+			const heightStyle = searchConfig ? `height: ${maxHeight};` : `max-height: ${maxHeight};`;
 			return `
 				position: fixed;
 				top: 50%;
 				left: 50%;
 				transform: translate(-50%, -50%);
 				max-width: 90vw;
-				max-height: ${maxHeight};
+				${heightStyle}
 				z-index: 50;
 			`;
 		}
@@ -510,7 +702,13 @@
 		if (["ArrowDown", "ArrowUp"].includes(e.key)) {
 			e.preventDefault();
 			if (e.key === "ArrowUp") {
-				e.metaKey ? navItems.setActiveFirst() : navItems.setActivePrevious();
+				// Check if at first item and search is active - return to search input
+				if (searchConfig && _navItems.active?.id === navigableItems[0]?.id) {
+					navItems.unsetActive();
+					searchInputEl?.focus();
+				} else {
+					e.metaKey ? navItems.setActiveFirst() : navItems.setActivePrevious();
+				}
 			} else {
 				e.metaKey ? navItems.setActiveLast() : navItems.setActiveNext();
 			}
@@ -521,6 +719,8 @@
 			e.preventDefault();
 			navItems.setActiveLast();
 		} else if (["Enter", " "].includes(e.key)) {
+			// Don't intercept space when typing in search input
+			if (e.key === " " && e.target === searchInputEl) return;
 			e.preventDefault();
 			const active = _navItems.active;
 			if (active) {
@@ -653,29 +853,65 @@
 					</button>
 				</div>
 			{/if}
-			{#each items as item}
-				{#if item.type === "action"}
-					{@const isActive = _navItems.active?.id === item.id}
-					<ListItemButton
-						id={itemId(item.id)}
-						role="menuitem"
-						focused={isActive}
-						contentBefore={item.contentBefore}
-						contentAfter={item.contentAfter}
-						class={twMerge(classItem, item.class)}
-						classFocused={classItemActive}
-						classContentBefore={classItemBefore}
-						classContentAfter={classItemAfter}
-						onclick={() => selectItem(item)}
-						onmouseenter={() => navItems.setActive(item)}
-						disabled={item.disabled}
-						tabindex={-1}
-					>
-						<Thc thc={item.label} />
-					</ListItemButton>
-				{:else if item.type === "divider"}
-					<div
-						role="separator"
+			<!-- Search input -->
+			{#if searchConfig}
+				<div class={twMerge("stuic-dropdown-menu-search", classSearchContainer)}>
+					<span class="stuic-dropdown-menu-search-icon">
+						{@html iconSearch({ size: 16 })}
+					</span>
+					<input
+						bind:this={searchInputEl}
+						bind:value={searchQuery}
+						type="text"
+						placeholder={searchConfig.placeholder}
+						class={twMerge("stuic-dropdown-menu-search-input", classSearchInput)}
+						autocomplete="off"
+						onfocus={() => navItems.unsetActive()}
+						onkeydown={handleSearchKeydown}
+						aria-label="Search menu items"
+					/>
+					{#if searchQuery}
+						<button
+							type="button"
+							class="stuic-dropdown-menu-search-clear"
+							onclick={() => {
+								searchQuery = "";
+								searchInputEl?.focus();
+							}}
+							aria-label="Clear search"
+						>
+							{@html iconX({ size: 14 })}
+						</button>
+					{/if}
+				</div>
+			{/if}
+			<!-- Menu items -->
+			{#if searchConfig && searchQuery && filteredItems.length === 0}
+				<div class="stuic-dropdown-menu-no-results">{searchConfig.noResultsMessage}</div>
+			{:else}
+				{#each filteredItems as item}
+					{#if item.type === "action"}
+						{@const isActive = _navItems.active?.id === item.id}
+						<ListItemButton
+							id={itemId(item.id)}
+							role="menuitem"
+							focused={isActive}
+							contentBefore={item.contentBefore}
+							contentAfter={item.contentAfter}
+							class={twMerge(classItem, item.class)}
+							classFocused={classItemActive}
+							classContentBefore={classItemBefore}
+							classContentAfter={classItemAfter}
+							onclick={() => selectItem(item)}
+							onmouseenter={() => navItems.setActive(item)}
+							disabled={item.disabled}
+							tabindex={-1}
+						>
+							<Thc thc={item.label} />
+						</ListItemButton>
+					{:else if item.type === "divider"}
+						<div
+							role="separator"
 						class={twMerge(DROPDOWN_MENU_DIVIDER_CLASSES, classDivider, item.class)}
 					></div>
 				{:else if item.type === "header"}
@@ -731,55 +967,62 @@
 							>
 								{#each item.items as childItem}
 									{#if childItem.type === "action"}
-										{@const isChildActive = _navItems.active?.id === childItem.id}
-										<ListItemButton
-											id={itemId(childItem.id)}
-											role="menuitem"
-											focused={isChildActive}
-											contentBefore={childItem.contentBefore}
-											contentAfter={childItem.contentAfter}
-											class={twMerge(classItem, childItem.class)}
-											classFocused={classItemActive}
-											classContentBefore={classItemBefore}
-											classContentAfter={classItemAfter}
-											onclick={() => selectItem(childItem)}
-											onmouseenter={() => navItems.setActive(childItem)}
-											disabled={childItem.disabled}
-											tabindex={-1}
-										>
-											<Thc thc={childItem.label} />
-										</ListItemButton>
-									{:else if childItem.type === "divider"}
-										<div
-											role="separator"
-											class={twMerge(
-												DROPDOWN_MENU_DIVIDER_CLASSES,
-												classDivider,
-												childItem.class
-											)}
-										></div>
-									{:else if childItem.type === "header"}
-										<div
-											role="presentation"
-											class={twMerge(
-												DROPDOWN_MENU_HEADER_CLASSES,
-												classHeader,
-												childItem.class
-											)}
-										>
-											<Thc thc={childItem.label} />
-										</div>
-									{:else if childItem.type === "custom"}
-										<div role="presentation" class={childItem.class}>
-											<Thc thc={childItem.content} />
-										</div>
+										<!-- During search, only show matched action items -->
+										{#if !searchMatchedIds || searchMatchedIds.has(childItem.id)}
+											{@const isChildActive = _navItems.active?.id === childItem.id}
+											<ListItemButton
+												id={itemId(childItem.id)}
+												role="menuitem"
+												focused={isChildActive}
+												contentBefore={childItem.contentBefore}
+												contentAfter={childItem.contentAfter}
+												class={twMerge(classItem, childItem.class)}
+												classFocused={classItemActive}
+												classContentBefore={classItemBefore}
+												classContentAfter={classItemAfter}
+												onclick={() => selectItem(childItem)}
+												onmouseenter={() => navItems.setActive(childItem)}
+												disabled={childItem.disabled}
+												tabindex={-1}
+											>
+												<Thc thc={childItem.label} />
+											</ListItemButton>
+										{/if}
+									{:else if !searchMatchedIds}
+										<!-- Only show non-action items (divider, header, custom) when NOT searching -->
+										{#if childItem.type === "divider"}
+											<div
+												role="separator"
+												class={twMerge(
+													DROPDOWN_MENU_DIVIDER_CLASSES,
+													classDivider,
+													childItem.class
+												)}
+											></div>
+										{:else if childItem.type === "header"}
+											<div
+												role="presentation"
+												class={twMerge(
+													DROPDOWN_MENU_HEADER_CLASSES,
+													classHeader,
+													childItem.class
+												)}
+											>
+												<Thc thc={childItem.label} />
+											</div>
+										{:else if childItem.type === "custom"}
+											<div role="presentation" class={childItem.class}>
+												<Thc thc={childItem.content} />
+											</div>
+										{/if}
 									{/if}
 								{/each}
 							</div>
 						{/if}
 					</div>
 				{/if}
-			{/each}
+				{/each}
+			{/if}
 		</div>
 	{/if}
 </div>

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

@@ -72,6 +72,19 @@ export interface NavigableExpandable {
     expandableItem: DropdownMenuExpandableItem;
 }
 export type NavigableItem = DropdownMenuActionItem | NavigableExpandable;
+/** Search configuration options */
+export interface DropdownMenuSearchConfig {
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Search strategy */
+    strategy?: "prefix" | "exact" | "fuzzy";
+    /** Custom function to extract searchable text from an item */
+    getContent?: (item: DropdownMenuActionItem | DropdownMenuExpandableItem) => string;
+    /** Auto-focus search input when menu opens */
+    autoFocus?: boolean;
+    /** Message shown when no results found */
+    noResultsMessage?: string;
+}
 export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     /** Menu items to display */
     items: DropdownMenuItem[];
@@ -91,6 +104,8 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     closeOnEscape?: boolean;
     /** Force fallback positioning mode (for testing) */
     forceFallback?: boolean;
+    /** Enable search/filter functionality (true for defaults, or config object) */
+    search?: boolean | DropdownMenuSearchConfig;
     /** Classes for the wrapper element */
     class?: string;
     /** Classes for the trigger button */
@@ -117,6 +132,10 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     classExpandableContent?: string;
     /** Classes for backdrop (fallback mode only) */
     classBackdrop?: string;
+    /** Classes for search input container */
+    classSearchContainer?: string;
+    /** Classes for search input */
+    classSearchInput?: string;
     /** Show backdrop in fallback mode (default: true) */
     showBackdrop?: boolean;
     /** Custom trigger snippet - receives isOpen state, toggle function, and ARIA props for full control */
@@ -153,7 +172,6 @@ export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "stuic-dropdown-menu-dropd
 export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "stuic-dropdown-menu-divider";
 export declare const DROPDOWN_MENU_HEADER_CLASSES = "stuic-dropdown-menu-header";
 export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "stuic-dropdown-menu-backdrop";
-import "./index.css";
 declare const DropdownMenu: import("svelte").Component<Props, {}, "isOpen" | "triggerEl" | "dropdownEl">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;
 export default DropdownMenu;