@k2b/ui 0.18.0 → 0.20.0

package/dist/types/inputs/emoji/EmojiPicker.d.ts

@@ -0,0 +1,42 @@
+import { type JSX } from "solid-js";
+import { type EmojiSkinTone } from "./emoji-index";
+export type EmojiPickerProps = {
+    /** Called with the chosen emoji, in the chosen skin tone where it has one. */
+    onPick: (emoji: string) => void;
+    /** Recently used emoji, most recent first, shown as the first group. The application stores them; see `rememberEmoji`. */
+    recent?: readonly string[];
+    /** The skin tone for emoji that have one. Defaults to `0`, the default yellow. */
+    skinTone?: EmojiSkinTone;
+    /** Shows the skin-tone choice. The application stores the tone and passes it back as `skinTone`. */
+    onSkinToneChange?: (tone: EmojiSkinTone) => void;
+    /** Escape in an empty search field asks to close the surface the picker sits in. */
+    onClose?: () => void;
+    /** Moves focus into the search field once the picker is shown. */
+    autofocus?: boolean;
+    /** The picker's accessible name. Defaults to "Emoji". */
+    label?: string;
+    class?: string;
+};
+/** Where `index` moves for an arrow key in rows of `COLUMNS`, where every section starts a new row. */
+export declare const nextEmojiIndex: (sizes: readonly number[], index: number, key: "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown") => number;
+/**
+ * A search field, the groups, and a grid of emoji. Search finds English and German names, keywords and GitHub
+ * shortcodes. The focus stays in the search field: arrow keys move through the grid, Enter picks.
+ */
+declare function EmojiPickerPanel(props: EmojiPickerProps): JSX.Element;
+export type EmojiPickerPopoverProps = Omit<EmojiPickerProps, "onClose" | "autofocus"> & {
+    /** The control the picker opens next to. The picker is open while this is set. */
+    anchor: HTMLElement | null | undefined;
+    /** Called after a pick, on Escape, on a click outside, and on another press of the anchor. */
+    onClose: () => void;
+};
+/**
+ * The picker next to a control, such as the composer's emoji button or a message's "Add reaction". It opens above the
+ * control where there is room and below it otherwise, closes after a pick, and returns the focus to where it was.
+ */
+declare function EmojiPickerPopover(props: EmojiPickerPopoverProps): JSX.Element;
+/** The emoji picker. `EmojiPicker.Popover` opens it next to a control. */
+export declare const EmojiPicker: typeof EmojiPickerPanel & {
+    Popover: typeof EmojiPickerPopover;
+};
+export {};