Add more types to the autocomplete utility

src/plugins/rosterview/modals/templates/add-contact.js

@@ -3,7 +3,7 @@ import { api } from "@converse/headless";
 import { __ } from "i18n";
 import { getGroupsAutoCompleteList, getJIDsAutoCompleteList, getNamesAutoCompleteList } from "../../utils.js";
 import "shared/autocomplete/index.js";
-import { FILTER_STARTSWITH, FILTER_CONTAINS } from "shared/autocomplete/utils";
+import { FILTER_STARTSWITH, FILTER_CONTAINS } from "shared/autocomplete/utils.js";
 
 /**
  * @param {import('../add-contact.js').default} el

src/shared/autocomplete/autocomplete.js

@@ -60,10 +60,10 @@ export class AutoComplete extends EventEmitter(Object) {
     bindEvents() {
         this._events = {
             input: {
-                'blur': () => this.close({ 'reason': 'blur' }),
+                'blur': () => this.close({ reason: 'blur' }),
             },
             form: {
-                'submit': () => this.close({ 'reason': 'submit' }),
+                'submit': () => this.close({ reason: 'submit' }),
             },
             ul: {
                 'mousedown': (ev) => this.onMouseDown(ev),
@@ -111,6 +111,9 @@ export class AutoComplete extends EventEmitter(Object) {
         return this.is_opened;
     }
 
+    /**
+     * @param {import('./types').closeParam} o
+     */
     close(o) {
         if (!this.opened) {
             return;
@@ -121,6 +124,9 @@ export class AutoComplete extends EventEmitter(Object) {
         this.trigger('suggestion-box-close', o || {});
     }
 
+    /**
+     * @param {Suggestion} suggestion
+     */
     insertValue(suggestion) {
         if (this.match_current_word) {
             u.replaceCurrentWord(this.input, suggestion.value);
@@ -193,12 +199,15 @@ export class AutoComplete extends EventEmitter(Object) {
         if (selected) {
             const suggestion = this.suggestions[this.index];
             this.insertValue(suggestion);
-            this.close({ 'reason': 'select' });
+            this.close({ reason: 'select' });
             this.auto_completing = false;
             this.trigger('suggestion-box-selectcomplete', { text: suggestion });
         }
     }
 
+    /**
+     * @param {Event} ev
+     */
     onMouseOver(ev) {
         const li = u.ancestor(ev.target, 'li');
         if (li) {
@@ -207,6 +216,9 @@ export class AutoComplete extends EventEmitter(Object) {
         }
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     onMouseDown(ev) {
         if (ev.button !== 0) {
             return; // Only select on left click
@@ -291,7 +303,7 @@ export class AutoComplete extends EventEmitter(Object) {
 
             const list = typeof this._list === 'function' ? await this._list(value) : this._list;
             if (list.length === 0 || !this.auto_completing) {
-                this.close({ 'reason': 'nomatches' });
+                this.close({ reason: 'nomatches' });
                 return;
             }
 
@@ -299,8 +311,11 @@ export class AutoComplete extends EventEmitter(Object) {
             this.ul.innerHTML = '';
 
             this.suggestions = list
-                .map((item) => new Suggestion(this.data(item, value), value))
-                .filter((item) => this.filter(item, value));
+                .map(
+                    /** @param {import('./types').XHRResultItem} item */ (item) =>
+                        new Suggestion(this.data(item, value), value)
+                )
+                .filter(/** @param {Suggestion} item */ ({ value: text }) => this.filter(text, value));
 
             if (this.sort) {
                 this.suggestions = this.suggestions.sort(this.sort);
@@ -309,12 +324,12 @@ export class AutoComplete extends EventEmitter(Object) {
             this.suggestions.forEach((text) => this.ul.appendChild(this.item(text, value)));
 
             if (this.ul.children.length === 0) {
-                this.close({ 'reason': 'nomatches' });
+                this.close({ reason: 'nomatches' });
             } else {
                 this.open();
             }
         } else {
-            this.close({ 'reason': 'nomatches' });
+            this.close({ reason: 'nomatches' });
             if (!contains_trigger) {
                 this.auto_completing = false;
             }

src/shared/autocomplete/types.ts

@@ -0,0 +1,8 @@
+export type closeParam = {
+    reason: string;
+}
+
+export type XHRResultItem = {
+    label: string;
+    value: string;
+}

src/shared/autocomplete/utils.js

@@ -43,11 +43,21 @@ export const helpers = {
     }
 };
 
-export const FILTER_CONTAINS = function (text, input) {
+/**
+ * @param {string} text
+ * @param {string} input
+ * @returns {boolean}
+ */
+export function FILTER_CONTAINS (text, input) {
     return RegExp(helpers.regExpEscape(input.trim()), 'i').test(text);
 };
 
-export const FILTER_STARTSWITH = function (text, input) {
+/**
+ * @param {string} text
+ * @param {string} input
+ * @returns {boolean}
+ */
+export function FILTER_STARTSWITH (text, input) {
     return RegExp('^' + helpers.regExpEscape(input.trim()), 'i').test(text);
 };
 

src/types/shared/autocomplete/autocomplete.d.ts

@@ -21,7 +21,7 @@ export class AutoComplete extends AutoComplete_base {
     is_opened: boolean;
     match_current_word: boolean;
     sort: (a: any, b: any) => number;
-    filter: (text: any, input: any) => boolean;
+    filter: typeof FILTER_CONTAINS;
     ac_triggers: any[];
     include_triggers: any[];
     min_chars: number;
@@ -40,8 +40,14 @@ export class AutoComplete extends AutoComplete_base {
     _list: any;
     get selected(): boolean;
     get opened(): boolean;
-    close(o: any): void;
-    insertValue(suggestion: any): void;
+    /**
+     * @param {import('./types').closeParam} o
+     */
+    close(o: import("./types").closeParam): void;
+    /**
+     * @param {Suggestion} suggestion
+     */
+    insertValue(suggestion: Suggestion): void;
     open(): void;
     destroy(): void;
     next(): void;
@@ -53,8 +59,14 @@ export class AutoComplete extends AutoComplete_base {
     goto(i: number, scroll?: boolean): void;
     select(selected: any): void;
     auto_completing: boolean;
-    onMouseOver(ev: any): void;
-    onMouseDown(ev: any): void;
+    /**
+     * @param {Event} ev
+     */
+    onMouseOver(ev: Event): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    onMouseDown(ev: MouseEvent): void;
     /**
      * @param {KeyboardEvent} [ev]
      */
@@ -65,4 +77,6 @@ export class AutoComplete extends AutoComplete_base {
     evaluate(ev?: KeyboardEvent): Promise<void>;
 }
 export default AutoComplete;
+import { FILTER_CONTAINS } from './utils.js';
+import Suggestion from './suggestion.js';
 //# sourceMappingURL=autocomplete.d.ts.map

src/types/shared/autocomplete/types.d.ts

@@ -0,0 +1,8 @@
+export type closeParam = {
+    reason: string;
+};
+export type XHRResultItem = {
+    label: string;
+    value: string;
+};
+//# sourceMappingURL=types.d.ts.map

src/types/shared/autocomplete/utils.d.ts

@@ -1,3 +1,15 @@
+/**
+ * @param {string} text
+ * @param {string} input
+ * @returns {boolean}
+ */
+export function FILTER_CONTAINS(text: string, input: string): boolean;
+/**
+ * @param {string} text
+ * @param {string} input
+ * @returns {boolean}
+ */
+export function FILTER_STARTSWITH(text: string, input: string): boolean;
 export namespace helpers {
     function getElement(expr: any, el: any): any;
     function bind(element: any, o: any): void;
@@ -5,8 +17,6 @@ export namespace helpers {
     function regExpEscape(s: any): any;
     function isMention(word: any, ac_triggers: any): any;
 }
-export function FILTER_CONTAINS(text: any, input: any): boolean;
-export function FILTER_STARTSWITH(text: any, input: any): boolean;
 export function SORT_BY_QUERY_POSITION(a: any, b: any): number;
 export function ITEM(text: any, input: any): HTMLLIElement;
 //# sourceMappingURL=utils.d.ts.map