-
-
- )}
-
- ) : null}
-
+
+
+ {entries}
+
);
diff --git a/scm-ui/ui-webapp/src/search/search-box/SearchBox.tsx b/scm-ui/ui-webapp/src/search/search-box/SearchBox.tsx
new file mode 100644
index 0000000000..2b1fe1b277
--- /dev/null
+++ b/scm-ui/ui-webapp/src/search/search-box/SearchBox.tsx
@@ -0,0 +1,226 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, {
+ FocusEventHandler,
+ HTMLAttributes,
+ KeyboardEvent,
+ MouseEventHandler,
+ RefObject,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import { useGeneratedId } from "@scm-manager/ui-components";
+import { SearchBoxContext } from "./SearchBoxContext";
+import { SearchBoxInput } from "./SearchBoxInput";
+import { SearchBoxOption } from "./SearchBoxOption";
+import { SearchBoxOptions } from "./SearchBoxOptions";
+
+const SearchBox = React.forwardRef<
+ HTMLDivElement,
+ HTMLAttributes & {
+ onQueryChange: (newQuery: string) => void;
+ shouldClear?: boolean;
+ query: string;
+ }
+>(({ children, query, onQueryChange, shouldClear, ...props }, ref) => {
+ const [open, setOpen] = useState(false);
+ const [activeId, setActiveId] = useState();
+ const [options, setOptions] = useState[]>([]);
+ const popupId = useGeneratedId();
+ const inputRef = useRef(null);
+ const registerOption = useCallback(
+ (ref: RefObject) =>
+ setOptions((prev) => {
+ let indexToInsert = -1;
+ for (let i = prev.length - 1; i >= 0; i--) {
+ const loopTabStop = prev[i];
+ if (loopTabStop.current?.id === ref.current?.id) {
+ return prev;
+ }
+ if (
+ indexToInsert === -1 &&
+ loopTabStop.current &&
+ ref.current &&
+ !!(loopTabStop.current.compareDocumentPosition(ref.current) & Node.DOCUMENT_POSITION_FOLLOWING)
+ ) {
+ indexToInsert = i + 1;
+ break;
+ }
+ }
+ if (indexToInsert === -1) {
+ indexToInsert = 0;
+ }
+ // @ts-ignore toSpliced is part of modern browser api
+ return prev.toSpliced(indexToInsert, 0, ref);
+ }),
+ []
+ );
+ const deregisterOption = useCallback(
+ (ref: RefObject) => setOptions((prev) => prev.filter((it) => it !== ref)),
+ []
+ );
+ const handleInputBlur: FocusEventHandler = useCallback(
+ (e) => {
+ const close = () => {
+ if (open && shouldClear) {
+ onQueryChange?.("");
+ }
+ setOpen(false);
+ setActiveId(undefined);
+ };
+
+ if (activeId && e.relatedTarget?.id === activeId) {
+ setTimeout(close, 100);
+ } else {
+ close();
+ }
+ },
+ [activeId, onQueryChange, open, shouldClear]
+ );
+ const handleInputKeyDown = useCallback(
+ (e: KeyboardEvent) => {
+ switch (e.key) {
+ case "ArrowDown":
+ if (activeId === undefined) {
+ if (options.length > 0) {
+ setActiveId(options[0].current?.id);
+ setOpen(true);
+ }
+ } else {
+ const nextId = options.findIndex((ref) => ref.current?.id === activeId) + 1;
+ if (options.length > nextId) {
+ setActiveId(options[nextId].current?.id);
+ }
+ }
+ e.preventDefault();
+ break;
+ case "ArrowUp":
+ if (activeId) {
+ const nextId = options.findIndex((ref) => ref.current?.id === activeId) - 1;
+ if (nextId >= 0) {
+ setActiveId(options[nextId].current?.id);
+ }
+ }
+ e.preventDefault();
+ break;
+ case "Escape":
+ if (open) {
+ setActiveId(undefined);
+ setOpen(false);
+ } else {
+ onQueryChange?.("");
+ }
+ break;
+ case "Enter":
+ if (activeId) {
+ const currentElement = options.find((ref) => ref.current?.id === activeId)?.current;
+ currentElement?.click();
+ setActiveId(undefined);
+ setOpen(false);
+ if (shouldClear) {
+ onQueryChange?.("");
+ }
+ }
+ break;
+ case "ArrowLeft":
+ case "ArrowRight":
+ break;
+ default:
+ setOpen(true);
+ }
+ },
+ [activeId, onQueryChange, open, options, shouldClear]
+ );
+ const handleInputFocus = useCallback(() => {
+ if (query) {
+ setOpen(true);
+ }
+ }, [query]);
+ const handleOptionMouseEnter: MouseEventHandler = useCallback((e) => {
+ setActiveId(e.currentTarget.id);
+ }, []);
+ useEffect(() => onQueryChange?.(query), [onQueryChange, query]);
+ useEffect(() => {
+ if (open && !activeId && options.length) {
+ setActiveId(options[0].current?.id);
+ }
+ }, [activeId, open, options]);
+ useEffect(() => {
+ const activeOption = options.find((opt) => opt.current?.id === activeId);
+ if (activeOption) {
+ activeOption.current?.scrollIntoView({
+ block: "nearest",
+ });
+ }
+ }, [activeId, options]);
+
+ return (
+ ({
+ query,
+ onQueryChange,
+ popupId,
+ open,
+ handleInputBlur,
+ handleInputKeyDown,
+ handleInputFocus,
+ handleOptionMouseEnter,
+ activeId,
+ registerOption,
+ deregisterOption,
+ inputRef,
+ }),
+ [
+ activeId,
+ deregisterOption,
+ handleInputBlur,
+ handleInputFocus,
+ handleInputKeyDown,
+ handleOptionMouseEnter,
+ onQueryChange,
+ open,
+ popupId,
+ query,
+ registerOption,
+ ]
+ )}
+ >
+
+ {children}
+
+
+ );
+});
+
+export default Object.assign(SearchBox, {
+ Input: SearchBoxInput,
+ Options: Object.assign(SearchBoxOptions, {
+ Option: SearchBoxOption,
+ }),
+});
diff --git a/scm-ui/ui-webapp/src/search/search-box/SearchBoxContext.tsx b/scm-ui/ui-webapp/src/search/search-box/SearchBoxContext.tsx
new file mode 100644
index 0000000000..a5d4873d51
--- /dev/null
+++ b/scm-ui/ui-webapp/src/search/search-box/SearchBoxContext.tsx
@@ -0,0 +1,41 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject } from "react";
+
+export type SearchBoxContextType = {
+ query: string;
+ onQueryChange: (newQuery: string) => void;
+ open: boolean;
+ popupId: string;
+ handleInputBlur: FocusEventHandler;
+ handleInputFocus: FocusEventHandler;
+ handleInputKeyDown: KeyboardEventHandler;
+ handleOptionMouseEnter: MouseEventHandler;
+ activeId?: string;
+ registerOption: (ref: RefObject) => void;
+ deregisterOption: (ref: RefObject) => void;
+ inputRef: RefObject;
+};
+export const SearchBoxContext = React.createContext(null as unknown as SearchBoxContextType);
diff --git a/scm-ui/ui-webapp/src/search/search-box/SearchBoxInput.tsx b/scm-ui/ui-webapp/src/search/search-box/SearchBoxInput.tsx
new file mode 100644
index 0000000000..3c0921e269
--- /dev/null
+++ b/scm-ui/ui-webapp/src/search/search-box/SearchBoxInput.tsx
@@ -0,0 +1,77 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, useCallback, useContext } from "react";
+import { SearchBoxContext } from "./SearchBoxContext";
+import { mergeRefs } from "./mergeRefs";
+import classNames from "classnames";
+
+export const SearchBoxInput = React.forwardRef<
+ HTMLInputElement,
+ Omit<
+ InputHTMLAttributes,
+ "type" | "tabIndex" | "aria-haspopup" | "autoComplete" | "aria-controls" | "aria-activedescendant"
+ >
+>(({ className, onKeyDown, onBlur, onFocus, ...props }, ref) => {
+ const { onQueryChange, query, popupId, handleInputKeyDown, handleInputFocus, handleInputBlur, activeId, inputRef } =
+ useContext(SearchBoxContext);
+ const handleKeyDown: KeyboardEventHandler = useCallback(
+ (e) => {
+ handleInputKeyDown(e);
+ onKeyDown?.(e);
+ },
+ [handleInputKeyDown, onKeyDown]
+ );
+ const handleFocus: FocusEventHandler = useCallback(
+ (e) => {
+ handleInputFocus(e);
+ onFocus?.(e);
+ },
+ [handleInputFocus, onFocus]
+ );
+ const handleBlur: FocusEventHandler = useCallback(
+ (e) => {
+ handleInputBlur(e);
+ onBlur?.(e);
+ },
+ [handleInputBlur, onBlur]
+ );
+ return (
+ onQueryChange?.(e.target.value)}
+ {...props}
+ ref={mergeRefs(inputRef, ref)}
+ type="text"
+ aria-haspopup="menu"
+ autoComplete="off"
+ aria-controls={popupId}
+ aria-activedescendant={activeId}
+ onKeyDown={handleKeyDown}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
+ className={classNames("input", className)}
+ />
+ );
+});
diff --git a/scm-ui/ui-webapp/src/search/search-box/SearchBoxOption.tsx b/scm-ui/ui-webapp/src/search/search-box/SearchBoxOption.tsx
new file mode 100644
index 0000000000..0c06e67142
--- /dev/null
+++ b/scm-ui/ui-webapp/src/search/search-box/SearchBoxOption.tsx
@@ -0,0 +1,80 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import React, { ComponentProps, MouseEventHandler, useCallback, useContext, useEffect, useRef } from "react";
+import { SearchBoxContext } from "./SearchBoxContext";
+import { mergeRefs } from "./mergeRefs";
+import { useGeneratedId } from "@scm-manager/ui-components";
+import classNames from "classnames";
+
+const SearchBoxOptionLink = styled(Link)<{ isActive: boolean }>`
+ line-height: inherit;
+ word-break: break-all;
+ background-color: ${({ isActive }) => (isActive ? "var(--scm-column-selection)" : "")};
+`;
+
+export const SearchBoxOption = React.forwardRef<
+ HTMLAnchorElement,
+ Omit, "tabIndex" | "role">
+>(({ children, id: propId, className, onMouseEnter, ...props }, forwardRef) => {
+ const ref = useRef(null);
+ const { activeId, deregisterOption, registerOption, handleOptionMouseEnter } = useContext(SearchBoxContext);
+ const mergedRef = mergeRefs(ref, forwardRef);
+ const id = useGeneratedId(propId);
+ const isActive = activeId === id;
+ const handleMouseEnter: MouseEventHandler = useCallback(
+ (e) => {
+ handleOptionMouseEnter(e);
+ onMouseEnter?.(e);
+ },
+ [handleOptionMouseEnter, onMouseEnter]
+ );
+
+ useEffect(() => {
+ registerOption(ref);
+ return () => deregisterOption(ref);
+ }, [deregisterOption, registerOption]);
+
+ return (
+