@fluid-topics/ft-search-input 2.1.1 → 2.1.3

package/build/SearchInputMessages.d.ts

@@ -4,6 +4,7 @@ export interface SearchInputMessages extends I18nMessages {
     searchButton(): string;
     clearButton(): string;
     suggestionsLabel(): string;
-    ariaLiveSuggestions(resultCount: number): string;
+    ariaLiveSuggestions(recentQueries: number, suggestions: number): string;
+    removeRecentQuery(query: string): string;
 }
 export declare const searchInputContext: I18nMessageContext<SearchInputMessages>;

package/build/SearchInputMessages.js

@@ -1,2 +1,2 @@
-import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+import { I18nMessageContext, } from "@fluid-topics/ft-i18n";
 export const searchInputContext = I18nMessageContext.build("designedSearchInput");

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

@@ -10,16 +10,21 @@ export declare class FtSearchInputSuggestionManager {
     constructor(ftSearchInput: FtSearchInput);
     listboxId: string;
     render(): import("lit-html").TemplateResult<1>;
+    private renderRecentQuery;
     private renderSuggestion;
-    private onSuggestSelected;
-    private getIcon;
-    get selectedSuggestOption(): HTMLElement | null;
-    private getLastSuggestionElement;
-    private getFirstSuggestionElement;
-    private nextSuggestionElement;
-    private previousSuggestionElement;
-    private selectSuggestion;
-    selectNextSuggestion(): void;
-    selectPreviousSuggestion(): void;
-    clearSelection(): void;
+    private renderOption;
+    private onRemoveRecentQuery;
+    private onSelectOption;
+    get activeElementId(): string | undefined;
+    get activeElement(): HTMLElement | undefined;
+    recentQueriesCount(): number;
+    suggestionsCount(): number;
+    optionsCount(): number;
+    private clearSelection;
+    selectNext(): void;
+    selectPrevious(): void;
+    selectLeft(): void;
+    private isRemovable;
+    selectRight(): void;
+    closeBox(): void;
 }

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

@@ -1,12 +1,13 @@
-import { wordWrap } from "@fluid-topics/ft-wc-utils";
-import { html } from "lit";
+import { wordWrap, } from "@fluid-topics/ft-wc-utils";
+import { html, nothing, } from "lit";
 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 { FtIcon, FtIcons, FtIconVariants, resolveFileFormatIcon, } from "@fluid-topics/ft-icon";
 import { FtRipple } from "@fluid-topics/ft-ripple";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { SearchPlaceConverterProvider } from "@fluid-topics/ft-app-context";
 import { searchInputContext } from "./SearchInputMessages";
+import { FtButton } from "@fluid-topics/ft-button";
 export class SuggestionSelectedEvent extends CustomEvent {
     constructor(value) {
         super("suggestion-selected", { detail: value });
@@ -18,59 +19,28 @@ export class FtSearchInputSuggestionManager {
         this.listboxId = "ft-search-input-suggestion";
     }
     render() {
+        var _a;
         const searchPlaceConverter = SearchPlaceConverterProvider.get();
+        const { recentQuerySuggestions } = this.ftSearchInput;
         return html `
             <div class="ft-search-input-suggestion ft-word-wrap"
                  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);
+                ${repeat(recentQuerySuggestions, (query) => query, (query, index) => {
+            return this.renderRecentQuery(index, query, searchPlaceConverter);
+        })}
+                ${repeat((_a = this.ftSearchInput.suggestResults) !== null && _a !== void 0 ? _a : [], (suggest) => suggest.value, (suggest, index) => {
+            return this.renderSuggestion(recentQuerySuggestions.length + index, suggest, searchPlaceConverter);
         })}
             </div>
         `;
     }
-    renderSuggestion(index, suggest, searchPlaceConverter) {
-        const id = `suggestion-${index}`;
-        const content = html `
-            <ft-ripple ?activated=${this.ftSearchInput.selectedSuggestOptionId === id}></ft-ripple>
-            ${this.getIcon(suggest)}
-            <ft-typography variant="body1">${suggest.value}</ft-typography>
-        `;
-        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"
-                   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 part="suggestion"
-                 class="ft-search-input-suggestion--suggestion"
-                 role="option"
-                 id="${id}"
-                 aria-selected="${this.ftSearchInput.selectedSuggestOptionId === id}"
-                 tabindex="-1"
-                 @click=${() => this.onSuggestSelected(suggest.value)}>
-                ${content}
-            </div>
-        `;
-    }
-    onSuggestSelected(suggest) {
-        this.ftSearchInput.onSuggestionSelected(suggest);
+    renderRecentQuery(index, query, searchPlaceConverter) {
+        return this.renderOption(index, query, "history", FtIconVariants.material, true, searchPlaceConverter);
     }
-    getIcon(suggest) {
+    renderSuggestion(index, suggest, searchPlaceConverter) {
         const iconVariant = suggest.type === "DOCUMENT" ? FtIconVariants.file_format : FtIconVariants.fluid_topics;
         let icon;
         switch (suggest.type) {
@@ -90,56 +60,139 @@ export class FtSearchInputSuggestionManager {
                 icon = FtIcons.FILE_CODE;
                 break;
         }
+        return this.renderOption(index, suggest.value, icon, iconVariant, false, searchPlaceConverter);
+    }
+    renderOption(index, query, icon, iconVariant, removable, searchPlaceConverter) {
+        const indexSelected = this.ftSearchInput.selectedSuggestOptionIndex === index;
+        const removeButtonSelected = this.ftSearchInput.selectedSuggestOptionRemove;
+        const href = this.ftSearchInput.launchSearchPath ? searchPlaceConverter.serializeToCurrentPageIfPossible({ ...this.ftSearchInput.request, query }, this.ftSearchInput.launchSearchPath) : nothing;
         return html `
-            <ft-icon .variant=${iconVariant} .value=${icon} part="suggestion-icon"></ft-icon>
+            <div part="suggestion-container"
+                 class="ft-search-input-suggestion--container">
+                <a href="${href}"
+                   part="suggestion"
+                   class="ft-search-input-suggestion--suggestion"
+                   role="option"
+                   id="suggestion-${index}"
+                   aria-selected="${indexSelected}"
+                   tabindex="-1"
+                   @click=${() => this.onSelectOption(query)}
+                >
+                    <ft-ripple ?activated=${indexSelected && !removeButtonSelected}></ft-ripple>
+                    <ft-icon variant="${iconVariant}" value="${icon}" part="suggestion-icon"></ft-icon>
+                    <ft-typography variant="${FtTypographyVariants.body1}">${query}</ft-typography>
+                </a>
+                ${removable ? html `
+                    <ft-button icon="${FtIcons.CLOSE}"
+                               round
+                               part="remove-suggestion"
+                               class="ft-search-input-suggestion--remove"
+                               id="remove-suggestion-${index}"
+                               label="${searchInputContext.messages.removeRecentQuery(query)}"
+                               tooltipPosition="left"
+                               tabindex="-1"
+                               ?activated=${indexSelected && removeButtonSelected}
+                               @click=${() => this.onRemoveRecentQuery(query)}>
+                    </ft-button>
+                ` : nothing}
+            </div>
         `;
     }
-    get selectedSuggestOption() {
-        return this.ftSearchInput.shadowRoot.querySelector(`#${this.ftSearchInput.selectedSuggestOptionId}`);
+    onRemoveRecentQuery(query) {
+        var _a;
+        (_a = this.ftSearchInput.stateManager) === null || _a === void 0 ? void 0 : _a.removeRecentQuery(query);
     }
-    getLastSuggestionElement() {
-        const suggestions = this.ftSearchInput.shadowRoot.querySelectorAll("[role=option]");
-        return suggestions.length > 0 ? suggestions[suggestions.length - 1] : null;
+    onSelectOption(query) {
+        this.ftSearchInput.onSuggestionSelected(query);
     }
-    getFirstSuggestionElement() {
-        return this.ftSearchInput.shadowRoot.querySelector("[role=option]");
+    get activeElementId() {
+        const { selectedSuggestOptionIndex, selectedSuggestOptionRemove } = this.ftSearchInput;
+        if (selectedSuggestOptionIndex === undefined) {
+            return undefined;
+        }
+        return (selectedSuggestOptionRemove ? "remove-suggestion-" : "suggestion-") + selectedSuggestOptionIndex;
     }
-    nextSuggestionElement() {
-        const divElement = this.selectedSuggestOption;
-        if (!divElement) {
-            return this.getFirstSuggestionElement();
+    get activeElement() {
+        var _a;
+        const id = this.activeElementId;
+        if (id === undefined) {
+            return undefined;
         }
-        return divElement === null || divElement === void 0 ? void 0 : divElement.nextElementSibling;
+        return (_a = this.ftSearchInput.shadowRoot.getElementById(id)) !== null && _a !== void 0 ? _a : undefined;
+    }
+    recentQueriesCount() {
+        return this.ftSearchInput.recentQuerySuggestions.length;
+    }
+    suggestionsCount() {
+        var _a, _b;
+        return (_b = (_a = this.ftSearchInput.suggestResults) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    }
+    optionsCount() {
+        return this.recentQueriesCount() + this.suggestionsCount();
     }
-    previousSuggestionElement() {
-        const divElement = this.selectedSuggestOption;
-        if (!divElement) {
-            return this.getLastSuggestionElement();
+    clearSelection() {
+        this.ftSearchInput.selectedSuggestOptionIndex = undefined;
+        this.ftSearchInput.selectedSuggestOptionRemove = false;
+    }
+    selectNext() {
+        if (this.ftSearchInput.selectedSuggestOptionIndex === undefined) {
+            this.ftSearchInput.selectedSuggestOptionIndex = 0;
+        }
+        else {
+            this.ftSearchInput.selectedSuggestOptionIndex++;
+            if (this.ftSearchInput.selectedSuggestOptionIndex >= this.optionsCount()) {
+                this.clearSelection();
+            }
         }
-        return divElement === null || divElement === void 0 ? void 0 : divElement.previousElementSibling;
     }
-    selectSuggestion(element) {
-        if (element) {
-            this.ftSearchInput.selectedSuggestOptionId = element.id;
+    selectPrevious() {
+        if (this.ftSearchInput.selectedSuggestOptionIndex === undefined) {
+            this.ftSearchInput.selectedSuggestOptionIndex = this.optionsCount() - 1;
         }
         else {
-            this.ftSearchInput.selectedSuggestOptionId = undefined;
+            this.ftSearchInput.selectedSuggestOptionIndex--;
+            if (this.ftSearchInput.selectedSuggestOptionIndex < 0) {
+                this.clearSelection();
+            }
         }
     }
-    selectNextSuggestion() {
-        this.selectSuggestion(this.nextSuggestionElement());
+    selectLeft() {
+        const index = this.ftSearchInput.selectedSuggestOptionIndex;
+        if (index === undefined) {
+            return;
+        }
+        if (this.ftSearchInput.selectedSuggestOptionRemove) {
+            this.ftSearchInput.selectedSuggestOptionRemove = false;
+        }
+        else {
+            this.clearSelection();
+        }
     }
-    selectPreviousSuggestion() {
-        this.selectSuggestion(this.previousSuggestionElement());
+    isRemovable(index) {
+        return index < this.recentQueriesCount();
     }
-    clearSelection() {
-        this.selectSuggestion(null);
+    selectRight() {
+        const index = this.ftSearchInput.selectedSuggestOptionIndex;
+        if (index === undefined) {
+            return;
+        }
+        if (!this.ftSearchInput.selectedSuggestOptionRemove && this.isRemovable(index)) {
+            this.ftSearchInput.selectedSuggestOptionRemove = true;
+        }
+        else {
+            this.clearSelection();
+        }
+    }
+    closeBox() {
+        this.ftSearchInput.displaySuggestListbox = false;
+        this.clearSelection();
     }
 }
 FtSearchInputSuggestionManager.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
+    "ft-button": FtButton,
 };
 FtSearchInputSuggestionManager.styles = [
     wordWrap,

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

@@ -21,6 +21,17 @@ export const suggestionStyles = css `
         box-shadow: ${FtSearchInputCssVariables.elevation02};
     }
 
+    .ft-search-input-suggestion--container {
+        display: flex;
+        align-items: center;
+    }
+
+    .ft-search-input-suggestion--container:has([aria-selected="true"]),
+    .ft-search-input-suggestion--container:hover {
+        outline: none;
+        box-shadow: inset 3px 0 0 ${FtSearchBarCssVariables.activeItemBorderColor};
+    }
+
     .ft-search-input-suggestion--suggestion {
         text-decoration: none;
         position: relative;
@@ -31,19 +42,13 @@ export const suggestionStyles = css `
         cursor: pointer;
         color: ${FtSearchInputCssVariables.colorOnSurface};
         min-height: 44px;
+        flex-grow: 1;
     }
 
     .ft-search-input-suggestion--suggestion > *:not(ft-ripple) {
         position: relative;
     }
 
-    .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 {
         display: block;
         flex-grow: 1;

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

@@ -12,9 +12,11 @@ export declare class FtSearchInput extends FtSearchInput_base implements FtSearc
     request?: FtSearchRequest;
     liveQuery: string;
     suggestResults?: Array<FtSuggestResult>;
+    recentQuerySuggestions: string[];
     private forceCloseSuggestion;
     displaySuggestListbox: boolean;
-    selectedSuggestOptionId?: string;
+    selectedSuggestOptionIndex?: number;
+    selectedSuggestOptionRemove: boolean;
     launchSearchPath?: string;
     placeholder?: I18nAttributeValue;
     useCustomSearchPath: boolean;
@@ -24,20 +26,18 @@ export declare class FtSearchInput extends FtSearchInput_base implements FtSearc
     private launchSearchButton;
     suggestions: FtSearchInputSuggestionManager;
     protected render(): import("lit-html").TemplateResult<1>;
-    private renderLiveText;
     private onSearchBarKeyDown;
     private onSearchBarKeyUp;
     private onInput;
     private onClearInput;
     launchSearch(query: string): void;
     onSuggestionSelected(value: string): void;
-    get shouldDisplaySuggestions(): boolean;
     private onClick;
     private showSuggestionsOnFocus;
     private onFocus;
     focusInput(showSuggestions?: boolean): Promise<void>;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
-    private closeSuggestListbox;
+    private onPointerDown;
 }
 export {};

package/build/ft-search-input.js

@@ -17,37 +17,45 @@ import { FtButton } from "@fluid-topics/ft-button";
 import { FtTypographyBody2 } from "@fluid-topics/ft-typography";
 import { SearchPlaceConverterProvider } from "@fluid-topics/ft-app-context";
 import { i18nAttribute, } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
+const maxRecentQuerySuggestions = 5;
+function selectRecentQuerySuggestions(state) {
+    const normalizedQuery = state.liveQuery.trim().toLowerCase();
+    return state.recentQueries.filter((q) => q.toLowerCase().includes(normalizedQuery)).slice(0, maxRecentQuerySuggestions);
+}
 export class FtSearchInput extends withI18n(FtSearchComponent) {
     constructor() {
         super();
         this.liveQuery = "";
+        this.recentQuerySuggestions = [];
         this.forceCloseSuggestion = false;
         this.displaySuggestListbox = false;
+        this.selectedSuggestOptionRemove = false;
         this.useCustomSearchPath = false;
         this.triggerSearchOnClear = false;
         this.focusOnDisplay = false;
         this.suggestions = new FtSearchInputSuggestionManager(this);
         this.showSuggestionsOnFocus = true;
-        this.closeSuggestListbox = (e) => {
+        this.onPointerDown = (e) => {
             const path = e.composedPath();
             const inside = path.some((n) => n === this || n === this.shadowRoot);
             if (!inside) {
-                this.displaySuggestListbox = false;
-                this.selectedSuggestOptionId = undefined;
+                this.suggestions.closeBox();
             }
         };
         this.addI18nContext(searchInputContext);
     }
     render() {
-        var _a, _b, _c;
+        var _a;
+        const hasSuggestions = this.suggestions.optionsCount() > 0;
         const 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,
+            "ft-search-input--with-suggestions": hasSuggestions,
             "ft-search-input--with-suggestions-closed": this.forceCloseSuggestion,
         };
         const liveRequest = { ...this.request, query: this.liveQuery };
         const searchPage = this.useCustomSearchPath ? this.launchSearchPath : undefined;
         const launchSearchUrl = SearchPlaceConverterProvider.get().serializeToCurrentPageIfPossible(liveRequest, searchPage);
+        const displaySuggestions = !this.forceCloseSuggestion && this.displaySuggestListbox && hasSuggestions;
         return html `
             <div class="${classMap(classes)}" @focusout=${() => this.forceCloseSuggestion = false} role="search">
                 <div class="ft-search-input--input-container" part="input-container" tabindex="-1">
@@ -56,12 +64,12 @@ export class FtSearchInput extends withI18n(FtSearchComponent) {
                                part="input"
                                type="search"
                                placeholder="${this.placeholder ? this.placeholder.message : searchInputContext.messages.placeholder()}"
-                               .value=${this.liveQuery}
+                               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}"
+                               aria-activedescendant="${(_a = this.suggestions.activeElementId) !== null && _a !== void 0 ? _a : nothing}"
                                @input=${this.onInput}
                                @click=${this.onClick}
                                @focus=${this.onFocus}
@@ -69,9 +77,9 @@ export class FtSearchInput extends withI18n(FtSearchComponent) {
                                @keyup=${this.onSearchBarKeyUp}>
                     </div>
                     <div class="sr-only" aria-live="polite" aria-atomic="true">
-                        ${this.renderLiveText()}
+                        ${displaySuggestions ? searchInputContext.messages.ariaLiveSuggestions(this.suggestions.recentQueriesCount(), this.suggestions.suggestionsCount()) : ""}
                     </div>
-                    ${this.shouldDisplaySuggestions ? this.suggestions.render() : nothing}
+                    ${displaySuggestions ? this.suggestions.render() : nothing}
                 </div>
                 <div class="ft-search-input--actions" part="actions">
                     ${this.liveQuery ? html `
@@ -97,14 +105,6 @@ export class FtSearchInput extends withI18n(FtSearchComponent) {
             </div>
         `;
     }
-    renderLiveText() {
-        if (this.shouldDisplaySuggestions) {
-            return searchInputContext.messages.ariaLiveSuggestions(this.suggestResults.length);
-        }
-        else {
-            return "";
-        }
-    }
     onSearchBarKeyDown(e) {
         this.forceCloseSuggestion = false;
         if (!["Escape", "Tab", "Shift"].includes(e.key)) {
@@ -112,38 +112,42 @@ export class FtSearchInput extends withI18n(FtSearchComponent) {
         }
         switch (e.key) {
             case "Tab":
-                this.displaySuggestListbox = false;
-                this.selectedSuggestOptionId = undefined;
+                this.suggestions.closeBox();
                 break;
             case "Escape":
-                if (this.shouldDisplaySuggestions) {
+                if (this.displaySuggestListbox && this.suggestions.optionsCount() > 0) {
                     e.stopPropagation();
                     e.preventDefault();
-                    this.displaySuggestListbox = false;
-                    this.selectedSuggestOptionId = undefined;
+                    this.suggestions.closeBox();
                 }
                 break;
             case "ArrowDown":
                 e.stopPropagation();
                 e.preventDefault();
-                this.suggestions.selectNextSuggestion();
+                this.suggestions.selectNext();
                 break;
             case "ArrowUp":
                 e.stopPropagation();
                 e.preventDefault();
-                this.suggestions.selectPreviousSuggestion();
+                this.suggestions.selectPrevious();
                 break;
             case "ArrowLeft":
+                if (this.selectedSuggestOptionIndex !== undefined) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.suggestions.selectLeft();
+                }
+                break;
             case "ArrowRight":
-                if (this.selectedSuggestOptionId) {
+                if (this.selectedSuggestOptionIndex !== undefined) {
                     e.stopPropagation();
                     e.preventDefault();
-                    this.suggestions.clearSelection();
+                    this.suggestions.selectRight();
                 }
                 break;
             case "Enter": {
                 // Select suggested option if applicable
-                const elementToClick = this.suggestions.selectedSuggestOption;
+                const elementToClick = this.suggestions.activeElement;
                 if (elementToClick) {
                     elementToClick.click();
                     break; // Clicking the selected suggestion will already launch a search
@@ -185,19 +189,15 @@ export class FtSearchInput extends withI18n(FtSearchComponent) {
         this.input.focus();
     }
     launchSearch(query) {
-        var _a;
+        var _a, _b;
         this.forceCloseSuggestion = true;
         this.dispatchEvent(new CustomEvent("change", { detail: query }));
         (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setQuery(query);
+        (_b = this.stateManager) === null || _b === void 0 ? void 0 : _b.addRecentQuery(query);
     }
     onSuggestionSelected(value) {
         this.launchSearch(value);
-        this.displaySuggestListbox = false;
-        this.suggestions.clearSelection();
-    }
-    get shouldDisplaySuggestions() {
-        var _a;
-        return !this.forceCloseSuggestion && this.displaySuggestListbox && ((_a = this.suggestResults) !== null && _a !== void 0 ? _a : []).length > 0;
+        this.suggestions.closeBox();
     }
     onClick() {
         this.onFocus();
@@ -216,14 +216,14 @@ export class FtSearchInput extends withI18n(FtSearchComponent) {
     }
     async connectedCallback() {
         super.connectedCallback();
-        document.addEventListener("pointerdown", this.closeSuggestListbox);
+        document.addEventListener("pointerdown", this.onPointerDown);
         if (this.focusOnDisplay && !isTouchScreen) {
             this.focusInput(false);
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener("pointerdown", this.closeSuggestListbox);
+        document.removeEventListener("pointerdown", this.onPointerDown);
     }
 }
 FtSearchInput.elementDefinitions = {
@@ -246,6 +246,9 @@ __decorate([
 __decorate([
     redux()
 ], FtSearchInput.prototype, "suggestResults", void 0);
+__decorate([
+    redux({ selector: selectRecentQuerySuggestions })
+], FtSearchInput.prototype, "recentQuerySuggestions", void 0);
 __decorate([
     state()
 ], FtSearchInput.prototype, "forceCloseSuggestion", void 0);
@@ -254,7 +257,10 @@ __decorate([
 ], FtSearchInput.prototype, "displaySuggestListbox", void 0);
 __decorate([
     state()
-], FtSearchInput.prototype, "selectedSuggestOptionId", void 0);
+], FtSearchInput.prototype, "selectedSuggestOptionIndex", void 0);
+__decorate([
+    state()
+], FtSearchInput.prototype, "selectedSuggestOptionRemove", void 0);
 __decorate([
     property()
 ], FtSearchInput.prototype, "launchSearchPath", void 0);