add-privileged-users-in-room (#9596)

res/css/_components.pcss

@@ -46,6 +46,7 @@
 @import "./components/views/typography/_Caption.pcss";
 @import "./compound/_Icon.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";
+@import "./structures/_AutocompleteInput.pcss";
 @import "./structures/_BackdropPanel.pcss";
 @import "./structures/_CompatibilityPage.pcss";
 @import "./structures/_ContextualMenu.pcss";

res/css/structures/_AutocompleteInput.pcss

@@ -0,0 +1,129 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_AutocompleteInput {
+    position: relative;
+}
+
+.mx_AutocompleteInput_search_icon {
+    margin-left: $spacing-8;
+    fill: $secondary-content;
+}
+
+.mx_AutocompleteInput_editor {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 1px solid $input-border-color;
+    border-radius: 4px;
+    transition: border-color 0.25s;
+
+    > input {
+        flex: 1;
+        min-width: 40%;
+        resize: none;
+        // `!important` is required to bypass global input styles.
+        margin: 0 !important;
+        padding: $spacing-8 9px;
+        border: none !important;
+        color: $primary-content !important;
+        font-weight: normal !important;
+
+        &::placeholder {
+            color: $primary-content !important;
+            font-weight: normal !important;
+        }
+    }
+}
+
+.mx_AutocompleteInput_editor--focused {
+    border-color: $links;
+}
+
+.mx_AutocompleteInput_editor--has-suggestions {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.mx_AutocompleteInput_editor_selection {
+    display: flex;
+    margin-left: $spacing-8;
+}
+
+.mx_AutocompleteInput_editor_selection_pill {
+    display: flex;
+    align-items: center;
+    border-radius: 12px;
+    padding-left: $spacing-8;
+    padding-right: $spacing-8;
+    background-color: $username-variant1-color;
+    color: #ffffff;
+    font-size: $font-12px;
+}
+
+.mx_AutocompleteInput_editor_selection_remove_button {
+    padding: 0 $spacing-4;
+}
+
+.mx_AutocompleteInput_matches {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: $background;
+    border: 1px solid $links;
+    border-top-color: $input-border-color;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    z-index: 1000;
+}
+
+.mx_AutocompleteInput_suggestion {
+    display: flex;
+    align-items: center;
+    padding: $spacing-8;
+    cursor: pointer;
+
+    > * {
+        user-select: none;
+    }
+
+    &:hover {
+        background-color: $quinary-content;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+}
+
+.mx_AutocompleteInput_suggestion--selected {
+    background-color: $quinary-content;
+
+    &:last-child {
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+}
+
+.mx_AutocompleteInput_suggestion_title {
+    margin-right: $spacing-8;
+}
+
+.mx_AutocompleteInput_suggestion_description {
+    color: $secondary-content;
+    font-size: $font-12px;
+}

src/components/structures/AutocompleteInput.tsx

@@ -0,0 +1,248 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useState, ReactNode, ChangeEvent, KeyboardEvent, useRef, ReactElement } from 'react';
+import classNames from 'classnames';
+
+import Autocompleter from "../../autocomplete/AutocompleteProvider";
+import { Key } from '../../Keyboard';
+import { ICompletion } from '../../autocomplete/Autocompleter';
+import AccessibleButton from '../../components/views/elements/AccessibleButton';
+import { Icon as PillRemoveIcon } from '../../../res/img/icon-pill-remove.svg';
+import { Icon as SearchIcon } from '../../../res/img/element-icons/roomlist/search.svg';
+import useFocus from "../../hooks/useFocus";
+
+interface AutocompleteInputProps {
+    provider: Autocompleter;
+    placeholder: string;
+    selection: ICompletion[];
+    onSelectionChange: (selection: ICompletion[]) => void;
+    maxSuggestions?: number;
+    renderSuggestion?: (s: ICompletion) => ReactElement;
+    renderSelection?: (m: ICompletion) => ReactElement;
+    additionalFilter?: (suggestion: ICompletion) => boolean;
+}
+
+export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({
+    provider,
+    renderSuggestion,
+    renderSelection,
+    maxSuggestions = 5,
+    placeholder,
+    onSelectionChange,
+    selection,
+    additionalFilter,
+}) => {
+    const [query, setQuery] = useState<string>('');
+    const [suggestions, setSuggestions] = useState<ICompletion[]>([]);
+    const [isFocused, onFocusChangeHandlerFunctions] = useFocus();
+    const editorContainerRef = useRef<HTMLDivElement>(null);
+    const editorRef = useRef<HTMLInputElement>(null);
+
+    const focusEditor = () => {
+        editorRef?.current?.focus();
+    };
+
+    const onQueryChange = async (e: ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value.trim();
+        setQuery(value);
+
+        let matches = await provider.getCompletions(
+            query,
+            { start: query.length, end: query.length },
+            true,
+            maxSuggestions,
+        );
+
+        if (additionalFilter) {
+            matches = matches.filter(additionalFilter);
+        }
+
+        setSuggestions(matches);
+    };
+
+    const onClickInputArea = () => {
+        focusEditor();
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+        const hasModifiers = e.ctrlKey || e.shiftKey || e.metaKey;
+
+        // when the field is empty and the user hits backspace remove the right-most target
+        if (!query && selection.length > 0 && e.key === Key.BACKSPACE && !hasModifiers) {
+            removeSelection(selection[selection.length - 1]);
+        }
+    };
+
+    const toggleSelection = (completion: ICompletion) => {
+        const newSelection = [...selection];
+        const index = selection.findIndex(selection => selection.completionId === completion.completionId);
+
+        if (index >= 0) {
+            newSelection.splice(index, 1);
+        } else {
+            newSelection.push(completion);
+        }
+
+        onSelectionChange(newSelection);
+        focusEditor();
+    };
+
+    const removeSelection = (completion: ICompletion) => {
+        const newSelection = [...selection];
+        const index = selection.findIndex(selection => selection.completionId === completion.completionId);
+
+        if (index >= 0) {
+            newSelection.splice(index, 1);
+            onSelectionChange(newSelection);
+        }
+    };
+
+    const hasPlaceholder = (): boolean => selection.length === 0 && query.length === 0;
+
+    return (
+        <div className="mx_AutocompleteInput">
+            <div
+                ref={editorContainerRef}
+                className={classNames({
+                    'mx_AutocompleteInput_editor': true,
+                    'mx_AutocompleteInput_editor--focused': isFocused,
+                    'mx_AutocompleteInput_editor--has-suggestions': suggestions.length > 0,
+                })}
+                onClick={onClickInputArea}
+                data-testid="autocomplete-editor"
+            >
+                <SearchIcon className="mx_AutocompleteInput_search_icon" width={16} height={16} />
+                {
+                    selection.map(item => (
+                        <SelectionItem
+                            key={item.completionId}
+                            item={item}
+                            onClick={removeSelection}
+                            render={renderSelection}
+                        />
+                    ))
+                }
+                <input
+                    ref={editorRef}
+                    type="text"
+                    onKeyDown={onKeyDown}
+                    onChange={onQueryChange}
+                    value={query}
+                    autoComplete="off"
+                    placeholder={hasPlaceholder() ? placeholder : undefined}
+                    data-testid="autocomplete-input"
+                    {...onFocusChangeHandlerFunctions}
+                />
+            </div>
+            {
+                (isFocused && suggestions.length) ? (
+                    <div
+                        className="mx_AutocompleteInput_matches"
+                        style={{ top: editorContainerRef.current?.clientHeight }}
+                        data-testid="autocomplete-matches"
+                    >
+                        {
+                            suggestions.map((item) => (
+                                <SuggestionItem
+                                    key={item.completionId}
+                                    item={item}
+                                    selection={selection}
+                                    onClick={toggleSelection}
+                                    render={renderSuggestion}
+                                />
+                            ))
+                        }
+                    </div>
+                ) : null
+            }
+        </div>
+    );
+};
+
+type SelectionItemProps = {
+    item: ICompletion;
+    onClick: (completion: ICompletion) => void;
+    render?: (completion: ICompletion) => ReactElement;
+};
+
+const SelectionItem: React.FC<SelectionItemProps> = ({ item, onClick, render }) => {
+    const withContainer = (children: ReactNode): ReactElement => (
+        <span
+            className='mx_AutocompleteInput_editor_selection'
+            data-testid={`autocomplete-selection-item-${item.completionId}`}
+        >
+            <span className='mx_AutocompleteInput_editor_selection_pill'>
+                { children }
+            </span>
+            <AccessibleButton
+                className='mx_AutocompleteInput_editor_selection_remove_button'
+                onClick={() => onClick(item)}
+                data-testid={`autocomplete-selection-remove-button-${item.completionId}`}
+            >
+                <PillRemoveIcon width={8} height={8} />
+            </AccessibleButton>
+        </span>
+    );
+
+    if (render) {
+        return withContainer(render(item));
+    }
+
+    return withContainer(
+        <span className='mx_AutocompleteInput_editor_selection_text'>{ item.completion }</span>,
+    );
+};
+
+type SuggestionItemProps = {
+    item: ICompletion;
+    selection: ICompletion[];
+    onClick: (completion: ICompletion) => void;
+    render?: (completion: ICompletion) => ReactElement;
+};
+
+const SuggestionItem: React.FC<SuggestionItemProps> = ({ item, selection, onClick, render }) => {
+    const isSelected = selection.some(selection => selection.completionId === item.completionId);
+    const classes = classNames({
+        'mx_AutocompleteInput_suggestion': true,
+        'mx_AutocompleteInput_suggestion--selected': isSelected,
+    });
+
+    const withContainer = (children: ReactNode): ReactElement => (
+        <div
+            className={classes}
+            // `onClick` cannot be used here as it would lead to focus loss and closing the suggestion list.
+            onMouseDown={(event) => {
+                event.preventDefault();
+                onClick(item);
+            }}
+            data-testid={`autocomplete-suggestion-item-${item.completionId}`}
+        >
+            { children }
+        </div>
+    );
+
+    if (render) {
+        return withContainer(render(item));
+    }
+
+    return withContainer(
+        <>
+            <span className='mx_AutocompleteInput_suggestion_title'>{ item.completion }</span>
+            <span className='mx_AutocompleteInput_suggestion_description'>{ item.completionId }</span>
+        </>,
+    );
+};