/**
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* @module emoji/ui/emojigridview
*/
import { ButtonView, type FilteredView, View, type ViewCollection } from "@ckeditor/ckeditor5-ui";
import { FocusTracker, KeystrokeHandler, type Locale } from "@ckeditor/ckeditor5-utils";
import type { EmojiCategory, EmojiEntry } from "../emojirepository.js";
import type { EmojiSkinToneId } from "../emojiconfig.js";
import "../../theme/emojigrid.css";
/**
* A grid of emoji tiles. It allows browsing emojis and selecting them to be inserted into the content.
*/
export declare class EmojiGridView extends View<HTMLDivElement> implements FilteredView {
	/**
	* Defines the active category name.
	*
	* @observable
	*/
	categoryName: string;
	/**
	* Active skin tone.
	*
	* @observable
	*/
	skinTone: EmojiSkinToneId;
	/**
	* Set to `true` when the {@link #tiles} collection does not contain items to display.
	*
	* @observable
	*/
	isEmpty: boolean;
	/**
	* A collection of the child tile views. Each tile represents a particular emoji.
	*/
	readonly tiles: ViewCollection<ButtonView>;
	/**
	* Tracks information about the DOM focus in the grid.
	*/
	readonly focusTracker: FocusTracker;
	/**
	* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
	*/
	readonly keystrokes: KeystrokeHandler;
	/**
	* An array containing all emojis grouped by their categories.
	*/
	readonly emojiCategories: Array<EmojiCategory>;
	/**
	* A collection of all already created tile views. Each tile represents a particular emoji.
	* The cached tiles collection is used for efficiency purposes to avoid re-creating a particular
	* tile again when the grid view has changed.
	*/
	readonly cachedTiles: ViewCollection<ButtonView>;
	/**
	* A callback used to filter grid items by a specified query.
	*/
	private readonly _getEmojiByQuery;
	/**
	* @inheritDoc
	*/
	constructor(locale: Locale, { categoryName, emojiCategories, getEmojiByQuery, skinTone }: {
		categoryName: string;
		emojiCategories: Array<EmojiCategory>;
		getEmojiByQuery: EmojiSearchQueryCallback;
		skinTone: EmojiSkinToneId;
	});
	/**
	* @inheritDoc
	*/
	override render(): void;
	/**
	* @inheritDoc
	*/
	override destroy(): void;
	/**
	* Focuses the first focusable in {@link ~EmojiGridView#tiles} if available.
	*/
	focus(): void;
	/**
	* Filters the grid view by the given regular expression.
	*
	* It filters either by the pattern or an emoji category, but never both.
	*
	* @param pattern Expression to search or `null` when filter by category name.
	*/
	filter(pattern: RegExp | null): {
		resultsCount: number;
		totalItemsCount: number;
	};
	/**
	* Filters emojis to show based on the specified query phrase.
	*
	* @param query A query used to filter the grid.
	*/
	private _getItemsByQuery;
	/**
	* Returns emojis that belong to the specified category.
	*/
	private _getItemsByCategory;
	/**
	* Updates the grid by removing the existing items and insert the new ones.
	*
	* @param items An array of items to insert.
	*/
	private _updateGrid;
	/**
	* Creates a new tile for the grid. Created tile is added to the {@link #cachedTiles} collection for further usage, if needed.
	*
	* @param emoji The emoji itself.
	* @param name The name of the emoji (e.g. "Smiling Face with Smiling Eyes").
	*/
	private _createTile;
}
/**
* A callback used to filter grid items by a specified query.
*/
export type EmojiSearchQueryCallback = (query: string) => Array<EmojiEntry>;
/**
* Fired when any of {@link ~EmojiGridView#tiles grid tiles} is clicked.
*
* @eventName ~EmojiGridView#execute
* @param data Additional information about the event.
*/
export type EmojiGridViewExecuteEvent = {
	name: "execute";
	args: [data: EmojiGridViewEventData];
};
export type EmojiGridViewEventData = {
	/**
	* The name of the emoji (e.g. "Smiling Face with Smiling Eyes").
	*/
	name: string;
	/**
	* The emoji itself.
	*/
	emoji: string;
};