@fluid-topics/ft-search-input 1.2.61 → 1.2.63

package/build/SearchInputMessages.d.ts

@@ -3,5 +3,7 @@ export interface SearchInputMessages extends I18nMessages {
     placeholder(): string;
     searchButton(): string;
     clearButton(): string;
+    suggestionsLabel(): string;
+    ariaLiveSuggestions(resultCount: number): string;
 }
 export declare const searchInputContext: I18nMessageContext<SearchInputMessages>;

package/build/ft-search-input-suggestion.d.ts

@@ -1,23 +1,25 @@
 import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { FtSearchInputSuggestionProperties } from "./ft-search-input-suggestion.properties";
-import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { FtSearchInput } from "./ft-search-input";
 export declare class SuggestionSelectedEvent extends CustomEvent<string> {
     constructor(value: string);
 }
-export declare class FtSearchInputSuggestion extends FtSearchComponent implements FtSearchInputSuggestionProperties {
+export declare class FtSearchInputSuggestionManager {
+    private ftSearchInput;
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
-    private request?;
-    private suggestResults?;
-    launchSearchPath?: string;
+    constructor(ftSearchInput: FtSearchInput);
+    listboxId: string;
     render(): import("lit-html").TemplateResult<1>;
     private renderSuggestion;
-    private onSuggestKeyDown;
-    private onSuggestKeyUp;
     private onSuggestSelected;
     private getIcon;
-    private getFocusedSuggestionElement;
+    get selectedSuggestOption(): HTMLElement | null;
     private getLastSuggestionElement;
     private getFirstSuggestionElement;
-    focusFirstSuggestion(): void;
+    private nextSuggestionElement;
+    private previousSuggestionElement;
+    private selectSuggestion;
+    selectNextSuggestion(): void;
+    selectPreviousSuggestion(): void;
+    clearSelection(): void;
 }

package/build/ft-search-input-suggestion.js

@@ -1,90 +1,74 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { redux, wordWrap } from "@fluid-topics/ft-wc-utils";
+import { wordWrap } from "@fluid-topics/ft-wc-utils";
 import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
 import { suggestionStyles } from "./ft-search-input-suggestion.styles";
 import { repeat } from "lit/directives/repeat.js";
 import { FtIcon, FtIcons, FtIconVariants, resolveFileFormatIcon } from "@fluid-topics/ft-icon";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
-import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
 import { SearchPlaceConverterProvider } from "@fluid-topics/ft-app-context";
+import { searchInputContext } from "./SearchInputMessages";
 export class SuggestionSelectedEvent extends CustomEvent {
     constructor(value) {
         super("suggestion-selected", { detail: value });
     }
 }
-let FtSearchInputSuggestion = class FtSearchInputSuggestion extends FtSearchComponent {
+class FtSearchInputSuggestionManager {
+    constructor(ftSearchInput) {
+        this.ftSearchInput = ftSearchInput;
+        this.listboxId = "ft-search-input-suggestion";
+    }
     render() {
         const searchPlaceConverter = SearchPlaceConverterProvider.get();
         return html `
             <div class="ft-search-input-suggestion ft-word-wrap"
-                 part="container"
-                 @keydown=${(e) => this.onSuggestKeyDown(e)}>
-                ${repeat(this.suggestResults || [], suggest => suggest.value, suggest => {
-            return this.renderSuggestion(suggest, searchPlaceConverter);
+                 id="${this.listboxId}"
+                 role="listbox"
+                 aria-label="${searchInputContext.messages.suggestionsLabel()}"
+                 part="container">
+                ${repeat(this.ftSearchInput.suggestResults || [], suggest => suggest.value, (suggest, index) => {
+            return this.renderSuggestion(index, suggest, searchPlaceConverter);
         })}
             </div>
         `;
     }
-    renderSuggestion(suggest, searchPlaceConverter) {
+    renderSuggestion(index, suggest, searchPlaceConverter) {
+        const id = `suggestion-${index}`;
         const content = html `
-            <ft-ripple></ft-ripple>
+            <ft-ripple ?activated=${this.ftSearchInput.selectedSuggestOptionId === id}></ft-ripple>
             ${this.getIcon(suggest)}
             <ft-typography variant="body1">${suggest.value}</ft-typography>
         `;
-        if (this.launchSearchPath) {
-            const suggestRequest = { ...this.request, query: suggest.value };
-            const launchSuggestUrl = searchPlaceConverter.serializeToCurrentPageIfPossible(suggestRequest, this.launchSearchPath);
+        if (this.ftSearchInput.launchSearchPath) {
+            const suggestRequest = { ...this.ftSearchInput.request, query: suggest.value };
+            const launchSuggestUrl = searchPlaceConverter.serializeToCurrentPageIfPossible(suggestRequest, this.ftSearchInput.launchSearchPath);
             return html `
                 <a href="${launchSuggestUrl}"
                    part="suggestion"
                    class="ft-search-input-suggestion--suggestion"
-                   @keyup=${(e) => this.onSuggestKeyUp(e)}
+                   role="option"
+                   id="${id}"
+                   aria-selected="${this.ftSearchInput.selectedSuggestOptionId === id}"
+                   tabindex="-1"
+                   aria-label="${content}"
                    @click=${() => this.onSuggestSelected(suggest.value)}>
                     ${content}
                 </a>
             `;
         }
         return html `
-            <div tabindex="0"
-                 part="suggestion"
+            <div part="suggestion"
                  class="ft-search-input-suggestion--suggestion"
-                 @keyup=${(e) => this.onSuggestKeyUp(e)}
+                 role="option"
+                 id="${id}"
+                 aria-selected="${this.ftSearchInput.selectedSuggestOptionId === id}"
+                 tabindex="-1"
                  @click=${() => this.onSuggestSelected(suggest.value)}>
                 ${content}
             </div>
         `;
     }
-    onSuggestKeyDown(e) {
-        var _a, _b, _c, _d, _e, _f;
-        switch (e.key) {
-            case "ArrowUp":
-                (_c = ((_b = (_a = this.getFocusedSuggestionElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : this.getLastSuggestionElement())) === null || _c === void 0 ? void 0 : _c.focus();
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-            case "ArrowDown":
-                (_f = ((_e = (_d = this.getFocusedSuggestionElement()) === null || _d === void 0 ? void 0 : _d.nextElementSibling) !== null && _e !== void 0 ? _e : this.getFirstSuggestionElement())) === null || _f === void 0 ? void 0 : _f.focus();
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-        }
-    }
-    onSuggestKeyUp(e) {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            e.stopPropagation();
-            e.target.click();
-        }
-    }
     onSuggestSelected(suggest) {
-        this.dispatchEvent(new SuggestionSelectedEvent(suggest));
+        this.ftSearchInput.onSuggestionSelected(suggest);
     }
     getIcon(suggest) {
         const iconVariant = suggest.type === "DOCUMENT" ? FtIconVariants.file_format : FtIconVariants.fluid_topics;
@@ -104,40 +88,55 @@ let FtSearchInputSuggestion = class FtSearchInputSuggestion extends FtSearchComp
             <ft-icon .variant="${iconVariant}" .value="${icon}" part="suggestion-icon"></ft-icon>
         `;
     }
-    getFocusedSuggestionElement() {
-        return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion:focus-within");
+    get selectedSuggestOption() {
+        return this.ftSearchInput.shadowRoot.querySelector(`#${this.ftSearchInput.selectedSuggestOptionId}`);
     }
     getLastSuggestionElement() {
-        let suggestions = this.shadowRoot.querySelectorAll(".ft-search-input-suggestion--suggestion");
+        let suggestions = this.ftSearchInput.shadowRoot.querySelectorAll("[role=option]");
         return suggestions.length > 0 ? suggestions[suggestions.length - 1] : null;
     }
     getFirstSuggestionElement() {
-        return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion");
+        return this.ftSearchInput.shadowRoot.querySelector("[role=option]");
     }
-    focusFirstSuggestion() {
-        var _a;
-        (_a = this.getFirstSuggestionElement()) === null || _a === void 0 ? void 0 : _a.focus();
+    nextSuggestionElement() {
+        const divElement = this.selectedSuggestOption;
+        if (!divElement) {
+            return this.getFirstSuggestionElement();
+        }
+        return divElement === null || divElement === void 0 ? void 0 : divElement.nextElementSibling;
     }
-};
-FtSearchInputSuggestion.elementDefinitions = {
+    previousSuggestionElement() {
+        const divElement = this.selectedSuggestOption;
+        if (!divElement) {
+            return this.getLastSuggestionElement();
+        }
+        return divElement === null || divElement === void 0 ? void 0 : divElement.previousElementSibling;
+    }
+    selectSuggestion(element) {
+        if (element) {
+            this.ftSearchInput.selectedSuggestOptionId = element.id;
+        }
+        else {
+            this.ftSearchInput.selectedSuggestOptionId = undefined;
+        }
+    }
+    selectNextSuggestion() {
+        this.selectSuggestion(this.nextSuggestionElement());
+    }
+    selectPreviousSuggestion() {
+        this.selectSuggestion(this.previousSuggestionElement());
+    }
+    clearSelection() {
+        this.selectSuggestion(null);
+    }
+}
+FtSearchInputSuggestionManager.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
 };
-FtSearchInputSuggestion.styles = [
+FtSearchInputSuggestionManager.styles = [
     wordWrap,
     suggestionStyles,
 ];
-__decorate([
-    redux()
-], FtSearchInputSuggestion.prototype, "request", void 0);
-__decorate([
-    redux()
-], FtSearchInputSuggestion.prototype, "suggestResults", void 0);
-__decorate([
-    property()
-], FtSearchInputSuggestion.prototype, "launchSearchPath", void 0);
-FtSearchInputSuggestion = __decorate([
-    customElement("ft-search-input-suggestion")
-], FtSearchInputSuggestion);
-export { FtSearchInputSuggestion };
+export { FtSearchInputSuggestionManager };

package/build/ft-search-input-suggestion.styles.js

@@ -1,11 +1,14 @@
 import { css } from "lit";
 import { FtSearchInputCssVariables } from "./ft-search-input.styles";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
+import { FtSearchBarCssVariables } from "@fluid-topics/ft-search-bar";
 // language=CSS
 export const suggestionStyles = css `
     * {
         box-sizing: border-box;
     }
-    
+
     .ft-search-input-suggestion {
         position: absolute;
         z-index: ${FtSearchInputCssVariables.floatingZIndex};
@@ -34,8 +37,11 @@ export const suggestionStyles = css `
         position: relative;
     }
 
-    .ft-search-input-suggestion--suggestion:focus {
+    .ft-search-input-suggestion--suggestion[aria-selected="true"],
+    .ft-search-input-suggestion--suggestion:hover {
         outline: none;
+        box-shadow: inset 3px 0 0 ${FtSearchBarCssVariables.activeItemBorderColor};
+
     }
 
     .ft-search-input-suggestion--suggestion ft-typography {
@@ -43,4 +49,8 @@ export const suggestionStyles = css `
         flex-grow: 1;
         flex-shrink: 1;
     }
+
+    ft-ripple {
+        ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, FtRippleCssVariables.opacityContentOnSurfaceSelected)}
+    }
 `;

package/build/ft-search-input.d.ts

@@ -1,27 +1,38 @@
 import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtSearchInputProperties } from "./ft-search-input.properties";
 import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { FtSearchRequest, FtSuggestResult } from "@fluid-topics/public-api";
+import { FtSearchInputSuggestionManager } from "./ft-search-input-suggestion";
 declare const FtSearchInput_base: typeof FtSearchComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare class FtSearchInput extends FtSearchInput_base implements FtSearchInputProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
     constructor();
-    private request?;
-    private liveQuery;
-    private suggestResults?;
+    request?: FtSearchRequest;
+    liveQuery: string;
+    suggestResults?: Array<FtSuggestResult>;
     private forceCloseSuggestion;
+    displaySuggestListbox: boolean;
+    selectedSuggestOptionId?: string;
     launchSearchPath?: string;
     useCustomSearchPath: boolean;
     triggerSearchOnClear: boolean;
-    private input;
-    private suggestion;
+    input: HTMLInputElement;
     private launchSearchButton;
+    suggestions: FtSearchInputSuggestionManager;
     protected render(): import("lit-html").TemplateResult<1>;
+    private renderLiveText;
     private onSearchBarKeyDown;
     private onSearchBarKeyUp;
     private onInput;
     private onClearInput;
     private launchSearch;
-    private onSuggestionSelected;
+    onSuggestionSelected(value: string): void;
+    get shouldDisplaySuggestions(): boolean;
+    private onClick;
+    private onFocus;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private closeSuggestListbox;
 }
 export {};

package/build/ft-search-input.js

@@ -12,7 +12,7 @@ import { withI18n } from "@fluid-topics/ft-i18n";
 import { searchInputContext } from "./SearchInputMessages";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { FtSearchInputSuggestion } from "./ft-search-input-suggestion";
+import { FtSearchInputSuggestionManager } from "./ft-search-input-suggestion";
 import { FtButton } from "@fluid-topics/ft-button";
 import { FtTypographyBody2 } from "@fluid-topics/ft-typography";
 import { SearchPlaceConverterProvider } from "@fluid-topics/ft-app-context";
@@ -21,12 +21,22 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
         super();
         this.liveQuery = "";
         this.forceCloseSuggestion = false;
+        this.displaySuggestListbox = false;
         this.useCustomSearchPath = false;
         this.triggerSearchOnClear = false;
+        this.suggestions = new FtSearchInputSuggestionManager(this);
+        this.closeSuggestListbox = (e) => {
+            const path = e.composedPath();
+            const inside = path.some(n => n === this || n === this.shadowRoot);
+            if (!inside) {
+                this.displaySuggestListbox = false;
+                this.selectedSuggestOptionId = undefined;
+            }
+        };
         this.addI18nContext(searchInputContext);
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         let classes = {
             "ft-search-input": true,
             "ft-search-input--with-suggestions": (_b = (_a = this.suggestResults) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0,
@@ -44,15 +54,21 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                                type="search"
                                placeholder="${searchInputContext.messages.placeholder()}"
                                .value="${this.liveQuery}"
+                               role="combobox"
+                               aria-autocomplete="list"
+                               aria-controls="${this.suggestions.listboxId}"
+                               aria-expanded="${this.displaySuggestListbox}"
+                               aria-activedescendant="${(_c = this.selectedSuggestOptionId) !== null && _c !== void 0 ? _c : nothing}"
                                @input=${(e) => this.onInput(e)}
+                               @click="${() => this.onClick()}"
+                               @focus="${() => this.onFocus()}"
                                @keydown=${(e) => this.onSearchBarKeyDown(e)}
                                @keyup=${(e) => this.onSearchBarKeyUp(e)}>
                     </div>
-                    <ft-search-input-suggestion exportpartsPrefix="suggestion"
-                                                .request=${this.request}
-                                                .launchSearchPath=${searchPage}
-                                                @suggestion-selected=${this.onSuggestionSelected}
-                    ></ft-search-input-suggestion>
+                    <div class="ft-search-input--aria-live" aria-live="polite" aria-atomic="true">
+                        ${this.renderLiveText()}
+                    </div>
+                    ${this.shouldDisplaySuggestions ? this.suggestions.render() : nothing}
                 </div>
                 <div class="ft-search-input--actions" part="actions">
                     ${this.liveQuery ? html `
@@ -78,12 +94,52 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
             </div>
         `;
     }
+    renderLiveText() {
+        if (this.shouldDisplaySuggestions) {
+            return searchInputContext.messages.ariaLiveSuggestions(this.suggestResults.length);
+        }
+        else {
+            return "";
+        }
+    }
     onSearchBarKeyDown(e) {
+        if (!["Escape", "Tab", "Shift"].includes(e.key)) {
+            this.displaySuggestListbox = true;
+        }
         switch (e.key) {
+            case "Tab":
+                this.displaySuggestListbox = false;
+                this.selectedSuggestOptionId = undefined;
+                break;
+            case "Escape":
+                if (this.shouldDisplaySuggestions) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.displaySuggestListbox = false;
+                    this.selectedSuggestOptionId = undefined;
+                }
+                break;
             case "ArrowDown":
                 e.stopPropagation();
                 e.preventDefault();
-                this.suggestion.focusFirstSuggestion();
+                this.suggestions.selectNextSuggestion();
+                break;
+            case "ArrowUp":
+                e.stopPropagation();
+                e.preventDefault();
+                this.suggestions.selectPreviousSuggestion();
+                break;
+            case "ArrowLeft":
+            case "ArrowRight":
+                if (this.selectedSuggestOptionId) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.suggestions.clearSelection();
+                }
+                break;
+            case "Enter":
+                const elementToClick = this.suggestions.selectedSuggestOption || this.launchSearchButton;
+                elementToClick === null || elementToClick === void 0 ? void 0 : elementToClick.click();
                 break;
             case "Backspace":
                 e.stopPropagation();
@@ -124,20 +180,39 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
         this.dispatchEvent(new CustomEvent("change", { detail: query }));
         (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setQuery(query);
     }
-    onSuggestionSelected(e) {
+    onSuggestionSelected(value) {
+        this.launchSearch(value);
+        this.displaySuggestListbox = false;
+        this.suggestions.clearSelection();
+    }
+    get shouldDisplaySuggestions() {
         var _a;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
-        this.launchSearch(e.detail);
+        return this.displaySuggestListbox && ((_a = this.suggestResults) !== null && _a !== void 0 ? _a : []).length > 0;
+    }
+    onClick() {
+        this.onFocus();
+    }
+    onFocus() {
+        this.displaySuggestListbox = true;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener("pointerdown", this.closeSuggestListbox);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("pointerdown", this.closeSuggestListbox);
     }
 }
 FtSearchInput.elementDefinitions = {
-    "ft-search-input-suggestion": FtSearchInputSuggestion,
     "ft-button": FtButton,
+    ...FtSearchInputSuggestionManager.elementDefinitions,
 };
 FtSearchInput.styles = [
     FtTypographyBody2,
     noTextInputDefaultClearButton,
     styles,
+    ...FtSearchInputSuggestionManager.styles,
 ];
 __decorate([
     redux()
@@ -151,6 +226,12 @@ __decorate([
 __decorate([
     state()
 ], FtSearchInput.prototype, "forceCloseSuggestion", void 0);
+__decorate([
+    state()
+], FtSearchInput.prototype, "displaySuggestListbox", void 0);
+__decorate([
+    state()
+], FtSearchInput.prototype, "selectedSuggestOptionId", void 0);
 __decorate([
     property()
 ], FtSearchInput.prototype, "launchSearchPath", void 0);
@@ -163,9 +244,6 @@ __decorate([
 __decorate([
     query(".ft-search-input--input")
 ], FtSearchInput.prototype, "input", void 0);
-__decorate([
-    query("ft-search-input-suggestion")
-], FtSearchInput.prototype, "suggestion", void 0);
 __decorate([
     query(`[part="launch-search-in-input"]`)
 ], FtSearchInput.prototype, "launchSearchButton", void 0);