{\n onScroll?.(event);\n const mark = scrolledTo.current;\n if (mark === null || Math.abs(event.currentTarget.scrollTop - mark) > 1)\n context.releaseKeyboard();\n update();\n }}\n onPointerDown={(event) => {\n onPointerDown?.(event);\n if (!event.defaultPrevented) pointerDown.current = true;\n }}\n onFocus={(event) => {\n onFocus?.(event);\n context.setFocused(true);\n if (event.target !== event.currentTarget) return;\n const fromPointer = pointerDown.current || isTouch();\n pointerDown.current = false;\n /* Tabbing in starts at the first emoji in view; a highlight the\n keyboard already holds stays where it is. */\n if (!fromPointer && context.active?.source !== \"keyboard\") {\n context.move(\"visible\");\n }\n }}\n onBlur={(event) => {\n onBlur?.(event);\n pointerDown.current = false;\n context.setFocused(false);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (event.defaultPrevented || event.target !== event.currentTarget) return;\n /* Typing in the grid goes on in the search. */\n const search = context.searchRef.current;\n const typed = (event.key.length === 1 && event.key !== \" \") || event.key === \"Backspace\";\n if (\n search &&\n typed &&\n !event.nativeEvent.isComposing &&\n !event.altKey &&\n !event.ctrlKey &&\n !event.metaKey\n ) {\n search.focus();\n return;\n }\n context.navigate(event, false);\n }}\n {...props}\n >\n {ready && (\n \n {layout.sections.map((section, sectionIndex) => {\n const rows = rowsBySection.get(sectionIndex);\n if (!rows) return null;\n const headerId = `${context.listId}-${sectionIndex}`;\n return (\n
\n \n
\n \n
\n
\n {Array.from({ length: context.columnCount * 5 }, (_, index) => `cell-${index}`).map(\n (key) => (\n
\n \n \n ),\n )}\n
\n {context.announcement || status}\n
\n \n );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Preview */\n/* -------------------------------------------------------------------------- */\n\ntype EmojiPickerFooterProps = ComponentProps<\"div\">;\n\n/** The row under the grid: the preview and the skin tone by default. */\nfunction EmojiPickerFooter({ className, ...props }: EmojiPickerFooterProps) {\n return (\n \n );\n}\n\ntype EmojiPickerPreviewProps = ComponentProps<\"div\">;\n\n/**\n * The highlighted emoji, large, with its name and first shortcode; the value\n * while nothing is highlighted. Visual only: the grid already announces it.\n * It fills the space it is given, usually an `EmojiPickerFooter`.\n */\nfunction EmojiPickerPreview({ className, ...props }: EmojiPickerPreviewProps) {\n const context = useEmojiPickerContext(\"EmojiPickerPreview\");\n const { labels, functions } = context.i18n;\n const fallback =\n !context.multiple && context.values[0] ? context.findByValue(context.values[0]) : undefined;\n const emoji = context.activeEmoji ?? fallback ?? null;\n const value = emoji\n ? context.activeEmoji\n ? getEmojiValue(emoji, emoji.skins ? context.skinTone : 0)\n : (context.values[0] as string)\n : \"\";\n const shortcode = emoji?.shortcodes[0];\n\n return (\n \n {emoji ? (\n <>\n \n {/* One line, so the footer stays as dense as the grid. Without room\n the shortcode wraps onto a second, clipped line rather than\n truncating to a stray colon; a long name truncates. */}\n \n \n {functions.formatLabel(emoji.label)}\n \n {shortcode && (\n :{shortcode}:\n )}\n \n \n ) : (\n <>\n \n {TRIGGER_ICON}\n \n {labels.preview}\n \n )}\n \n );\n}\n\nexport type {\n EmojiPickerApi,\n EmojiPickerCategoriesProps,\n EmojiPickerCategory,\n EmojiPickerContentProps,\n EmojiPickerCustomCategory,\n EmojiPickerCustomEmoji,\n EmojiPickerData,\n EmojiPickerDataOptions,\n EmojiPickerDataState,\n EmojiPickerDataStatus,\n EmojiPickerEmoji,\n EmojiPickerFooterProps,\n EmojiPickerFunctions,\n EmojiPickerHeaderProps,\n EmojiPickerI18nConfig,\n EmojiPickerI18nOverrides,\n EmojiPickerLabels,\n EmojiPickerListProps,\n EmojiPickerPanelProps,\n EmojiPickerPreviewProps,\n EmojiPickerProps,\n EmojiPickerRecentEntry,\n EmojiPickerSearchProps,\n EmojiPickerSelection,\n EmojiPickerShortcodePreset,\n EmojiPickerSize,\n EmojiPickerSkinToneProps,\n EmojiPickerTriggerProps,\n EmojiPickerValueProps,\n UseEmojiPickerDataOptions,\n};\nexport {\n DEFAULT_EMOJI_PICKER_I18N,\n EMOJI_PICKER_CATEGORIES,\n EMOJI_PICKER_DATA_URL,\n EmojiPicker,\n EmojiPickerCategories,\n EmojiPickerContent,\n EmojiPickerFooter,\n EmojiPickerHeader,\n EmojiPickerList,\n EmojiPickerPanel,\n EmojiPickerPreview,\n EmojiPickerSearch,\n EmojiPickerSkinTone,\n EmojiPickerTrigger,\n EmojiPickerValue,\n findEmoji,\n getEmojiValue,\n isEmojiValue,\n loadEmojiPickerData,\n mergeEmojiPickerI18n,\n normalizeEmojibaseData,\n searchEmojis,\n useEmojiPicker,\n useEmojiPickerData,\n};\n",
"type": "registry:component",
"target": "components/fma-ds/emoji-picker.tsx"
}
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/emoji-picker, MIT); rebuilt on react-aria Popover, Dialog, Button, Tabs and Menu",
"tags": [
"forms",
"emoji",
"picker",
"popover",
"react-aria"
],
"contentHash": "401d10890e88"
},
"categories": [
"forms"
],
"type": "registry:ui"
}