Remove usage of `chatview` with emoji picker.

CHANGES.md

@@ -56,6 +56,7 @@
   `visibilitychange` event on `document` instead.
 - `api.modal.create` no longer takes a class, instead it takes the name of a custom DOM element.
 - `getAssignableRoles` and `getAssignableAffiliations` are no longer on the `_converse` object, but on the Occupant instance.
+- Removed the `chatBoxFocused` and `chatBoxBlurred` events.
 
 ## 10.1.7 (2024-03-15)
 

src/headless/shared/model-with-messages.js

@@ -48,7 +48,7 @@ export default function ModelWithMessages(BaseModel) {
         }
 
         async initialize() {
-            await super.initialize();
+            super.initialize();
 
             this.initUI();
             this.initMessages();

src/headless/utils/form.js

@@ -56,7 +56,7 @@ export function webForm2xForm (field) {
 /**
  * Returns the current word being written in the input element
  * @method u#getCurrentWord
- * @param {HTMLInputElement} input - The HTMLElement in which text is being entered
+ * @param {HTMLInputElement|HTMLTextAreaElement} input - The HTMLElement in which text is being entered
  * @param {number} [index] - An optional rightmost boundary index. If given, the text
  *  value of the input element will only be considered up until this index.
  * @param {string|RegExp} [delineator] - An optional string delineator to

src/plugins/chatview/bottom-panel.js

@@ -28,9 +28,11 @@ export default class ChatBottomPanel extends CustomElement {
         this.listenTo(this.model, 'change:num_unread', () => this.requestUpdate());
         this.listenTo(this.model, 'emoji-picker-autocomplete', this.autocompleteInPicker);
 
-        this.addEventListener('focusin', ev => this.emitFocused(ev));
-        this.addEventListener('focusout', ev => this.emitBlurred(ev));
         this.addEventListener('click', ev => this.sendButtonClicked(ev));
+        this.addEventListener(
+            'emojipickerblur',
+            () => /** @type {HTMLElement} */(this.querySelector('.chat-textarea')).focus()
+        );
     }
 
     render () {
@@ -53,16 +55,6 @@ export default class ChatBottomPanel extends CustomElement {
         this.model.ui.set({ 'scrolled': false });
     }
 
-    emitFocused (ev) {
-        const { chatboxviews } = _converse.state;
-        chatboxviews.get(this.getAttribute('jid'))?.emitFocused(ev);
-    }
-
-    emitBlurred (ev) {
-        const { chatboxviews } = _converse.state;
-        chatboxviews.get(this.getAttribute('jid'))?.emitBlurred(ev);
-    }
-
     onDragOver (ev) {
         ev.preventDefault();
     }
@@ -72,14 +64,18 @@ export default class ChatBottomPanel extends CustomElement {
         clearMessages(this.model);
     }
 
+    /**
+     * @param {HTMLTextAreaElement} input
+     * @param {string} value
+     */
     async autocompleteInPicker (input, value) {
         await api.emojis.initialize();
         const emoji_picker = /** @type {EmojiPicker} */(this.querySelector('converse-emoji-picker'));
         if (emoji_picker) {
-            emoji_picker.model.set({
-                'ac_position': input.selectionStart,
-                'autocompleting': value,
-                'query': value
+            emoji_picker.state.set({
+                ac_position: input.selectionStart,
+                autocompleting: value,
+                query: value
             });
             const emoji_dropdown = /** @type {EmojiDropdown} */(this.querySelector('converse-emoji-dropdown'));
             emoji_dropdown?.dropdown.show();

src/plugins/chatview/message-form.js

@@ -12,9 +12,18 @@ const { ACTIVE, COMPOSING } = constants;
 
 export default class MessageForm extends CustomElement {
 
+    static get properties () {
+        return {
+            model: { type: Object },
+        }
+    }
+
+    constructor () {
+        super();
+        this.model = null;
+    }
+
     async initialize () {
-        const { chatboxes } = _converse.state;
-        this.model = chatboxes.get(this.getAttribute('jid'));
         await this.model.initialized;
         this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
         this.listenTo(this.model, 'change:composing_spoiler', () => this.requestUpdate());
@@ -217,7 +226,7 @@ export default class MessageForm extends CustomElement {
         if (api.settings.get('view_mode') === 'overlayed') {
             // XXX: Chrome flexbug workaround. The .chat-content area
             // doesn't resize when the textarea is resized to its original size.
-            const chatview = chatboxviews.get(this.getAttribute('jid'));
+            const chatview = chatboxviews.get(this.model.get('jid'));
             const msgs_container = chatview.querySelector('.chat-content__messages');
             msgs_container.parentElement.style.display = 'none';
         }
@@ -226,7 +235,7 @@ export default class MessageForm extends CustomElement {
 
         if (api.settings.get('view_mode') === 'overlayed') {
             // XXX: Chrome flexbug workaround.
-            const chatview = chatboxviews.get(this.getAttribute('jid'));
+            const chatview = chatboxviews.get(this.model.get('jid'));
             const msgs_container = chatview.querySelector('.chat-content__messages');
             msgs_container.parentElement.style.display = '';
         }

src/plugins/chatview/templates/bottom-panel.js

@@ -7,6 +7,6 @@ export default (o) => {
     return html`
         ${ o.model.ui.get('scrolled') && o.model.get('num_unread') ?
             html`<div class="new-msgs-indicator" @click=${ev => o.viewUnreadMessages(ev)}>▼ ${ unread_msgs } ▼</div>` : '' }
-        <converse-message-form jid="${o.model.get('jid')}"></converse-message-form>
+        <converse-message-form .model=${o.model}></converse-message-form>
     `;
 }

src/plugins/muc-views/templates/muc-bottom-panel.js

@@ -10,7 +10,7 @@ const tplCanEdit = (o) => {
     return html` ${o.model.ui.get('scrolled') && o.model.get('num_unread')
             ? html`<div class="new-msgs-indicator" @click=${(ev) => o.viewUnreadMessages(ev)}>▼ ${unread_msgs} ▼</div>`
             : ''}
-        <converse-muc-message-form jid=${o.model.get('jid')}></converse-muc-message-form>`;
+        <converse-muc-message-form .model=${o.model}></converse-muc-message-form>`;
 };
 
 export default (o) => {
@@ -27,7 +27,7 @@ export default (o) => {
     } else if (conn_status == converse.ROOMSTATUS.NICKNAME_REQUIRED) {
         if (api.settings.get('muc_show_logs_before_join')) {
             return html`<span class="muc-bottom-panel muc-bottom-panel--nickname">
-                <converse-muc-nickname-form jid="${o.model.get('jid')}"></converse-muc-nickname-form>
+                <converse-muc-nickname-form .model=${o.model}></converse-muc-nickname-form>
             </span>`;
         }
     } else {

src/shared/chat/baseview.js

@@ -54,34 +54,6 @@ export default class BaseChatView extends CustomElement {
         return this;
     }
 
-    emitBlurred (ev) {
-        if (this.contains(document.activeElement) || this.contains(ev.relatedTarget)) {
-            // Something else in this chatbox is still focused
-            return;
-        }
-        /**
-         * Triggered when the focus has been removed from a particular chat.
-         * @event _converse#chatBoxBlurred
-         * @type {BaseChatView}
-         * @example _converse.api.listen.on('chatBoxBlurred', (view, event) => { ... });
-         */
-        api.trigger('chatBoxBlurred', this, ev);
-    }
-
-    emitFocused (ev) {
-        if (this.contains(ev.relatedTarget)) {
-            // Something else in this chatbox was already focused
-            return;
-        }
-        /**
-         * Triggered when the focus has been moved to a particular chat.
-         * @event _converse#chatBoxFocused
-         * @type {BaseChatView}
-         * @example _converse.api.listen.on('chatBoxFocused', (view, event) => { ... });
-         */
-        api.trigger('chatBoxFocused', this, ev);
-    }
-
     getBottomPanel () {
         if (this.model.get('type') === CHATROOMS_TYPE) {
             return this.querySelector('converse-muc-bottom-panel');

src/shared/chat/emoji-dropdown.js

@@ -12,9 +12,9 @@ export default class EmojiDropdown extends DropdownBase {
 
     static get properties() {
         return {
-            chatview: { type: Object },
             icon_classes: { type: String },
-            items: { type: Array }
+            items: { type: Array },
+            model: { type: Object }
         };
     }
 
@@ -24,7 +24,8 @@ export default class EmojiDropdown extends DropdownBase {
 
         // This is an optimization, we lazily render the emoji picker, otherwise tests slow to a crawl.
         this.render_emojis = false;
-        this.chatview = null;
+        this.state = null;
+        this.model= null;
         this.addEventListener('shown.bs.dropdown', () => this.onShown());
     }
 
@@ -33,19 +34,19 @@ export default class EmojiDropdown extends DropdownBase {
             this.init_promise = (async () => {
                 await api.emojis.initialize()
                 const bare_jid = _converse.session.get('bare_jid');
-                const id = `converse.emoji-${bare_jid}-${this.chatview.model.get('jid')}`;
-                this.model = new EmojiPicker({ id });
-                initStorage(this.model, id);
-                await new Promise(resolve => this.model.fetch({'success': resolve, 'error': resolve}));
+                const id = `converse.emoji-${bare_jid}-${this.model.get('jid')}`;
+                this.state = new EmojiPicker({ id });
+                initStorage(this.state, id);
+                await new Promise(resolve => this.state.fetch({'success': resolve, 'error': resolve}));
                 // We never want still be in the autocompleting state upon page load
-                this.model.set({'autocompleting': null, 'ac_position': null});
+                this.state.set({'autocompleting': null, 'ac_position': null});
             })();
         }
         return this.init_promise;
     }
 
     render() {
-        const is_groupchat = this.chatview.model.get('type') === CHATROOMS_TYPE;
+        const is_groupchat = this.model.get('type') === CHATROOMS_TYPE;
         const color = is_groupchat ? '--muc-color' : '--chat-color';
 
         return html`
@@ -66,13 +67,13 @@ export default class EmojiDropdown extends DropdownBase {
                 <li>
                 ${until(this.initModel().then(() => html`
                     <converse-emoji-picker
-                            .chatview=${this.chatview}
-                            .model=${this.model}
-                            @emojiSelected=${() => this.dropdown.hide()}
-                            ?render_emojis=${this.render_emojis}
-                            current_category="${this.model.get('current_category') || ''}"
-                            current_skintone="${this.model.get('current_skintone') || ''}"
-                            query="${this.model.get('query') || ''}"
+                        .state=${this.state}
+                        .model=${this.model}
+                        @emojiSelected=${() => this.dropdown.hide()}
+                        ?render_emojis=${this.render_emojis}
+                        current_category="${this.state.get('current_category') || ''}"
+                        current_skintone="${this.state.get('current_skintone') || ''}"
+                        query="${this.state.get('query') || ''}"
                     ></converse-emoji-picker>`), '')}
                 </li>
             </ul>`;

src/shared/chat/emoji-picker-content.js

@@ -13,7 +13,6 @@ const { sizzle } = converse.env;
 export default class EmojiPickerContent extends CustomElement {
     static get properties () {
         return {
-            'chatview': { type: Object },
             'search_results': { type: Array },
             'current_skintone': { type: String },
             'model': { type: Object },
@@ -32,10 +31,10 @@ export default class EmojiPickerContent extends CustomElement {
     render () {
         const props = {
             'current_skintone': this.current_skintone,
-            'insertEmoji': (ev) => this.insertEmoji(ev),
+            'insertEmoji': /** @param {MouseEvent} ev */(ev) => this.insertEmoji(ev),
             'query': this.query,
             'search_results': this.search_results,
-            'shouldBeHidden': (shortname) => this.shouldBeHidden(shortname),
+            'shouldBeHidden': /** @param {string} shortname */(shortname) => this.shouldBeHidden(shortname),
         };
         return html` <div class="emoji-picker__lists">${tplSearchResults(props)} ${tplAllEmojis(props)}</div> `;
     }
@@ -81,13 +80,20 @@ export default class EmojiPickerContent extends CustomElement {
         }
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     insertEmoji (ev) {
         ev.preventDefault();
         ev.stopPropagation();
-        const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target;
-        /** @type EmojiPicker */(this.parentElement).insertIntoTextArea(target.getAttribute('data-emoji'));
+        const target = /** @type {HTMLElement} */(ev.target);
+        const emoji_el = target.nodeName === 'IMG' ? target.parentElement : target;
+        /** @type EmojiPicker */(this.parentElement).insertIntoTextArea(emoji_el.getAttribute('data-emoji'));
     }
 
+    /**
+     * @param {string} shortname
+     */
     shouldBeHidden (shortname) {
         // Helper method for the template which decides whether an
         // emoji should be hidden, based on which skin tone is

src/shared/chat/emoji-picker.js

@@ -22,35 +22,41 @@ export default class EmojiPicker extends CustomElement {
 
     static get properties () {
         return {
-            'chatview': { type: Object },
-            'current_category': { type: String, 'reflect': true },
-            'current_skintone': { type: String, 'reflect': true },
-            'model': { type: Object },
-            'query': { type: String, 'reflect': true },
+            current_category: { type: String, 'reflect': true },
+            current_skintone: { type: String, 'reflect': true },
+            model: { type: Object },
+            query: { type: String, 'reflect': true },
+            state: { type: Object },
             // This is an optimization, we lazily render the emoji picker, otherwise tests slow to a crawl.
-            'render_emojis': { type: Boolean },
+            render_emojis: { type: Boolean },
         }
     }
 
-    firstUpdated (changed) {
-        super.firstUpdated(changed);
-        this.listenTo(this.model, 'change', o => this.onModelChanged(o.changed));
-        this.initArrowNavigation();
-    }
-
     constructor () {
         super();
-        this.render_emojis = null;
-        this.chatview = null;
+        this.state = null;
         this.model = null;
         this.query = '';
+        this.render_emojis = null;
         this._search_results = [];
+
         this.debouncedFilter = debounce(
-            /** @param {HTMLInputElement} input */(input) => this.model.set({'query': input.value}),
+            /** @param {HTMLInputElement} input */(input) => this.state.set({'query': input.value}),
             250
         );
     }
 
+    initialize() {
+        super.initialize();
+        this.dropdown = this.closest('converse-emoji-dropdown');
+    }
+
+    firstUpdated (changed) {
+        super.firstUpdated(changed);
+        this.listenTo(this.state, 'change', o => this.onModelChanged(o.changed));
+        this.initArrowNavigation();
+    }
+
     get search_results () {
         return this._search_results;
     }
@@ -61,20 +67,17 @@ export default class EmojiPicker extends CustomElement {
     }
 
     render () {
-        return tplEmojiPicker({
-            'chatview': this.chatview,
-            'current_category': this.current_category,
-            'current_skintone': this.current_skintone,
-            'model': this.model,
-            'onCategoryPicked': ev => this.chooseCategory(ev),
-            'onSearchInputBlurred': ev => this.chatview.emitFocused(ev),
-            'onSearchInputFocus': ev => this.onSearchInputFocus(ev),
-            'onSearchInputKeyDown': ev => this.onSearchInputKeyDown(ev),
-            'onSkintonePicked': ev => this.chooseSkinTone(ev),
-            'query': this.query,
-            'search_results': this.search_results,
-            'render_emojis': this.render_emojis,
-            'sn2Emoji': /** @param {string} sn */(sn) => u.shortnamesToEmojis(this.getTonedShortname(sn))
+        return tplEmojiPicker(this, {
+            current_category: this.current_category,
+            current_skintone: this.current_skintone,
+            onCategoryPicked: ev => this.chooseCategory(ev),
+            onSearchInputFocus: () => this.disableArrowNavigation(),
+            onSearchInputKeyDown: ev => this.onSearchInputKeyDown(ev),
+            onSkintonePicked: ev => this.chooseSkinTone(ev),
+            query: this.query,
+            search_results: this.search_results,
+            render_emojis: this.render_emojis,
+            sn2Emoji: /** @param {string} sn */(sn) => u.shortnamesToEmojis(this.getTonedShortname(sn))
         });
     }
 
@@ -120,7 +123,8 @@ export default class EmojiPicker extends CustomElement {
     }
 
     registerEvents () {
-        this.onGlobalKeyDown = ev => this._onGlobalKeyDown(ev);
+        this.onGlobalKeyDown = ev => this.#onGlobalKeyDown(ev);
+        this.dropdown.addEventListener('hide.bs.dropdown', () => this.onDropdownHide());
         const body = document.querySelector('body');
         body.addEventListener('keydown', this.onGlobalKeyDown);
     }
@@ -140,22 +144,23 @@ export default class EmojiPicker extends CustomElement {
     /**
      * @param {KeyboardEvent} ev
      */
-    _onGlobalKeyDown (ev) {
-        if (!this.navigator) {
-            return;
-        }
+    #onGlobalKeyDown (ev) {
+        if (!this.navigator) return;
+
         if (ev.keyCode === KEYCODES.ENTER && u.isVisible(this)) {
             this.onEnterPressed(ev);
         } else if (ev.keyCode === KEYCODES.DOWN_ARROW &&
                 !this.navigator.enabled &&
                 u.isVisible(this)) {
             this.enableArrowNavigation(ev);
-        } else if (ev.keyCode === KEYCODES.ESCAPE) {
-            this.disableArrowNavigation();
-            setTimeout(() => this.chatview.querySelector('.chat-textarea').focus(), 50);
         }
     }
 
+    onDropdownHide() {
+        this.disableArrowNavigation();
+        this.dispatchEvent(new CustomEvent('emojipickerblur', {bubbles: true}));
+    }
+
     /**
      * @param {HTMLElement} el
      */
@@ -163,7 +168,7 @@ export default class EmojiPicker extends CustomElement {
         const old_category = this.current_category;
         const category = el?.getAttribute('data-category') || old_category;
         if (old_category !== category) {
-            this.model.save({'current_category': category});
+            this.state.save({'current_category': category});
         }
     }
 
@@ -171,11 +176,11 @@ export default class EmojiPicker extends CustomElement {
      * @param {string} value
      */
     insertIntoTextArea (value) {
-        const autocompleting = this.model.get('autocompleting');
-        const ac_position = this.model.get('ac_position');
-        this.model.set({'autocompleting': null, 'query': '', 'ac_position': null});
+        const autocompleting = this.state.get('autocompleting');
+        const ac_position = this.state.get('ac_position');
+        this.state.set({'autocompleting': null, 'query': '', 'ac_position': null});
         this.disableArrowNavigation();
-        const jid = this.chatview.model.get('jid');
+        const jid = this.model.get('jid');
         const options = {
             'bubbles': true,
             'detail': { value, autocompleting, ac_position, jid }
@@ -193,9 +198,9 @@ export default class EmojiPicker extends CustomElement {
         const el = target.nodeName === 'IMG' ? target.parentElement : target;
         const skintone = el.getAttribute("data-skintone").trim();
         if (this.current_skintone === skintone) {
-            this.model.save({'current_skintone': ''});
+            this.state.save({'current_skintone': ''});
         } else {
-            this.model.save({'current_skintone': skintone});
+            this.state.save({'current_skintone': skintone});
         }
     }
 
@@ -221,7 +226,7 @@ export default class EmojiPicker extends CustomElement {
             if (target.value) {
                 ev.preventDefault();
                 const match = converse.emojis.shortnames.find(sn => FILTER_CONTAINS(sn, target.value));
-                match && this.model.set({'query': match});
+                match && this.state.set({'query': match});
             } else if (!this.navigator.enabled) {
                 this.enableArrowNavigation(ev);
             }
@@ -253,14 +258,6 @@ export default class EmojiPicker extends CustomElement {
         }
     }
 
-    /**
-     * @param {FocusEvent} ev
-     */
-    onSearchInputFocus (ev) {
-        this.chatview.emitBlurred(ev);
-        this.disableArrowNavigation();
-    }
-
     /**
      * @param {string} shortname
      */

src/shared/chat/templates/emoji-picker.js

@@ -72,7 +72,11 @@ function skintone_emoji (o, skintone, skintone_emoji) {
 }
 
 
-export function tplEmojiPicker (o) {
+/**
+ * @param {import('../emoji-picker').default} el
+ * @param {Object} o
+ */
+export function tplEmojiPicker (el, o) {
     const i18n_search = __('Search');
     const skintones = {
         "tone1": ":raised_hand_tone1:",
@@ -92,8 +96,7 @@ export function tplEmojiPicker (o) {
         </div>
         ${ o.render_emojis ?
             html`<converse-emoji-picker-content
-                .chatview=${o.chatview}
-                .model=${o.model}
+                .model=${el.state}
                 .search_results="${o.search_results}"
                 current_skintone="${o.current_skintone}"
                 query="${o.query}"></converse-emoji-picker-content>` : ''}

src/shared/chat/toolbar.js

@@ -61,8 +61,9 @@ export class ChatToolbar extends CustomElement {
         const buttons = [];
 
         if (this.show_emoji_button) {
-            const chatview = _converse.state.chatboxviews.get(this.model.get('jid'));
-            buttons.push(html`<converse-emoji-dropdown .chatview=${chatview}></converse-emoji-dropdown>`);
+            buttons.push(
+                html`<converse-emoji-dropdown .model=${this.model}></converse-emoji-dropdown>`
+            );
         }
 
         if (this.show_call_button) {

src/types/plugins/chatview/bottom-panel.d.ts

@@ -1,12 +1,15 @@
 export default class ChatBottomPanel extends CustomElement {
+    static get properties(): {
+        model: {
+            type: ObjectConstructor;
+        };
+    };
+    model: any;
     connectedCallback(): Promise<void>;
     initialize(): Promise<void>;
-    model: any;
     render(): import("lit").TemplateResult<1> | "";
     sendButtonClicked(ev: any): void;
     viewUnreadMessages(ev: any): void;
-    emitFocused(ev: any): void;
-    emitBlurred(ev: any): void;
     onDragOver(ev: any): void;
     clearMessages(ev: any): void;
     autocompleteInPicker(input: any, value: any): Promise<void>;

src/types/plugins/chatview/message-form.d.ts

@@ -1,6 +1,11 @@
 export default class MessageForm extends CustomElement {
-    initialize(): Promise<void>;
+    static get properties(): {
+        model: {
+            type: ObjectConstructor;
+        };
+    };
     model: any;
+    initialize(): Promise<void>;
     handleEmojiSelection: ({ detail }: CustomEvent) => void;
     render(): import("lit").TemplateResult<1>;
     /**

src/types/shared/chat/baseview.d.ts

@@ -10,8 +10,6 @@ export default class BaseChatView extends CustomElement {
     close(ev: any): any;
     maybeFocus(): void;
     focus(): this;
-    emitBlurred(ev: any): void;
-    emitFocused(ev: any): void;
     getBottomPanel(): Element;
     getMessageForm(): Element;
     /**

src/types/shared/chat/emoji-dropdown.d.ts

@@ -1,20 +1,20 @@
 export default class EmojiDropdown extends DropdownBase {
     static get properties(): {
-        chatview: {
-            type: ObjectConstructor;
-        };
         icon_classes: {
             type: StringConstructor;
         };
         items: {
             type: ArrayConstructor;
         };
+        model: {
+            type: ObjectConstructor;
+        };
     };
     render_emojis: boolean;
-    chatview: any;
+    state: EmojiPicker;
+    model: any;
     initModel(): Promise<void>;
     init_promise: Promise<void>;
-    model: EmojiPicker;
     connectedCallback(): void;
     onShown(): Promise<void>;
 }

src/types/shared/chat/emoji-picker-content.d.ts

@@ -1,8 +1,5 @@
 export default class EmojiPickerContent extends CustomElement {
     static get properties(): {
-        chatview: {
-            type: ObjectConstructor;
-        };
         search_results: {
             type: ArrayConstructor;
         };
@@ -25,8 +22,14 @@ export default class EmojiPickerContent extends CustomElement {
     initIntersectionObserver(): void;
     observer: IntersectionObserver;
     setCategoryOnVisibilityChange(entries: any): void;
-    insertEmoji(ev: any): void;
-    shouldBeHidden(shortname: any): boolean;
+    /**
+     * @param {MouseEvent} ev
+     */
+    insertEmoji(ev: MouseEvent): void;
+    /**
+     * @param {string} shortname
+     */
+    shouldBeHidden(shortname: string): boolean;
 }
 export type EmojiPicker = any;
 import { CustomElement } from 'shared/components/element.js';

src/types/shared/chat/emoji-picker.d.ts

@@ -1,8 +1,5 @@
 export default class EmojiPicker extends CustomElement {
     static get properties(): {
-        chatview: {
-            type: ObjectConstructor;
-        };
         current_category: {
             type: StringConstructor;
             reflect: boolean;
@@ -18,17 +15,22 @@ export default class EmojiPicker extends CustomElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        state: {
+            type: ObjectConstructor;
+        };
         render_emojis: {
             type: BooleanConstructor;
         };
     };
-    firstUpdated(changed: any): void;
-    render_emojis: any;
-    chatview: any;
+    state: any;
     model: any;
     query: string;
+    render_emojis: any;
     _search_results: any[];
     debouncedFilter: import("lodash").DebouncedFunc<(input: HTMLInputElement) => any>;
+    initialize(): void;
+    dropdown: Element;
+    firstUpdated(changed: any): void;
     set search_results(value: any[]);
     get search_results(): any[];
     render(): import("lit").TemplateResult<1>;
@@ -42,10 +44,7 @@ export default class EmojiPicker extends CustomElement {
     registerEvents(): void;
     onGlobalKeyDown: (ev: any) => void;
     connectedCallback(): void;
-    /**
-     * @param {KeyboardEvent} ev
-     */
-    _onGlobalKeyDown(ev: KeyboardEvent): void;
+    onDropdownHide(): void;
     /**
      * @param {HTMLElement} el
      */
@@ -70,10 +69,6 @@ export default class EmojiPicker extends CustomElement {
      * @param {KeyboardEvent} ev
      */
     onEnterPressed(ev: KeyboardEvent): void;
-    /**
-     * @param {FocusEvent} ev
-     */
-    onSearchInputFocus(ev: FocusEvent): void;
     /**
      * @param {string} shortname
      */
@@ -85,6 +80,7 @@ export default class EmojiPicker extends CustomElement {
      * @param {KeyboardEvent} ev
      */
     enableArrowNavigation(ev: KeyboardEvent): void;
+    #private;
 }
 export type DOMNavigatorOptions = any;
 export type DOMNavigatorDirection = any;

src/types/shared/chat/templates/emoji-picker.d.ts

@@ -1,4 +1,8 @@
 export function tplSearchResults(o: any): import("lit").TemplateResult<1>;
 export function tplAllEmojis(o: any): import("lit").TemplateResult<1>;
-export function tplEmojiPicker(o: any): import("lit").TemplateResult<1>;
+/**
+ * @param {import('../emoji-picker').default} el
+ * @param {Object} o
+ */
+export function tplEmojiPicker(el: import("../emoji-picker").default, o: any): import("lit").TemplateResult<1>;
 //# sourceMappingURL=emoji-picker.d.ts.map