@likec4/diagram 1.59.4 → 1.60.0

package/dist/search/components/ElementsColumn.mjs

@@ -0,0 +1,264 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import { IconOrShapeRenderer } from "../../context/IconRenderer.mjs";
+import { useCallbackRef } from "../../hooks/useCallbackRef.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
+import { useNormalizedSearch } from "../hooks.mjs";
+import { buttonsva, focusable } from "./_shared.css.mjs";
+import { elementExpandIcon, elementIcon, elementId, elementTitleAndId, elementViewsCount, treeLabel, treeNode, treeRoot, treeSubtree } from "./ElementsColumn.css.mjs";
+import { centerY, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent } from "./utils.mjs";
+import { NothingFound } from "./ViewsColum.mjs";
+import { cx } from "@likec4/styles/css";
+import { memo, useEffect, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { filter, first, hasAtLeast, last, only, pipe, reduce } from "remeda";
+import { ActionIcon, Box, Group, Highlight, Tooltip, Tree, UnstyledButton, useTree } from "@mantine/core";
+import { ifilter, imap, isAncestor, nameFromFqn, stringHash, toArray } from "@likec4/core/utils";
+import { Txt } from "@likec4/styles/jsx";
+import * as m from "motion/react-m";
+
+//#region src/search/components/ElementsColumn.tsx
+function useElementsColumnData() {
+	const model = useLikeC4Model();
+	const allElements = useMemo(() => pipe(model.elements(), ifilter((i) => !i.imported), imap((element) => ({
+		label: element.title,
+		value: element.id,
+		element,
+		viewsCount: [...element.views()].length,
+		children: [],
+		hasChildren: false
+	})), toArray()), [model]);
+	const search = useNormalizedSearch();
+	return useMemo(() => {
+		const searchTerms = search.split(".");
+		let elements;
+		if (search === "" || search === "kind:") elements = allElements;
+		else if (search.startsWith("kind:")) {
+			const searchKind = search.slice(5);
+			elements = filter(allElements, ({ element }) => {
+				return element.kind.toLocaleLowerCase()[searchKind.length > 4 ? "startsWith" : "includes"](searchKind);
+			});
+		} else if (search.startsWith("#")) {
+			const searchTag = search.slice(1);
+			elements = filter(allElements, ({ element }) => {
+				return element.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+			});
+		} else if (hasAtLeast(searchTerms, 2)) {
+			const satisfies = (element) => {
+				const fqnParts = element.id.toLocaleLowerCase().split(".");
+				if (fqnParts.length < searchTerms.length) return false;
+				let lastMatchIndex = 0;
+				for (let i = 0; i < fqnParts.length; i++) if (fqnParts[i].includes(searchTerms[lastMatchIndex])) {
+					lastMatchIndex++;
+					if (lastMatchIndex === searchTerms.length) return true;
+					continue;
+				}
+				return false;
+			};
+			elements = filter(allElements, ({ element }) => satisfies(element));
+		} else elements = filter(allElements, ({ element }) => {
+			return (element.title + " " + element.name + " " + (element.summary.md || "")).toLocaleLowerCase().includes(search);
+		});
+		const byid = {};
+		const { hash, all, roots } = pipe(elements, reduce((acc, treeItem) => {
+			treeItem.children = [];
+			treeItem.hasChildren = false;
+			byid[treeItem.value] = treeItem;
+			const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
+			if (parent) {
+				parent.children.push(treeItem);
+				parent.hasChildren = true;
+			} else acc.roots.push(treeItem);
+			acc.all.push(treeItem);
+			acc.hash = stringHash(acc.hash + treeItem.value);
+			return acc;
+		}, {
+			hash: "empty",
+			all: [],
+			roots: []
+		}));
+		return {
+			hash,
+			all,
+			byid,
+			roots,
+			searchTerms: hasAtLeast(searchTerms, 1) ? searchTerms : [search]
+		};
+	}, [allElements, search]);
+}
+const btn = buttonsva();
+const ElementsColumn = memo(() => {
+	const data = useElementsColumnData();
+	const handleClick = useHandleElementSelection();
+	if (data.all.length === 0) return /* @__PURE__ */ jsx(NothingFound, {});
+	return /* @__PURE__ */ jsx(ElementsTree, {
+		data,
+		handleClick
+	});
+});
+function ElementsTree({ data: { searchTerms, all, byid, hash, roots }, handleClick }) {
+	const tree = useTree({ multiple: false });
+	useEffect(() => {
+		tree.collapseAllNodes();
+		for (const nd of all) if (nd.children.length > 0) tree.expand(nd.value);
+	}, [hash]);
+	const onKeyDownCapture = useCallbackRef((e) => {
+		const target = e.target;
+		const id = target.getAttribute("data-value");
+		const node = !!id && byid[id];
+		if (!node) return;
+		if (e.key === "ArrowUp") {
+			if (id === roots[0]?.value) {
+				stopAndPrevent(e);
+				moveFocusToSearchInput(target);
+			}
+			return;
+		}
+		if (e.key === "ArrowRight") {
+			if (node.children.length > 0 && tree.expandedState[id] !== true) return;
+			const maxY = (e.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y;
+			const viewButtons = queryAllFocusable(target, "views");
+			let view = viewButtons.length > 1 ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
+			view ??= first(viewButtons);
+			if (view) {
+				stopAndPrevent(e);
+				view.focus();
+			}
+			return;
+		}
+		if (e.key === " " || e.key === "Enter") {
+			stopAndPrevent(e);
+			handleClick(node.element);
+			return;
+		}
+	});
+	return /* @__PURE__ */ jsx(Tree, {
+		"data-likec4-search-elements": true,
+		allowRangeSelection: false,
+		clearSelectionOnOutsideClick: true,
+		selectOnClick: false,
+		tree,
+		data: roots,
+		levelOffset: "md",
+		classNames: {
+			root: treeRoot,
+			node: cx(focusable, treeNode),
+			label: treeLabel,
+			subtree: treeSubtree
+		},
+		onKeyDownCapture,
+		renderNode: (p) => /* @__PURE__ */ jsx(ElementTreeNode, {
+			...p,
+			searchTerms,
+			handleClick
+		})
+	});
+}
+function ElementTreeNode({ node, elementProps, expanded, handleClick, searchTerms }) {
+	const { label, element, viewsCount } = node;
+	const elementIcon$1 = IconOrShapeRenderer({
+		element: {
+			id: element.id,
+			title: element.title,
+			shape: element.shape,
+			icon: element.icon
+		},
+		className: cx(btn.icon, elementIcon)
+	});
+	const key = `@tree.${node.value}`;
+	return /* @__PURE__ */ jsxs(m.div, {
+		layout: "position",
+		layoutId: key,
+		...elementProps,
+		children: [/* @__PURE__ */ jsx(ActionIcon, {
+			variant: "transparent",
+			size: 20,
+			tabIndex: -1,
+			className: cx(elementExpandIcon),
+			style: { visibility: node.hasChildren ? "visible" : "hidden" },
+			children: /* @__PURE__ */ jsx(IconChevronRight, {
+				stroke: 3.5,
+				style: {
+					transition: "transform 150ms ease",
+					transform: `rotate(${expanded ? "90deg" : "0"})`
+				}
+			})
+		}), /* @__PURE__ */ jsxs(UnstyledButton, {
+			component: m.button,
+			layout: true,
+			tabIndex: -1,
+			"data-value": element.id,
+			className: cx(btn.root, "group", "likec4-element-button"),
+			...viewsCount > 0 && { onClick: (e) => {
+				if (!node.hasChildren || expanded) {
+					e.stopPropagation();
+					handleClick(element);
+				}
+			} },
+			children: [
+				elementIcon$1,
+				/* @__PURE__ */ jsxs(Box, {
+					style: { flexGrow: 1 },
+					children: [/* @__PURE__ */ jsxs(Group, {
+						gap: "xs",
+						wrap: "nowrap",
+						align: "center",
+						className: elementTitleAndId,
+						children: [/* @__PURE__ */ jsx(Highlight, {
+							component: "div",
+							highlight: searchTerms,
+							className: btn.title,
+							lineClamp: 1,
+							children: label
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							label: element.id,
+							withinPortal: false,
+							fz: "xs",
+							disabled: !element.id.includes("."),
+							children: /* @__PURE__ */ jsx(Highlight, {
+								component: "div",
+								highlight: last(searchTerms),
+								className: cx(elementId, btn.descriptionColor),
+								children: nameFromFqn(element.id)
+							})
+						})]
+					}), /* @__PURE__ */ jsx(Highlight, {
+						component: "div",
+						highlight: element.summary.nonEmpty ? searchTerms : [],
+						className: btn.description,
+						lineClamp: 1,
+						children: element.summary.nonEmpty ? element.summary.text : "No description"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Txt, {
+					as: "div",
+					className: cx(elementViewsCount, btn.descriptionColor),
+					size: "xs",
+					children: viewsCount === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						viewsCount,
+						" view",
+						viewsCount > 1 ? "s" : ""
+					] })
+				})
+			]
+		})]
+	});
+}
+function useHandleElementSelection() {
+	const ctx = useSearchContext();
+	return useCallbackRef((element) => {
+		const views = [...element.views()];
+		if (views.length === 0) return;
+		const elementFqn = element.id;
+		const onlyOneViewId = only(views)?.id;
+		if (!onlyOneViewId) {
+			ctx.openPickView(elementFqn);
+			return;
+		}
+		ctx.navigateTo(onlyOneViewId, elementFqn);
+	});
+}
+
+//#endregion
+export { ElementsColumn };

package/dist/search/components/PickView.mjs

@@ -0,0 +1,120 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
+import { ViewButton } from "./ViewsColum.mjs";
+import { pickview, pickviewBackdrop, pickviewGroup } from "./styles.css.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, FocusTrap, Group, ScrollAreaAutosize, Stack, Title } from "@mantine/core";
+import { useCallbackRef, useWindowEvent } from "@mantine/hooks";
+import * as m from "motion/react-m";
+
+//#region src/search/components/PickView.tsx
+function PickView({ elementFqn }) {
+	const ctx = useSearchContext();
+	const currentViewId = ctx.currentViewId ?? "";
+	const element = useLikeC4Model().element(elementFqn);
+	const scoped = [];
+	const others = [];
+	for (const view of element.views()) if (view.viewOf === element) scoped.push(view);
+	else others.push(view);
+	const closePickView = () => {
+		ctx.closePickView();
+	};
+	useWindowEvent("keydown", useCallbackRef((event) => {
+		try {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				event.preventDefault();
+				closePickView();
+			}
+		} catch (e) {
+			console.warn(e);
+		}
+	}), { capture: true });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(m.div, {
+		className: pickviewBackdrop,
+		onClick: (e) => {
+			e.stopPropagation();
+			closePickView();
+		}
+	}, "pickview-backdrop"), /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(m.div, {
+		initial: {
+			opacity: 0,
+			scale: .95,
+			originY: 0,
+			translateX: "-50%",
+			translateY: -20
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			translateY: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .98,
+			translateY: -20,
+			transition: { duration: .1 }
+		},
+		className: pickview,
+		"data-likec4-search-views": true,
+		children: [/* @__PURE__ */ jsxs(Group, {
+			px: "sm",
+			py: "md",
+			justify: "space-between",
+			children: [/* @__PURE__ */ jsx(Title, {
+				order: 2,
+				lh: 1,
+				children: "Select view"
+			}), /* @__PURE__ */ jsx(ActionIcon, {
+				size: "md",
+				variant: "default",
+				onClick: (e) => {
+					e.stopPropagation();
+					closePickView();
+				},
+				children: /* @__PURE__ */ jsx(IconX, {})
+			})]
+		}), /* @__PURE__ */ jsxs(ScrollAreaAutosize, {
+			mah: "calc(100vh - 110px)",
+			type: "never",
+			children: [scoped.length > 0 && /* @__PURE__ */ jsxs(Stack, {
+				gap: "sm",
+				px: "sm",
+				className: pickviewGroup,
+				children: [/* @__PURE__ */ jsx(Title, {
+					order: 6,
+					c: "dimmed",
+					children: "scoped views of the element"
+				}), scoped.map((view, i) => /* @__PURE__ */ jsx(ViewButton, {
+					view,
+					currentViewId,
+					search: "",
+					loop: true,
+					focusOnElement: elementFqn,
+					mod: { autofocus: i === 0 }
+				}, view.id))]
+			}), others.length > 0 && /* @__PURE__ */ jsxs(Stack, {
+				gap: "sm",
+				px: "sm",
+				className: pickviewGroup,
+				children: [/* @__PURE__ */ jsx(Title, {
+					order: 6,
+					c: "dimmed",
+					children: "views including this element"
+				}), others.map((view, i) => /* @__PURE__ */ jsx(ViewButton, {
+					view,
+					currentViewId,
+					search: "",
+					loop: true,
+					focusOnElement: elementFqn,
+					mod: { autofocus: i === 0 && scoped.length === 0 }
+				}, view.id))]
+			})]
+		})]
+	}, "pickview") })] });
+}
+
+//#endregion
+export { PickView };

package/dist/search/components/SearchByTags.mjs

@@ -0,0 +1,81 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { ElementTag } from "../../base-primitives/element/ElementTags.mjs";
+import { useNormalizedSearch, useUpdateSearch } from "../hooks.mjs";
+import { focusToFirstFoundElement, moveFocusToSearchInput } from "./utils.mjs";
+import { css } from "@likec4/styles/css";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@mantine/core";
+import { HStack } from "@likec4/styles/jsx";
+
+//#region src/search/components/SearchByTags.tsx
+function SearchByTags() {
+	const ref = useRef(null);
+	let tags = useLikeC4Model().tagsSortedByUsage;
+	let setSearch = useUpdateSearch();
+	let search = useNormalizedSearch();
+	let countBefore = tags.length;
+	let isFiltered = false;
+	if (search.startsWith("#")) {
+		const searchTag = search.slice(1);
+		tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag));
+		isFiltered = tags.length !== countBefore;
+	}
+	if (tags.length === 0) return null;
+	tags = tags.slice(0, 15);
+	return /* @__PURE__ */ jsxs(HStack, {
+		ref,
+		css: {
+			gap: "md",
+			paddingLeft: "[48px]",
+			flexWrap: "nowrap"
+		},
+		children: [/* @__PURE__ */ jsx(HStack, {
+			css: {
+				gap: "1.5",
+				flexWrap: "wrap",
+				opacity: isFiltered ? "1" : "0.3",
+				grayscale: isFiltered ? 0 : .9,
+				filter: "auto",
+				transition: "fast",
+				_groupHover: {
+					opacity: "1",
+					grayscale: 0
+				},
+				_groupFocusWithin: {
+					opacity: "1",
+					grayscale: 0
+				}
+			},
+			children: tags.map(({ tag }) => /* @__PURE__ */ jsx(ElementTag, {
+				tag,
+				className: css({
+					userSelect: "none",
+					cursor: "pointer"
+				}),
+				onClick: (e) => {
+					e.stopPropagation();
+					setSearch(`#${tag}`);
+					setTimeout(() => {
+						focusToFirstFoundElement(ref.current);
+					}, 350);
+				}
+			}, tag))
+		}), isFiltered && /* @__PURE__ */ jsx(Button, {
+			size: "compact-xs",
+			variant: "light",
+			onClick: (e) => {
+				e.stopPropagation();
+				setSearch("");
+				moveFocusToSearchInput(ref.current);
+			},
+			rightSection: /* @__PURE__ */ jsx(IconX, { size: 14 }),
+			children: "Clear"
+		})]
+	});
+}
+
+//#endregion
+export { SearchByTags };

package/dist/search/components/SearchInput.mjs

@@ -0,0 +1,193 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconSearch from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
+import { focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent } from "./utils.mjs";
+import { input } from "./styles.css.mjs";
+import { memo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { keys } from "remeda";
+import { Combobox, ComboboxDropdown, ComboboxEmpty, ComboboxOption, ComboboxOptions, ComboboxTarget, Input, ScrollAreaAutosize, Text, rem, useCombobox } from "@mantine/core";
+import { useFocusWithin, useMergedRef, useWindowEvent } from "@mantine/hooks";
+
+//#region src/search/components/SearchInput.tsx
+function startingWithKind(search) {
+	return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
+}
+const SEARCH_PREFIXES = ["#", "kind:"];
+const LikeC4SearchInput = memo(() => {
+	const searchCtx = useSearchContext();
+	const likec4model = useLikeC4Model();
+	const inputRef = useRef(null);
+	const { ref, focused } = useFocusWithin();
+	const { searchValue: search, setSearchValue: setSearch } = searchCtx;
+	const combobox = useCombobox({
+		scrollBehavior: "smooth",
+		loop: false
+	});
+	useWindowEvent("keydown", (event) => {
+		try {
+			if (!focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u))) moveFocusToSearchInput(inputRef.current);
+		} catch (e) {
+			console.warn(e);
+		}
+	});
+	let options = [];
+	let isExactMatch = false;
+	switch (true) {
+		case search.startsWith("#"): {
+			const searchTag = search.toLocaleLowerCase().slice(1);
+			const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag));
+			if (alloptions.length === 0) {
+				isExactMatch = false;
+				options = [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")];
+			} else {
+				isExactMatch = alloptions.some((tag) => tag.toLocaleLowerCase() === searchTag);
+				options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, {
+					value: `#${tag}`,
+					children: [/* @__PURE__ */ jsx(Text, {
+						component: "span",
+						opacity: .5,
+						mr: 1,
+						fz: "sm",
+						children: "#"
+					}), tag]
+				}, tag));
+			}
+			break;
+		}
+		case search.startsWith("kind:"):
+		case startingWithKind(search): {
+			const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : "";
+			let alloptions = keys(likec4model.specification.elements);
+			if (term) alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term));
+			if (alloptions.length === 0) {
+				isExactMatch = false;
+				options = [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No kinds found" }, "empty-kinds")];
+			} else {
+				isExactMatch = alloptions.some((kind) => kind.toLocaleLowerCase() === term);
+				options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, {
+					value: `kind:${kind}`,
+					children: [/* @__PURE__ */ jsx(Text, {
+						component: "span",
+						opacity: .5,
+						mr: 1,
+						fz: "sm",
+						children: "kind:"
+					}), kind]
+				}, kind));
+			}
+			break;
+		}
+	}
+	return /* @__PURE__ */ jsxs(Combobox, {
+		onOptionSubmit: (optionValue) => {
+			setSearch(optionValue);
+			combobox.resetSelectedOption();
+			if (!SEARCH_PREFIXES.includes(optionValue)) {
+				combobox.closeDropdown();
+				setTimeout(() => {
+					focusToFirstFoundElement(inputRef.current);
+				}, 350);
+			}
+		},
+		width: "max-content",
+		position: "bottom-start",
+		shadow: "md",
+		offset: {
+			mainAxis: 4,
+			crossAxis: 50
+		},
+		store: combobox,
+		withinPortal: false,
+		children: [/* @__PURE__ */ jsx(ComboboxTarget, { children: /* @__PURE__ */ jsx(Input, {
+			ref: useMergedRef(inputRef, ref),
+			placeholder: "Search by title, description or start with # or kind:",
+			autoFocus: true,
+			"data-autofocus": true,
+			"data-likec4-search-input": true,
+			tabIndex: 0,
+			classNames: { input },
+			size: "lg",
+			value: search,
+			leftSection: /* @__PURE__ */ jsx(IconSearch, {
+				style: { width: rem(20) },
+				stroke: 2
+			}),
+			rightSection: /* @__PURE__ */ jsx(Input.ClearButton, { onClick: (e) => {
+				e.stopPropagation();
+				if (search === "" || search === searchCtx.openedWithSearch) searchCtx.close();
+				else setSearch("");
+			} }),
+			rightSectionPointerEvents: "auto",
+			onChange: (event) => {
+				setSearch(event.currentTarget.value);
+				combobox.openDropdown();
+				combobox.updateSelectedOptionIndex();
+			},
+			onClick: () => combobox.openDropdown(),
+			onFocus: () => combobox.openDropdown(),
+			onBlur: () => combobox.closeDropdown(),
+			onKeyDownCapture: (e) => {
+				if (e.key === "Tab") {
+					switch (true) {
+						case combobox.getSelectedOptionIndex() >= 0:
+							combobox.clickSelectedOption();
+							return stopAndPrevent(e);
+						case options.length === 1:
+							if (combobox.selectFirstOption()) combobox.clickSelectedOption();
+							return stopAndPrevent(e);
+						case startingWithKind(search):
+							setSearch("kind:");
+							return stopAndPrevent(e);
+					}
+					return;
+				}
+				if (e.key === "Backspace" && combobox.dropdownOpened) {
+					if (search === "kind:") {
+						setSearch("");
+						combobox.resetSelectedOption();
+						return stopAndPrevent(e);
+					}
+					if (search.startsWith("kind:") && isExactMatch) {
+						setSearch("kind:");
+						combobox.resetSelectedOption();
+						return stopAndPrevent(e);
+					}
+					if (search.startsWith("#") && isExactMatch) {
+						setSearch("#");
+						combobox.resetSelectedOption();
+						return stopAndPrevent(e);
+					}
+				}
+				if (e.key === "Escape" && combobox.dropdownOpened && options.length > 0) {
+					stopAndPrevent(e);
+					combobox.closeDropdown();
+					return;
+				}
+				if (e.key === "ArrowUp" && combobox.dropdownOpened && search === "" && combobox.getSelectedOptionIndex() === 0) {
+					combobox.closeDropdown();
+					stopAndPrevent(e);
+					return;
+				}
+				if (e.key === "ArrowDown" && (!combobox.dropdownOpened || options.length === 0 || isExactMatch || search === "" && combobox.getSelectedOptionIndex() === options.length - 1)) {
+					combobox.closeDropdown();
+					stopAndPrevent(e);
+					focusToFirstFoundElement(inputRef.current);
+					return;
+				}
+			}
+		}) }), /* @__PURE__ */ jsx(ComboboxDropdown, {
+			hidden: options.length === 0,
+			style: { minWidth: 300 },
+			children: /* @__PURE__ */ jsx(ComboboxOptions, { children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+				mah: "min(322px, calc(100cqh - 50px))",
+				type: "scroll",
+				children: options
+			}) })
+		})]
+	});
+});
+
+//#endregion
+export { LikeC4SearchInput };