import { ListboxElement as FoundationListbox, ListboxOption } from '@ni/fast-foundation'; import type { AnchoredRegion } from '../../anchored-region'; import type { MentionListboxShowOptions } from './types'; declare global { interface HTMLElementTagNameMap { 'nimble-rich-text-mention-listbox': RichTextMentionListbox; } } /** * A rich text mention listbox which acts as a popup for "@mention" support in editor */ export declare class RichTextMentionListbox extends FoundationListbox { /** * @internal */ open?: boolean; /** * @internal */ region?: AnchoredRegion; /** * The space available in the viewport for the listbox when opened. * * @internal */ availableViewportHeight: number; /** * @internal */ filter: string; /** * The collection of currently filtered options. * The approach is defined based on the `Combobox.filteredOptions` implementation. * * @internal */ filteredOptions: ListboxOption[]; /** * Reference to the internal listbox element. * * @internal */ listbox: HTMLDivElement; private anchorElement?; private regionNotifier?; private readonly anchorElementIntersectionObserver; /** * @public */ close(): void; /** * The list of options. * * @public * @remarks * Overrides `Listbox.options`. */ get options(): ListboxOption[]; set options(value: ListboxOption[]); /** * Triggers when the mention plugin is activated upon pressing the `key` * * @public */ show(options: MentionListboxShowOptions): void; /** * Handle keydown actions for listbox navigation and selection. * * @param e - the keyboard event * @public */ keydownHandler(event: KeyboardEvent): boolean; /** * Filter available options by filter value. * The method is defined based on the `Combobox.filterOptions` and `Combobox.inputHandler` implementation. * * @internal */ filterOptions(): void; /** * Synchronize the form-associated proxy and update the value property of the element. * * @param prev - the previous collection of slotted option elements * @param next - the next collection of slotted option elements * * @internal */ slottedOptionsChanged(prev: Element[] | undefined, next: Element[]): void; /** * Triggers the `suggestionProps` command to notify the tiptap editor to select the option. * The method is defined based on the `Listbox.clickHandler` implementation. * * @internal */ clickHandler(e: MouseEvent): boolean; /** * Observes the anchor element using intersection observer. * Once the anchor element intersects, the anchor region will be closed. * * @internal */ anchorElementChanged(prev: HTMLElement | undefined, next: HTMLElement): void; /** * Observes the anchor region. * * @internal */ regionChanged(): void; /** * Handles the events of the anchored region. * Repositions the listbox scroll bar when the `initialLayoutComplete` event is triggered. * Other events will be passed to the base class. * * @internal */ handleChange(source: unknown, args: string): void; /** * Focus the control and scroll the first selected option into view. * * @internal * @remarks * Overrides: `Listbox.focusAndScrollOptionIntoView` */ protected focusAndScrollOptionIntoView(): void; private setOpen; } export declare const richTextMentionListboxTag = "nimble-rich-text-mention-listbox";