@likec4/diagram 1.55.0 → 1.56.0

package/dist/search/components/SearchInput.js

@@ -1,213 +1,191 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem, ComboboxDropdown, ComboboxOptions, ScrollAreaAutosize, ComboboxEmpty } from '@mantine/core';
-import { useFocusWithin, useWindowEvent, useMergedRef } from '@mantine/hooks';
-import { memo, useRef } from 'react';
-import { keys } from 'remeda';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useSearchContext } from '../SearchContext.js';
-import { input } from './styles.css.js';
-import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
+import { useSearchContext } from "../SearchContext.js";
+import { focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent } from "./utils.js";
+import { input } from "./styles.css.js";
+import { IconSearch } from "@tabler/icons-react";
+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;
+	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 === '' && isEmptyForSomeTime === '': {
-    //   options = SEARCH_PREFIXES.map((prefix) => (
-    //     <ComboboxOption value={prefix} key={prefix}>
-    //       <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
-    //       {prefix}
-    //     </ComboboxOption>
-    //   ))
-    //   break
-    // }
-    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: 0.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: 0.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: 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: {
-                    const firstOption = combobox.selectFirstOption();
-                    if (firstOption) {
-                      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 || // reached the last option and the search is empty
-              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 }) }) })
-      ]
-    }
-  );
+var SEARCH_PREFIXES = ["#", "kind:"];
+var 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 };