Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-02-27 17:00:50 +01:00
Code Issues Packages Projects Releases Activity

Refactor global search

Browse Source 
Replaces the headlessui combobox with a custom implementation following the aria patterns of a menu. This allows us to have interactive links in the popup while connecting it to the input.  The pattern is most common with buttons and is less documented yet valid for inputs.

Pushed-by: Konstantin Schaper<konstantin.schaper@cloudogu.com>
Co-authored-by: Konstantin Schaper<konstantin.schaper@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2023-11-14 13:32:55 +01:00
parent 8dc0041e17
commit 1ccba9fcd0
12 changed files with 1760 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/global_search_accessibility.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: changed
description: Improve global search accessibility

2
scm-ui/ui-webapp/package.json
View File

@@ -15,6 +15,8 @@
"@scm-manager/ui-buttons": "2.47.1-SNAPSHOT",
"@scm-manager/ui-overlays": "2.47.1-SNAPSHOT",
"@scm-manager/ui-layout": "2.47.1-SNAPSHOT",
"@radix-ui/react-portal": "^1.0.4",
"react-aria": "^3.29.1",
"classnames": "^2.2.5",
"history": "^4.10.1",
"i18next": "21",

3
scm-ui/ui-webapp/public/locales/de/commons.json
View File

@@ -49,6 +49,9 @@
"title": {
"label": "Neuen {{entity}} hinzufügen"
}
},
"searchBox": {
"noOptions": "Keine Ergebnisse"
}
},
"login": {

3
scm-ui/ui-webapp/public/locales/en/commons.json
View File

@@ -49,6 +49,9 @@
"title": {
"label": "Add new {{entity}}"
}
},
"searchBox": {
"noOptions": "No results"
}
},
"login": {

116
scm-ui/ui-webapp/src/containers/OmniSearch.tsx
View File

@@ -21,24 +21,19 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, Fragment, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Hit, Links, Repository, ValueHitField, Option } from "@scm-manager/ui-types";
import styled from "styled-components";
import React, { FC, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Hit, Links, Repository, ValueHitField } from "@scm-manager/ui-types";
import { useNamespaceAndNameContext, useOmniSearch, useSearchTypes } from "@scm-manager/ui-api";
import classNames from "classnames";
import { useHistory, useLocation } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { RepositoryAvatar, Icon } from "@scm-manager/ui-components";
import { RepositoryAvatar } from "@scm-manager/ui-components";
import SyntaxModal from "../search/SyntaxModal";
import queryString from "query-string";
import { orderTypes } from "../search/Search";
import { useShortcut } from "@scm-manager/ui-shortcuts";
import { Label, Combobox } from "@scm-manager/ui-forms";
import { Combobox as HeadlessCombobox } from "@headlessui/react";
const ResultHeading = styled.div`
border-top: 1px solid lightgray;
`;
import SearchBox from "../search/search-box/SearchBox";
import { Icon } from "@scm-manager/ui-buttons";
type Props = {
shouldClear: boolean;
@@ -72,24 +67,14 @@ const HitEntry: FC<{
link: string;
label: string;
repository?: Repository;
query: string;
}> = ({ link, label, repository, query }) => {
const history = useHistory();
}> = ({ link, label, repository }) => {
return (
<HeadlessCombobox.Option
value={{ label: query, value: () => history.push(link), displayValue: label }}
key={label}
as={Fragment}
>
{({ active }) => (
<Combobox.Option isActive={active}>
<div className="is-flex">
{repository ? <AvatarSection repository={repository} /> : <Icon name="search" className="mr-2 ml-1 mt-1" />}
<Label className="has-text-weight-normal is-size-6">{label}</Label>
</div>
</Combobox.Option>
)}
</HeadlessCombobox.Option>
<SearchBox.Options.Option to={link}>
<div className="is-flex is-align-items-center">
{repository ? <AvatarSection repository={repository} /> : <Icon className="mr-2">search</Icon>}
{label}
</div>
</SearchBox.Options.Option>
);
};
@@ -136,39 +121,23 @@ const useSearchParams = () => {
};
};
const OmniSearch: FC<Props> = ({ shouldClear, nextFocusRef }) => {
const OmniSearch: FC<Props> = ({ shouldClear }) => {
const [t] = useTranslation("commons");
const { initialQuery } = useSearchParams();
const [query, setQuery] = useState(initialQuery);
const [value, setValue] = useState<Option<(() => void) | undefined> | undefined>({ label: query, value: query });
const [query, setQuery] = useState(shouldClear ? "" : initialQuery);
const searchInputRef = useRef<HTMLInputElement>(null);
const debouncedQuery = useDebounce(query, 250);
const [showDropdown, setDropdown] = useState(true);
const context = useNamespaceAndNameContext();
const { data, isLoading } = useOmniSearch(debouncedQuery, {
type: "repository",
pageSize: 5,
});
const [showHelp, setShowHelp] = useState(false);
const handleChange = useCallback((value: Option<(() => void) | undefined>) => {
setValue(value);
value.value?.();
setDropdown(true);
}, []);
useEffect(() => {
setQuery(shouldClear ? "" : initialQuery);
setValue(shouldClear ? { label: "", value: undefined } : { label: initialQuery, value: undefined });
}, [shouldClear, initialQuery]);
const clearInput = () => {
shouldClear = true;
setValue({ label: "", value: undefined });
setQuery("");
setDropdown(false);
};
const openHelp = () => setShowHelp(true);
if (!shouldClear) {
setQuery(initialQuery);
}
}, [initialQuery, shouldClear]);
const closeHelp = () => setShowHelp(false);
@@ -196,7 +165,6 @@ const OmniSearch: FC<Props> = ({ shouldClear, nextFocusRef }) => {
link={`/search/${searchTypes[0]}/?q=${encodeURIComponent(query)}&namespace=${context.namespace}&name=${
context.name
}`}
query={query}
/>
);
}
@@ -206,7 +174,6 @@ const OmniSearch: FC<Props> = ({ shouldClear, nextFocusRef }) => {
key="search.quickSearch.searchNamespace"
label={t("search.quickSearch.searchNamespace")}
link={`/search/repository/?q=${encodeURIComponent(query)}&namespace=${context.namespace}`}
query={query}
/>
);
}
@@ -215,7 +182,6 @@ const OmniSearch: FC<Props> = ({ shouldClear, nextFocusRef }) => {
key="search.quickSearch.searchEverywhere"
label={t("search.quickSearch.searchEverywhere")}
link={`/search/repository/?q=${encodeURIComponent(query)}`}
query={query}
/>
);
hits?.forEach((hit, idx) => {
@@ -225,7 +191,6 @@ const OmniSearch: FC<Props> = ({ shouldClear, nextFocusRef }) => {
label={id(hit)}
link={`/repo/${id(hit)}`}
repository={hit._embedded?.repository}
query={query}
/>
);
});
@@ -239,45 +204,10 @@ const OmniSearch: FC<Props> = ({ shouldClear, nextFocusRef }) => {
"is-loading": isLoading,
})}
>
<Combobox
className="input is-small"
placeholder={t("search.placeholder")}
value={value}
onChange={handleChange}
ref={searchInputRef}
onQueryChange={setQuery}
onKeyDown={(e) => {
// This is hacky but it seems to be one of the only solutions right now
if (e.key === "Tab") {
nextFocusRef?.current?.focus();
e.preventDefault();
clearInput();
searchInputRef.current.value = "";
} else {
setDropdown(true);
}
}}
>
{showDropdown ? entries : null}
{showDropdown ? (
<HeadlessCombobox.Option
value={{ label: query, value: openHelp, displayValue: query }}
key={query}
as={Fragment}
>
{({ active }) => (
<ResultHeading>
<Combobox.Option isActive={active}>
<div className=" is-flex">
<Icon name="question-circle" color="blue-light" className="pt-1 pl-1"></Icon>
<Label className="has-text-weight-normal pl-3">{t("search.quickSearch.resultHeading")}</Label>
</div>
</Combobox.Option>
</ResultHeading>
)}
</HeadlessCombobox.Option>
) : null}
</Combobox>
<SearchBox query={query} onQueryChange={setQuery} shouldClear={shouldClear}>
<SearchBox.Input className="is-small" placeholder={t("search.placeholder")} ref={searchInputRef} />
<SearchBox.Options>{entries}</SearchBox.Options>
</SearchBox>
</div>
</div>
);

226
scm-ui/ui-webapp/src/search/search-box/SearchBox.tsx Normal file
View File

@@ -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<HTMLDivElement> & {
onQueryChange: (newQuery: string) => void;
shouldClear?: boolean;
query: string;
}
>(({ children, query, onQueryChange, shouldClear, ...props }, ref) => {
const [open, setOpen] = useState(false);
const [activeId, setActiveId] = useState<string | undefined>();
const [options, setOptions] = useState<RefObject<HTMLAnchorElement>[]>([]);
const popupId = useGeneratedId();
const inputRef = useRef<HTMLInputElement>(null);
const registerOption = useCallback(
(ref: RefObject<HTMLAnchorElement>) =>
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<HTMLAnchorElement>) => setOptions((prev) => prev.filter((it) => it !== ref)),
[]
);
const handleInputBlur: FocusEventHandler<HTMLInputElement> = 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<HTMLInputElement>) => {
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<HTMLAnchorElement> = 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 (
<SearchBoxContext.Provider
value={useMemo(
() => ({
query,
onQueryChange,
popupId,
open,
handleInputBlur,
handleInputKeyDown,
handleInputFocus,
handleOptionMouseEnter,
activeId,
registerOption,
deregisterOption,
inputRef,
}),
[
activeId,
deregisterOption,
handleInputBlur,
handleInputFocus,
handleInputKeyDown,
handleOptionMouseEnter,
onQueryChange,
open,
popupId,
query,
registerOption,
]
)}
>
<div {...props} ref={ref}>
{children}
</div>
</SearchBoxContext.Provider>
);
});
export default Object.assign(SearchBox, {
Input: SearchBoxInput,
Options: Object.assign(SearchBoxOptions, {
Option: SearchBoxOption,
}),
});

41
scm-ui/ui-webapp/src/search/search-box/SearchBoxContext.tsx Normal file
View File

@@ -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<HTMLInputElement>;
handleInputFocus: FocusEventHandler<HTMLInputElement>;
handleInputKeyDown: KeyboardEventHandler<HTMLInputElement>;
handleOptionMouseEnter: MouseEventHandler<HTMLAnchorElement>;
activeId?: string;
registerOption: (ref: RefObject<HTMLAnchorElement>) => void;
deregisterOption: (ref: RefObject<HTMLAnchorElement>) => void;
inputRef: RefObject<HTMLInputElement>;
};
export const SearchBoxContext = React.createContext<SearchBoxContextType>(null as unknown as SearchBoxContextType);

77
scm-ui/ui-webapp/src/search/search-box/SearchBoxInput.tsx Normal file
View File

@@ -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<HTMLInputElement>,
"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<HTMLInputElement> = useCallback(
(e) => {
handleInputKeyDown(e);
onKeyDown?.(e);
},
[handleInputKeyDown, onKeyDown]
);
const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
(e) => {
handleInputFocus(e);
onFocus?.(e);
},
[handleInputFocus, onFocus]
);
const handleBlur: FocusEventHandler<HTMLInputElement> = useCallback(
(e) => {
handleInputBlur(e);
onBlur?.(e);
},
[handleInputBlur, onBlur]
);
return (
<input
value={query}
onChange={(e) => 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)}
/>
);
});

80
scm-ui/ui-webapp/src/search/search-box/SearchBoxOption.tsx Normal file
View File

@@ -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<ComponentProps<typeof Link>, "tabIndex" | "role">
>(({ children, id: propId, className, onMouseEnter, ...props }, forwardRef) => {
const ref = useRef<HTMLAnchorElement>(null);
const { activeId, deregisterOption, registerOption, handleOptionMouseEnter } = useContext(SearchBoxContext);
const mergedRef = mergeRefs(ref, forwardRef);
const id = useGeneratedId(propId);
const isActive = activeId === id;
const handleMouseEnter: MouseEventHandler<HTMLAnchorElement> = useCallback(
(e) => {
handleOptionMouseEnter(e);
onMouseEnter?.(e);
},
[handleOptionMouseEnter, onMouseEnter]
);
useEffect(() => {
registerOption(ref);
return () => deregisterOption(ref);
}, [deregisterOption, registerOption]);
return (
<li role="presentation">
<SearchBoxOptionLink
{...props}
isActive={isActive}
className={classNames(
"px-3 py-2 has-text-inherit is-clickable is-size-6 is-borderless has-background-transparent is-full-width is-inline-block",
className
)}
ref={mergedRef}
tabIndex={-1}
id={id}
role="menuitem"
onMouseEnter={handleMouseEnter}
>
{children}
</SearchBoxOptionLink>
</li>
);
});

96
scm-ui/ui-webapp/src/search/search-box/SearchBoxOptions.tsx Normal file
View File

@@ -0,0 +1,96 @@
/*
* 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 React, { HTMLAttributes, useContext, useRef } from "react";
import { useTranslation } from "react-i18next";
import { SearchBoxContext } from "./SearchBoxContext";
import { useOverlayPosition } from "react-aria";
import { Portal } from "@radix-ui/react-portal";
import classNames from "classnames";
import { mergeRefs } from "./mergeRefs";
export const NoOptionsMenuItem = styled.li`
line-height: inherit;
word-break: break-all;
display: none;
&:only-child {
display: inline-block;
}
`;
const SeachBoxOptionsContainer = styled.ul`
border: var(--scm-border);
background-color: var(--scm-secondary-background);
max-width: 35ch;
overflow-y: auto;
&[hidden] {
display: none !important;
}
`;
export const SearchBoxOptions = React.forwardRef<
HTMLUListElement,
Omit<HTMLAttributes<HTMLUListElement>, "role" | "tabIndex" | "id" | "hidden">
>(({ children, className, ...props }, ref) => {
const [t] = useTranslation("commons");
const { open, popupId, inputRef } = useContext(SearchBoxContext);
const innerRef = useRef<HTMLUListElement>(null);
const { overlayProps } = useOverlayPosition({
overlayRef: innerRef,
targetRef: inputRef,
offset: 8,
placement: "bottom left",
isOpen: open,
});
return (
<Portal asChild>
<SeachBoxOptionsContainer
{...props}
className={classNames(
"is-flex is-flex-direction-column has-rounded-border has-box-shadow is-overflow-hidden",
className
)}
ref={mergeRefs(innerRef, ref)}
role="menu"
tabIndex={-1}
id={popupId}
hidden={!open}
{...overlayProps}
>
<NoOptionsMenuItem
className="px-3 py-2 has-text-inherit is-size-6 is-borderless has-background-transparent is-full-width"
role="menuitem"
aria-disabled={true}
>
{t("form.searchBox.noOptions")}
</NoOptionsMenuItem>
{children}
</SeachBoxOptionsContainer>
</Portal>
);
});

38
scm-ui/ui-webapp/src/search/search-box/mergeRefs.ts Normal file
View File

@@ -0,0 +1,38 @@
/*
* 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 { ForwardedRef, MutableRefObject, RefCallback } from "react";
export function mergeRefs<T>(...refs: Array<RefCallback<T> | MutableRefObject<T> | ForwardedRef<T>>) {
return (el: T) =>
refs.forEach((ref) => {
if (ref) {
if (typeof ref === "function") {
ref(el);
} else {
ref.current = el;
}
}
});
}

1170
yarn.lock
View File

File diff suppressed because it is too large Load Diff