UNPKG

@welcome-ui/emoji-picker

Version:

Customizable design system with react • styled-components • styled-system and ariakit.

2,337 lines (2,326 loc) 178 kB
"use client" // src/index.tsx import React5, { Children, cloneElement, useCallback as useCallback2, useMemo as useMemo2 } from "react"; import { Tab as Tab3, useTab } from "@welcome-ui/tabs"; import { Popover as Popover3, usePopover } from "@welcome-ui/popover"; import { forwardRef } from "@welcome-ui/system"; // src/styles.ts import styled, { system, th } from "@xstyled/styled-components"; import { Tab } from "@welcome-ui/tabs"; import * as WUIPopover from "@welcome-ui/popover"; import { Box } from "@welcome-ui/box"; var Popover2 = styled(WUIPopover.Popover)` background-color: ${th("defaultCards.backgroundColor")}; border-width: sm; border-style: solid; border-color: neutral-30; color: neutral-90; ${system}; /** we change the arrow item color from popover component */ > div > div > svg { color: ${th("defaultCards.backgroundColor")}; #stroke { color: ${th("defaultCards.borderColor")}; } } `; var TabList = styled(Tab.List)` padding: 0 md; /* Remove margin from Tab.List */ margin-bottom: -xl; ${system}; `; var EmojiButton = styled.buttonBox.attrs({ as: "button" })` padding: 0; border: 0; background: none; border-radius: md; transition: fast; /* * Taken from slack's emoji picker * The delay prevents flickering when hovering */ transition-property: background; transition-timing-function: ease-out; transition-delay: 0.05s; cursor: pointer; &[data-active='true'] { outline: none; &:nth-child(3n) { background-color: secondary-orange; } &:nth-child(3n + 1) { background-color: secondary-blue; } &:nth-child(3n + 2) { background-color: secondary-green; } } `; var Tooltip = styled(Box)` ${th("tooltips")}; position: absolute; pointer-events: none; &:empty { display: none; } ${system}; `; // src/List.tsx import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { InputText } from "@welcome-ui/input-text"; import { FixedSizeList } from "react-window"; import { Text } from "@welcome-ui/text"; import { Box as Box2 } from "@welcome-ui/box"; import { Emoji, getEmojiName } from "@welcome-ui/emoji"; import { SearchIcon } from "@welcome-ui/icons"; import { useIsomorphicLayoutEffect } from "@welcome-ui/utils"; import debounce from "lodash.debounce"; import escapeRegExp from "lodash.escaperegexp"; import Popper from "popper.js"; // src/utils.ts import groupBy from "lodash.groupby"; var NB_EMOJIS_PER_ROW = 8; var WIDTH = 300; var ROW_HEIGHT = 32; var HEIGHT = NB_EMOJIS_PER_ROW * ROW_HEIGHT; var formatEmojis = (emojis) => { let rowIndex = 0; const emojisByCategory = Object.entries(groupBy(emojis, "category")); return emojisByCategory.reduce((acc, [category, emojis2]) => { const splittedEmojis = []; for (let i = 0; i < emojis2.length; i += NB_EMOJIS_PER_ROW) { let colIndex = 0; const row = emojis2.slice(i, i + NB_EMOJIS_PER_ROW).map((emoji) => ({ ...emoji, rowIndex, colIndex: colIndex++ })); splittedEmojis.push(row); rowIndex++; } if (category && category !== "undefined") { return [...acc, [category], ...splittedEmojis]; } return [...acc, ...splittedEmojis]; }, []); }; var getEmojiAlias = (emoji) => { if (!emoji) return ""; return `:${emoji.alias}:`; }; // src/List.tsx var List = ({ emojis, emptyList, inputSearchPlaceholder, isOpen, onChange, value }) => { const [currentColIndex, setCurrentColIndex] = useState(-1); const [currentRowIndex, setCurrentRowIndex] = useState(-1); const inputRef = useRef(null); useEffect(() => { if (isOpen) { inputRef?.current?.focus(); } }, [isOpen]); const [query, setQuery] = useState(); const handleChangeQuery = useCallback((e) => { const query2 = e.target.value.trim(); setQuery(query2); const currentIndex = query2 ? 0 : -1; setCurrentColIndex(currentIndex); setCurrentRowIndex(currentIndex); }, []); const debouncedHandleChangeQuery = useMemo( () => debounce(handleChangeQuery, 200), [handleChangeQuery] ); const rows = useMemo(() => { const queryRegex = new RegExp(escapeRegExp(query), "i"); const filteredEmojis2 = emojis.filter((emoji) => { return Object.values(emoji).some((value2) => queryRegex.test(value2)); }); if (filteredEmojis2.length === 0) return []; return formatEmojis(filteredEmojis2); }, [emojis, query]); const hasRows = rows.length > 0; const filteredEmojis = useMemo(() => { return rows?.filter((row) => typeof row[0] !== "string") || []; }, [rows]); const handleKeyDown = (e) => { if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter"].includes(e.key)) return; e.preventDefault(); if (currentColIndex === -1 && currentRowIndex === -1 && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) { setCurrentColIndex(0); setCurrentRowIndex(0); return; } if (e.key === "Enter") { e.preventDefault(); if (!filteredEmojis) return; const emoji = filteredEmojis.flat().find((emoji2) => emoji2.rowIndex === currentRowIndex && emoji2.colIndex === currentColIndex); onChange(getEmojiAlias(emoji)); return; } let newColIndex = currentColIndex; let newRowIndex = currentRowIndex; switch (e.key) { case "ArrowLeft": case "ArrowRight": { const diff = e.key === "ArrowLeft" ? -1 : 1; newColIndex = currentColIndex + diff; let currentRow = filteredEmojis[newRowIndex]; if (newColIndex === -1) { if (currentRowIndex === 0) { newColIndex = 0; break; } newRowIndex = Math.max(newRowIndex - 1, 0); currentRow = filteredEmojis[newRowIndex]; newColIndex = currentRow.length - 1; } else if (newColIndex >= currentRow.length) { if (!filteredEmojis[newRowIndex + 1]) { newColIndex = currentColIndex; break; } newColIndex = 0; newRowIndex = newRowIndex + 1; } break; } case "ArrowUp": case "ArrowDown": { const diff = e.key === "ArrowUp" ? -1 : 1; newRowIndex = Math.max(currentRowIndex + diff, 0); const newRow = filteredEmojis[newRowIndex]; if (!newRow) { newRowIndex--; newColIndex = filteredEmojis[newRowIndex].length - 1; } else if (!newRow[currentColIndex]) { newColIndex = newRow.length - 1; } break; } } setCurrentColIndex(newColIndex); setCurrentRowIndex(newRowIndex); }; const handleMouseMove = (emoji) => { setCurrentColIndex(emoji.colIndex); setCurrentRowIndex(emoji.rowIndex); }; const wrapperRef = useRef(null); const tooltipRef = useRef(null); const [tooltipEmoji, setTooltipEmoji] = useState(); const hasTooltip = !!tooltipEmoji; const tooltipContent = getEmojiAlias(tooltipEmoji); useEffect(() => { const currentEl = wrapperRef?.current?.querySelector("[data-active]"); if (!currentEl) { setTooltipEmoji(null); return; } const emoji = filteredEmojis.flat().find((emoji2) => emoji2.rowIndex === currentRowIndex && emoji2.colIndex === currentColIndex); setTooltipEmoji(emoji); const popper = new Popper(currentEl, tooltipRef?.current, { placement: "top", onUpdate: ({ instance }) => { const isReferenceInDom = !!instance.reference.parentElement.parentElement; if (!isReferenceInDom) { setTooltipEmoji(null); } } }); return () => popper.destroy(); }, [currentColIndex, currentRowIndex, filteredEmojis]); const isJustOpened = useRef(true); const listRef = useRef(); useIsomorphicLayoutEffect(() => { if (!isOpen || !listRef.current) return; let rowIndex = currentRowIndex; if (isJustOpened.current) { const name = getEmojiName(value); const emoji = filteredEmojis.flat().find((emoji2) => emoji2.alias === name); if (emoji) { setCurrentColIndex(emoji.colIndex); setCurrentRowIndex(emoji.rowIndex); rowIndex = emoji.rowIndex; } } const index = rows.findIndex((emojis2) => emojis2.some((emoji) => emoji.rowIndex === rowIndex)); const align = isJustOpened.current ? "start" : "auto"; listRef.current.scrollToItem(index, align); isJustOpened.current = false; }, [currentColIndex, currentRowIndex, isOpen]); const initialScrollOffset = useMemo(() => { if (!isOpen) return 0; const index = rows.findIndex((emojis2) => emojis2.some((emoji) => emoji.rowIndex === currentRowIndex)); return index * ROW_HEIGHT; }, [currentRowIndex, isOpen, rows]); return /* @__PURE__ */ React.createElement(Box2, { ref: wrapperRef }, /* @__PURE__ */ React.createElement(Box2, { mx: "xl", pb: "sm", pt: "xl" }, /* @__PURE__ */ React.createElement( InputText, { autoFocus: true, "data-testid": "emoji-search-input", icon: /* @__PURE__ */ React.createElement(SearchIcon, null), onChange: debouncedHandleChangeQuery, onKeyDown: handleKeyDown, placeholder: inputSearchPlaceholder, ref: inputRef } )), hasRows && /* @__PURE__ */ React.createElement( FixedSizeList, { height: HEIGHT, initialScrollOffset, itemCount: rows.length, itemData: { rows, currentColIndex, currentRowIndex, isOpen, onClick: onChange, onMouseMove: handleMouseMove }, itemSize: ROW_HEIGHT, ref: listRef, width: WIDTH }, EmojiRow ), !hasRows && /* @__PURE__ */ React.createElement(Box2, { alignItems: "center", display: "flex", h: HEIGHT, justifyContent: "center", w: WIDTH }, emptyList), /* @__PURE__ */ React.createElement(Tooltip, { ref: tooltipRef }, hasTooltip && tooltipContent)); }; var EmojiRow = ({ data, index, style }) => { const row = data.rows[index]; if (typeof row[0] === "string") { return /* @__PURE__ */ React.createElement( Text, { alignItems: "center", as: "span", display: "flex", px: "xl", style, textTransform: "uppercase", variant: "subtitle-sm" }, row[0] ); } return /* @__PURE__ */ React.createElement(Box2, { display: "flex", px: "lg", style }, row.map((emoji) => { const alias = getEmojiAlias(emoji); const isActive = data.isOpen && emoji.rowIndex === data.currentRowIndex && emoji.colIndex === data.currentColIndex ? true : null; const emojiImage = emoji.url || alias; return /* @__PURE__ */ React.createElement( EmojiButton, { "data-active": isActive, "data-testid": `emoji-${alias}`, key: alias, onClick: () => data.onClick(getEmojiAlias(emoji)), onMouseMove: () => data.onMouseMove(emoji), tabIndex: -1, type: "button", w: `${100 / NB_EMOJIS_PER_ROW}%` }, /* @__PURE__ */ React.createElement(Emoji, { emoji: emojiImage }) ); })); }; // src/Panel.tsx import React2 from "react"; import { Box as Box3 } from "@welcome-ui/box"; var Panel = ({ children }) => { return /* @__PURE__ */ React2.createElement(Box3, { display: "grid", minHeight: HEIGHT, minWidth: WIDTH }, children); }; // src/BasicList.tsx import React3 from "react"; // src/basicEmojis.json var basicEmojis_default = [ { name: "GRINNING FACE", alias: "grinning", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH OPEN MOUTH", alias: "smiley", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH OPEN MOUTH AND SMILING EYES", alias: "smile", category: "Smileys & Emotion" }, { name: "GRINNING FACE WITH SMILING EYES", alias: "grin", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH OPEN MOUTH AND TIGHTLY-CLOSED EYES", alias: "laughing", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH OPEN MOUTH AND COLD SWEAT", alias: "sweat_smile", category: "Smileys & Emotion" }, { name: "ROLLING ON THE FLOOR LAUGHING", alias: "rolling_on_the_floor_laughing", category: "Smileys & Emotion" }, { name: "FACE WITH TEARS OF JOY", alias: "joy", category: "Smileys & Emotion" }, { name: "SLIGHTLY SMILING FACE", alias: "slightly_smiling_face", category: "Smileys & Emotion" }, { name: "UPSIDE-DOWN FACE", alias: "upside_down_face", category: "Smileys & Emotion" }, { name: "WINKING FACE", alias: "wink", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH SMILING EYES", alias: "blush", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH HALO", alias: "innocent", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH SMILING EYES AND THREE HEARTS", alias: "smiling_face_with_3_hearts", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH HEART-SHAPED EYES", alias: "heart_eyes", category: "Smileys & Emotion" }, { name: "GRINNING FACE WITH STAR EYES", alias: "star-struck", category: "Smileys & Emotion" }, { name: "FACE THROWING A KISS", alias: "kissing_heart", category: "Smileys & Emotion" }, { name: "KISSING FACE", alias: "kissing", category: "Smileys & Emotion" }, { name: "WHITE SMILING FACE", alias: "relaxed", category: "Smileys & Emotion" }, { name: "KISSING FACE WITH CLOSED EYES", alias: "kissing_closed_eyes", category: "Smileys & Emotion" }, { name: "KISSING FACE WITH SMILING EYES", alias: "kissing_smiling_eyes", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH TEAR", alias: "smiling_face_with_tear", category: "Smileys & Emotion" }, { name: "FACE SAVOURING DELICIOUS FOOD", alias: "yum", category: "Smileys & Emotion" }, { name: "FACE WITH STUCK-OUT TONGUE", alias: "stuck_out_tongue", category: "Smileys & Emotion" }, { name: "FACE WITH STUCK-OUT TONGUE AND WINKING EYE", alias: "stuck_out_tongue_winking_eye", category: "Smileys & Emotion" }, { name: "GRINNING FACE WITH ONE LARGE AND ONE SMALL EYE", alias: "zany_face", category: "Smileys & Emotion" }, { name: "FACE WITH STUCK-OUT TONGUE AND TIGHTLY-CLOSED EYES", alias: "stuck_out_tongue_closed_eyes", category: "Smileys & Emotion" }, { name: "MONEY-MOUTH FACE", alias: "money_mouth_face", category: "Smileys & Emotion" }, { name: "HUGGING FACE", alias: "hugging_face", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH SMILING EYES AND HAND COVERING MOUTH", alias: "face_with_hand_over_mouth", category: "Smileys & Emotion" }, { name: "FACE WITH FINGER COVERING CLOSED LIPS", alias: "shushing_face", category: "Smileys & Emotion" }, { name: "THINKING FACE", alias: "thinking_face", category: "Smileys & Emotion" }, { name: "ZIPPER-MOUTH FACE", alias: "zipper_mouth_face", category: "Smileys & Emotion" }, { name: "FACE WITH ONE EYEBROW RAISED", alias: "face_with_raised_eyebrow", category: "Smileys & Emotion" }, { name: "NEUTRAL FACE", alias: "neutral_face", category: "Smileys & Emotion" }, { name: "EXPRESSIONLESS FACE", alias: "expressionless", category: "Smileys & Emotion" }, { name: "FACE WITHOUT MOUTH", alias: "no_mouth", category: "Smileys & Emotion" }, { name: "SMIRKING FACE", alias: "smirk", category: "Smileys & Emotion" }, { name: "UNAMUSED FACE", alias: "unamused", category: "Smileys & Emotion" }, { name: "FACE WITH ROLLING EYES", alias: "face_with_rolling_eyes", category: "Smileys & Emotion" }, { name: "GRIMACING FACE", alias: "grimacing", category: "Smileys & Emotion" }, { name: "LYING FACE", alias: "lying_face", category: "Smileys & Emotion" }, { name: "RELIEVED FACE", alias: "relieved", category: "Smileys & Emotion" }, { name: "PENSIVE FACE", alias: "pensive", category: "Smileys & Emotion" }, { name: "SLEEPY FACE", alias: "sleepy", category: "Smileys & Emotion" }, { name: "DROOLING FACE", alias: "drooling_face", category: "Smileys & Emotion" }, { name: "SLEEPING FACE", alias: "sleeping", category: "Smileys & Emotion" }, { name: "FACE WITH MEDICAL MASK", alias: "mask", category: "Smileys & Emotion" }, { name: "FACE WITH THERMOMETER", alias: "face_with_thermometer", category: "Smileys & Emotion" }, { name: "FACE WITH HEAD-BANDAGE", alias: "face_with_head_bandage", category: "Smileys & Emotion" }, { name: "NAUSEATED FACE", alias: "nauseated_face", category: "Smileys & Emotion" }, { name: "FACE WITH OPEN MOUTH VOMITING", alias: "face_vomiting", category: "Smileys & Emotion" }, { name: "SNEEZING FACE", alias: "sneezing_face", category: "Smileys & Emotion" }, { name: "OVERHEATED FACE", alias: "hot_face", category: "Smileys & Emotion" }, { name: "FREEZING FACE", alias: "cold_face", category: "Smileys & Emotion" }, { name: "FACE WITH UNEVEN EYES AND WAVY MOUTH", alias: "woozy_face", category: "Smileys & Emotion" }, { name: "DIZZY FACE", alias: "dizzy_face", category: "Smileys & Emotion" }, { name: "SHOCKED FACE WITH EXPLODING HEAD", alias: "exploding_head", category: "Smileys & Emotion" }, { name: "FACE WITH COWBOY HAT", alias: "face_with_cowboy_hat", category: "Smileys & Emotion" }, { name: "FACE WITH PARTY HORN AND PARTY HAT", alias: "partying_face", category: "Smileys & Emotion" }, { name: "DISGUISED FACE", alias: "disguised_face", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH SUNGLASSES", alias: "sunglasses", category: "Smileys & Emotion" }, { name: "NERD FACE", alias: "nerd_face", category: "Smileys & Emotion" }, { name: "FACE WITH MONOCLE", alias: "face_with_monocle", category: "Smileys & Emotion" }, { name: "CONFUSED FACE", alias: "confused", category: "Smileys & Emotion" }, { name: "WORRIED FACE", alias: "worried", category: "Smileys & Emotion" }, { name: "SLIGHTLY FROWNING FACE", alias: "slightly_frowning_face", category: "Smileys & Emotion" }, { name: "FROWNING FACE", alias: "white_frowning_face", category: "Smileys & Emotion" }, { name: "FACE WITH OPEN MOUTH", alias: "open_mouth", category: "Smileys & Emotion" }, { name: "HUSHED FACE", alias: "hushed", category: "Smileys & Emotion" }, { name: "ASTONISHED FACE", alias: "astonished", category: "Smileys & Emotion" }, { name: "FLUSHED FACE", alias: "flushed", category: "Smileys & Emotion" }, { name: "FACE WITH PLEADING EYES", alias: "pleading_face", category: "Smileys & Emotion" }, { name: "FROWNING FACE WITH OPEN MOUTH", alias: "frowning", category: "Smileys & Emotion" }, { name: "ANGUISHED FACE", alias: "anguished", category: "Smileys & Emotion" }, { name: "FEARFUL FACE", alias: "fearful", category: "Smileys & Emotion" }, { name: "FACE WITH OPEN MOUTH AND COLD SWEAT", alias: "cold_sweat", category: "Smileys & Emotion" }, { name: "DISAPPOINTED BUT RELIEVED FACE", alias: "disappointed_relieved", category: "Smileys & Emotion" }, { name: "CRYING FACE", alias: "cry", category: "Smileys & Emotion" }, { name: "LOUDLY CRYING FACE", alias: "sob", category: "Smileys & Emotion" }, { name: "FACE SCREAMING IN FEAR", alias: "scream", category: "Smileys & Emotion" }, { name: "CONFOUNDED FACE", alias: "confounded", category: "Smileys & Emotion" }, { name: "PERSEVERING FACE", alias: "persevere", category: "Smileys & Emotion" }, { name: "DISAPPOINTED FACE", alias: "disappointed", category: "Smileys & Emotion" }, { name: "FACE WITH COLD SWEAT", alias: "sweat", category: "Smileys & Emotion" }, { name: "WEARY FACE", alias: "weary", category: "Smileys & Emotion" }, { name: "TIRED FACE", alias: "tired_face", category: "Smileys & Emotion" }, { name: "YAWNING FACE", alias: "yawning_face", category: "Smileys & Emotion" }, { name: "FACE WITH LOOK OF TRIUMPH", alias: "triumph", category: "Smileys & Emotion" }, { name: "POUTING FACE", alias: "rage", category: "Smileys & Emotion" }, { name: "ANGRY FACE", alias: "angry", category: "Smileys & Emotion" }, { name: "SERIOUS FACE WITH SYMBOLS COVERING MOUTH", alias: "face_with_symbols_on_mouth", category: "Smileys & Emotion" }, { name: "SMILING FACE WITH HORNS", alias: "smiling_imp", category: "Smileys & Emotion" }, { name: "IMP", alias: "imp", category: "Smileys & Emotion" }, { name: "SKULL", alias: "skull", category: "Smileys & Emotion" }, { name: "SKULL AND CROSSBONES", alias: "skull_and_crossbones", category: "Smileys & Emotion" }, { name: "PILE OF POO", alias: "hankey", category: "Smileys & Emotion" }, { name: "CLOWN FACE", alias: "clown_face", category: "Smileys & Emotion" }, { name: "JAPANESE OGRE", alias: "japanese_ogre", category: "Smileys & Emotion" }, { name: "JAPANESE GOBLIN", alias: "japanese_goblin", category: "Smileys & Emotion" }, { name: "GHOST", alias: "ghost", category: "Smileys & Emotion" }, { name: "EXTRATERRESTRIAL ALIEN", alias: "alien", category: "Smileys & Emotion" }, { name: "ALIEN MONSTER", alias: "space_invader", category: "Smileys & Emotion" }, { name: "ROBOT FACE", alias: "robot_face", category: "Smileys & Emotion" }, { name: "SMILING CAT FACE WITH OPEN MOUTH", alias: "smiley_cat", category: "Smileys & Emotion" }, { name: "GRINNING CAT FACE WITH SMILING EYES", alias: "smile_cat", category: "Smileys & Emotion" }, { name: "CAT FACE WITH TEARS OF JOY", alias: "joy_cat", category: "Smileys & Emotion" }, { name: "SMILING CAT FACE WITH HEART-SHAPED EYES", alias: "heart_eyes_cat", category: "Smileys & Emotion" }, { name: "CAT FACE WITH WRY SMILE", alias: "smirk_cat", category: "Smileys & Emotion" }, { name: "KISSING CAT FACE WITH CLOSED EYES", alias: "kissing_cat", category: "Smileys & Emotion" }, { name: "WEARY CAT FACE", alias: "scream_cat", category: "Smileys & Emotion" }, { name: "CRYING CAT FACE", alias: "crying_cat_face", category: "Smileys & Emotion" }, { name: "POUTING CAT FACE", alias: "pouting_cat", category: "Smileys & Emotion" }, { name: "SEE-NO-EVIL MONKEY", alias: "see_no_evil", category: "Smileys & Emotion" }, { name: "HEAR-NO-EVIL MONKEY", alias: "hear_no_evil", category: "Smileys & Emotion" }, { name: "SPEAK-NO-EVIL MONKEY", alias: "speak_no_evil", category: "Smileys & Emotion" }, { name: "KISS MARK", alias: "kiss", category: "Smileys & Emotion" }, { name: "LOVE LETTER", alias: "love_letter", category: "Smileys & Emotion" }, { name: "HEART WITH ARROW", alias: "cupid", category: "Smileys & Emotion" }, { name: "HEART WITH RIBBON", alias: "gift_heart", category: "Smileys & Emotion" }, { name: "SPARKLING HEART", alias: "sparkling_heart", category: "Smileys & Emotion" }, { name: "GROWING HEART", alias: "heartpulse", category: "Smileys & Emotion" }, { name: "BEATING HEART", alias: "heartbeat", category: "Smileys & Emotion" }, { name: "REVOLVING HEARTS", alias: "revolving_hearts", category: "Smileys & Emotion" }, { name: "TWO HEARTS", alias: "two_hearts", category: "Smileys & Emotion" }, { name: "HEART DECORATION", alias: "heart_decoration", category: "Smileys & Emotion" }, { name: "HEART EXCLAMATION", alias: "heavy_heart_exclamation_mark_ornament", category: "Smileys & Emotion" }, { name: "BROKEN HEART", alias: "broken_heart", category: "Smileys & Emotion" }, { name: "HEAVY BLACK HEART", alias: "heart", category: "Smileys & Emotion" }, { name: "ORANGE HEART", alias: "orange_heart", category: "Smileys & Emotion" }, { name: "YELLOW HEART", alias: "yellow_heart", category: "Smileys & Emotion" }, { name: "GREEN HEART", alias: "green_heart", category: "Smileys & Emotion" }, { name: "BLUE HEART", alias: "blue_heart", category: "Smileys & Emotion" }, { name: "PURPLE HEART", alias: "purple_heart", category: "Smileys & Emotion" }, { name: "BROWN HEART", alias: "brown_heart", category: "Smileys & Emotion" }, { name: "BLACK HEART", alias: "black_heart", category: "Smileys & Emotion" }, { name: "WHITE HEART", alias: "white_heart", category: "Smileys & Emotion" }, { name: "HUNDRED POINTS SYMBOL", alias: "100", category: "Smileys & Emotion" }, { name: "ANGER SYMBOL", alias: "anger", category: "Smileys & Emotion" }, { name: "COLLISION SYMBOL", alias: "boom", category: "Smileys & Emotion" }, { name: "DIZZY SYMBOL", alias: "dizzy", category: "Smileys & Emotion" }, { name: "SPLASHING SWEAT SYMBOL", alias: "sweat_drops", category: "Smileys & Emotion" }, { name: "DASH SYMBOL", alias: "dash", category: "Smileys & Emotion" }, { name: "HOLE", alias: "hole", category: "Smileys & Emotion" }, { name: "BOMB", alias: "bomb", category: "Smileys & Emotion" }, { name: "SPEECH BALLOON", alias: "speech_balloon", category: "Smileys & Emotion" }, { name: "EYE IN SPEECH BUBBLE", alias: "eye-in-speech-bubble", category: "Smileys & Emotion" }, { name: "LEFT SPEECH BUBBLE", alias: "left_speech_bubble", category: "Smileys & Emotion" }, { name: "RIGHT ANGER BUBBLE", alias: "right_anger_bubble", category: "Smileys & Emotion" }, { name: "THOUGHT BALLOON", alias: "thought_balloon", category: "Smileys & Emotion" }, { name: "SLEEPING SYMBOL", alias: "zzz", category: "Smileys & Emotion" }, { name: "WAVING HAND SIGN", alias: "wave", category: "People & Body" }, { name: "RAISED BACK OF HAND", alias: "raised_back_of_hand", category: "People & Body" }, { name: "HAND WITH FINGERS SPLAYED", alias: "raised_hand_with_fingers_splayed", category: "People & Body" }, { name: "RAISED HAND", alias: "hand", category: "People & Body" }, { name: "RAISED HAND WITH PART BETWEEN MIDDLE AND RING FINGERS", alias: "spock-hand", category: "People & Body" }, { name: "OK HAND SIGN", alias: "ok_hand", category: "People & Body" }, { name: "PINCHED FINGERS", alias: "pinched_fingers", category: "People & Body" }, { name: "PINCHING HAND", alias: "pinching_hand", category: "People & Body" }, { name: "VICTORY HAND", alias: "v", category: "People & Body" }, { name: "HAND WITH INDEX AND MIDDLE FINGERS CROSSED", alias: "crossed_fingers", category: "People & Body" }, { name: "I LOVE YOU HAND SIGN", alias: "i_love_you_hand_sign", category: "People & Body" }, { name: "SIGN OF THE HORNS", alias: "the_horns", category: "People & Body" }, { name: "CALL ME HAND", alias: "call_me_hand", category: "People & Body" }, { name: "WHITE LEFT POINTING BACKHAND INDEX", alias: "point_left", category: "People & Body" }, { name: "WHITE RIGHT POINTING BACKHAND INDEX", alias: "point_right", category: "People & Body" }, { name: "WHITE UP POINTING BACKHAND INDEX", alias: "point_up_2", category: "People & Body" }, { name: "REVERSED HAND WITH MIDDLE FINGER EXTENDED", alias: "middle_finger", category: "People & Body" }, { name: "WHITE DOWN POINTING BACKHAND INDEX", alias: "point_down", category: "People & Body" }, { name: "WHITE UP POINTING INDEX", alias: "point_up", category: "People & Body" }, { name: "THUMBS UP SIGN", alias: "+1", category: "People & Body" }, { name: "THUMBS DOWN SIGN", alias: "-1", category: "People & Body" }, { name: "RAISED FIST", alias: "fist", category: "People & Body" }, { name: "FISTED HAND SIGN", alias: "facepunch", category: "People & Body" }, { name: "LEFT-FACING FIST", alias: "left-facing_fist", category: "People & Body" }, { name: "RIGHT-FACING FIST", alias: "right-facing_fist", category: "People & Body" }, { name: "CLAPPING HANDS SIGN", alias: "clap", category: "People & Body" }, { name: "PERSON RAISING BOTH HANDS IN CELEBRATION", alias: "raised_hands", category: "People & Body" }, { name: "OPEN HANDS SIGN", alias: "open_hands", category: "People & Body" }, { name: "PALMS UP TOGETHER", alias: "palms_up_together", category: "People & Body" }, { name: "HANDSHAKE", alias: "handshake", category: "People & Body" }, { name: "PERSON WITH FOLDED HANDS", alias: "pray", category: "People & Body" }, { name: "WRITING HAND", alias: "writing_hand", category: "People & Body" }, { name: "NAIL POLISH", alias: "nail_care", category: "People & Body" }, { name: "SELFIE", alias: "selfie", category: "People & Body" }, { name: "FLEXED BICEPS", alias: "muscle", category: "People & Body" }, { name: "MECHANICAL ARM", alias: "mechanical_arm", category: "People & Body" }, { name: "MECHANICAL LEG", alias: "mechanical_leg", category: "People & Body" }, { name: "LEG", alias: "leg", category: "People & Body" }, { name: "FOOT", alias: "foot", category: "People & Body" }, { name: "EAR", alias: "ear", category: "People & Body" }, { name: "EAR WITH HEARING AID", alias: "ear_with_hearing_aid", category: "People & Body" }, { name: "NOSE", alias: "nose", category: "People & Body" }, { name: "BRAIN", alias: "brain", category: "People & Body" }, { name: "ANATOMICAL HEART", alias: "anatomical_heart", category: "People & Body" }, { name: "LUNGS", alias: "lungs", category: "People & Body" }, { name: "TOOTH", alias: "tooth", category: "People & Body" }, { name: "BONE", alias: "bone", category: "People & Body" }, { name: "EYES", alias: "eyes", category: "People & Body" }, { name: "EYE", alias: "eye", category: "People & Body" }, { name: "TONGUE", alias: "tongue", category: "People & Body" }, { name: "MOUTH", alias: "lips", category: "People & Body" }, { name: "BABY", alias: "baby", category: "People & Body" }, { name: "CHILD", alias: "child", category: "People & Body" }, { name: "BOY", alias: "boy", category: "People & Body" }, { name: "GIRL", alias: "girl", category: "People & Body" }, { name: "ADULT", alias: "adult", category: "People & Body" }, { name: "PERSON WITH BLOND HAIR", alias: "person_with_blond_hair", category: "People & Body" }, { name: "MAN", alias: "man", category: "People & Body" }, { name: "BEARDED PERSON", alias: "bearded_person", category: "People & Body" }, { name: "MAN: RED HAIR", alias: "red_haired_man", category: "People & Body" }, { name: "MAN: CURLY HAIR", alias: "curly_haired_man", category: "People & Body" }, { name: "MAN: WHITE HAIR", alias: "white_haired_man", category: "People & Body" }, { name: "MAN: BALD", alias: "bald_man", category: "People & Body" }, { name: "WOMAN", alias: "woman", category: "People & Body" }, { name: "WOMAN: RED HAIR", alias: "red_haired_woman", category: "People & Body" }, { name: "PERSON: RED HAIR", alias: "red_haired_person", category: "People & Body" }, { name: "WOMAN: CURLY HAIR", alias: "curly_haired_woman", category: "People & Body" }, { name: "PERSON: CURLY HAIR", alias: "curly_haired_person", category: "People & Body" }, { name: "WOMAN: WHITE HAIR", alias: "white_haired_woman", category: "People & Body" }, { name: "PERSON: WHITE HAIR", alias: "white_haired_person", category: "People & Body" }, { name: "WOMAN: BALD", alias: "bald_woman", category: "People & Body" }, { name: "PERSON: BALD", alias: "bald_person", category: "People & Body" }, { name: "WOMAN: BLOND HAIR", alias: "blond-haired-woman", category: "People & Body" }, { name: "MAN: BLOND HAIR", alias: "blond-haired-man", category: "People & Body" }, { name: "OLDER ADULT", alias: "older_adult", category: "People & Body" }, { name: "OLDER MAN", alias: "older_man", category: "People & Body" }, { name: "OLDER WOMAN", alias: "older_woman", category: "People & Body" }, { name: "PERSON FROWNING", alias: "person_frowning", category: "People & Body" }, { name: "MAN FROWNING", alias: "man-frowning", category: "People & Body" }, { name: "WOMAN FROWNING", alias: "woman-frowning", category: "People & Body" }, { name: "PERSON WITH POUTING FACE", alias: "person_with_pouting_face", category: "People & Body" }, { name: "MAN POUTING", alias: "man-pouting", category: "People & Body" }, { name: "WOMAN POUTING", alias: "woman-pouting", category: "People & Body" }, { name: "FACE WITH NO GOOD GESTURE", alias: "no_good", category: "People & Body" }, { name: "MAN GESTURING NO", alias: "man-gesturing-no", category: "People & Body" }, { name: "WOMAN GESTURING NO", alias: "woman-gesturing-no", category: "People & Body" }, { name: "FACE WITH OK GESTURE", alias: "ok_woman", category: "People & Body" }, { name: "MAN GESTURING OK", alias: "man-gesturing-ok", category: "People & Body" }, { name: "WOMAN GESTURING OK", alias: "woman-gesturing-ok", category: "People & Body" }, { name: "INFORMATION DESK PERSON", alias: "information_desk_person", category: "People & Body" }, { name: "MAN TIPPING HAND", alias: "man-tipping-hand", category: "People & Body" }, { name: "WOMAN TIPPING HAND", alias: "woman-tipping-hand", category: "People & Body" }, { name: "HAPPY PERSON RAISING ONE HAND", alias: "raising_hand", category: "People & Body" }, { name: "MAN RAISING HAND", alias: "man-raising-hand", category: "People & Body" }, { name: "WOMAN RAISING HAND", alias: "woman-raising-hand", category: "People & Body" }, { name: "DEAF PERSON", alias: "deaf_person", category: "People & Body" }, { name: "DEAF MAN", alias: "deaf_man", category: "People & Body" }, { name: "DEAF WOMAN", alias: "deaf_woman", category: "People & Body" }, { name: "PERSON BOWING DEEPLY", alias: "bow", category: "People & Body" }, { name: "MAN BOWING", alias: "man-bowing", category: "People & Body" }, { name: "WOMAN BOWING", alias: "woman-bowing", category: "People & Body" }, { name: "FACE PALM", alias: "face_palm", category: "People & Body" }, { name: "MAN FACEPALMING", alias: "man-facepalming", category: "People & Body" }, { name: "WOMAN FACEPALMING", alias: "woman-facepalming", category: "People & Body" }, { name: "SHRUG", alias: "shrug", category: "People & Body" }, { name: "MAN SHRUGGING", alias: "man-shrugging", category: "People & Body" }, { name: "WOMAN SHRUGGING", alias: "woman-shrugging", category: "People & Body" }, { name: "HEALTH WORKER", alias: "health_worker", category: "People & Body" }, { name: "MAN HEALTH WORKER", alias: "male-doctor", category: "People & Body" }, { name: "WOMAN HEALTH WORKER", alias: "female-doctor", category: "People & Body" }, { name: "STUDENT", alias: "student", category: "People & Body" }, { name: "MAN STUDENT", alias: "male-student", category: "People & Body" }, { name: "WOMAN STUDENT", alias: "female-student", category: "People & Body" }, { name: "TEACHER", alias: "teacher", category: "People & Body" }, { name: "MAN TEACHER", alias: "male-teacher", category: "People & Body" }, { name: "WOMAN TEACHER", alias: "female-teacher", category: "People & Body" }, { name: "JUDGE", alias: "judge", category: "People & Body" }, { name: "MAN JUDGE", alias: "male-judge", category: "People & Body" }, { name: "WOMAN JUDGE", alias: "female-judge", category: "People & Body" }, { name: "FARMER", alias: "farmer", category: "People & Body" }, { name: "MAN FARMER", alias: "male-farmer", category: "People & Body" }, { name: "WOMAN FARMER", alias: "female-farmer", category: "People & Body" }, { name: "COOK", alias: "cook", category: "People & Body" }, { name: "MAN COOK", alias: "male-cook", category: "People & Body" }, { name: "WOMAN COOK", alias: "female-cook", category: "People & Body" }, { name: "MECHANIC", alias: "mechanic", category: "People & Body" }, { name: "MAN MECHANIC", alias: "male-mechanic", category: "People & Body" }, { name: "WOMAN MECHANIC", alias: "female-mechanic", category: "People & Body" }, { name: "FACTORY WORKER", alias: "factory_worker", category: "People & Body" }, { name: "MAN FACTORY WORKER", alias: "male-factory-worker", category: "People & Body" }, { name: "WOMAN FACTORY WORKER", alias: "female-factory-worker", category: "People & Body" }, { name: "OFFICE WORKER", alias: "office_worker", category: "People & Body" }, { name: "MAN OFFICE WORKER", alias: "male-office-worker", category: "People & Body" }, { name: "WOMAN OFFICE WORKER", alias: "female-office-worker", category: "People & Body" }, { name: "SCIENTIST", alias: "scientist", category: "People & Body" }, { name: "MAN SCIENTIST", alias: "male-scientist", category: "People & Body" }, { name: "WOMAN SCIENTIST", alias: "female-scientist", category: "People & Body" }, { name: "TECHNOLOGIST", alias: "technologist", category: "People & Body" }, { name: "MAN TECHNOLOGIST", alias: "male-technologist", category: "People & Body" }, { name: "WOMAN TECHNOLOGIST", alias: "female-technologist", category: "People & Body" }, { name: "SINGER", alias: "singer", category: "People & Body" }, { name: "MAN SINGER", alias: "male-singer", category: "People & Body" }, { name: "WOMAN SINGER", alias: "female-singer", category: "People & Body" }, { name: "ARTIST", alias: "artist", category: "People & Body" }, { name: "MAN ARTIST", alias: "male-artist", category: "People & Body" }, { name: "WOMAN ARTIST", alias: "female-artist", category: "People & Body" }, { name: "PILOT", alias: "pilot", category: "People & Body" }, { name: "MAN PILOT", alias: "male-pilot", category: "People & Body" }, { name: "WOMAN PILOT", alias: "female-pilot", category: "People & Body" }, { name: "ASTRONAUT", alias: "astronaut", category: "People & Body" }, { name: "MAN ASTRONAUT", alias: "male-astronaut", category: "People & Body" }, { name: "WOMAN ASTRONAUT", alias: "female-astronaut", category: "People & Body" }, { name: "FIREFIGHTER", alias: "firefighter", category: "People & Body" }, { name: "MAN FIREFIGHTER", alias: "male-firefighter", category: "People & Body" }, { name: "WOMAN FIREFIGHTER", alias: "female-firefighter", category: "People & Body" }, { name: "POLICE OFFICER", alias: "cop", category: "People & Body" }, { name: "MAN POLICE OFFICER", alias: "male-police-officer", category: "People & Body" }, { name: "WOMAN POLICE OFFICER", alias: "female-police-officer", category: "People & Body" }, { name: "DETECTIVE", alias: "sleuth_or_spy", category: "People & Body" }, { name: "MAN DETECTIVE", alias: "male-detective", category: "People & Body" }, { name: "WOMAN DETECTIVE", alias: "female-detective", category: "People & Body" }, { name: "GUARDSMAN", alias: "guardsman", category: "People & Body" }, { name: "MAN GUARD", alias: "male-guard", category: "People & Body" }, { name: "WOMAN GUARD", alias: "female-guard", category: "People & Body" }, { name: "NINJA", alias: "ninja", category: "People & Body" }, { name: "CONSTRUCTION WORKER", alias: "construction_worker", category: "People & Body" }, { name: "MAN CONSTRUCTION WORKER", alias: "male-construction-worker", category: "People & Body" }, { name: "WOMAN CONSTRUCTION WORKER", alias: "female-construction-worker", category: "People & Body" }, { name: "PRINCE", alias: "prince", category: "People & Body" }, { name: "PRINCESS", alias: "princess", category: "People & Body" }, { name: "MAN WITH TURBAN", alias: "man_with_turban", category: "People & Body" }, { name: "MAN WEARING TURBAN", alias: "man-wearing-turban", category: "People & Body" }, { name: "WOMAN WEARING TURBAN", alias: "woman-wearing-turban", category: "People & Body" }, { name: "MAN WITH GUA PI MAO", alias: "man_with_gua_pi_mao", category: "People & Body" }, { name: "PERSON WITH HEADSCARF", alias: "person_with_headscarf", category: "People & Body" }, { name: "MAN IN TUXEDO", alias: "person_in_tuxedo", category: "People & Body" }, { name: "MAN IN TUXEDO", alias: "man_in_tuxedo", category: "People & Body" }, { name: "WOMAN IN TUXEDO", alias: "woman_in_tuxedo", category: "People & Body" }, { name: "BRIDE WITH VEIL", alias: "bride_with_veil", category: "People & Body" }, { name: "MAN WITH VEIL", alias: "man_with_veil", category: "People & Body" }, { name: "WOMAN WITH VEIL", alias: "woman_with_veil", category: "People & Body" }, { name: "PREGNANT WOMAN", alias: "pregnant_woman", category: "People & Body" }, { name: "BREAST-FEEDING", alias: "breast-feeding", category: "People & Body" }, { name: "WOMAN FEEDING BABY", alias: "woman_feeding_baby", category: "People & Body" }, { name: "MAN FEEDING BABY", alias: "man_feeding_baby", category: "People & Body" }, { name: "PERSON FEEDING BABY", alias: "person_feeding_baby", category: "People & Body" }, { name: "BABY ANGEL", alias: "angel", category: "People & Body" }, { name: "FATHER CHRISTMAS", alias: "santa", category: "People & Body" }, { name: "MOTHER CHRISTMAS", alias: "mrs_claus", category: "People & Body" }, { name: "MX CLAUS", alias: "mx_claus", category: "People & Body" }, { name: "SUPERHERO", alias: "superhero", category: "People & Body" }, { name: "MAN SUPERHERO", alias: "male_superhero", category: "People & Body" }, { name: "WOMAN SUPERHERO", alias: "female_superhero", category: "People & Body" }, { name: "SUPERVILLAIN", alias: "supervillain", category: "People & Body" }, { name: "MAN SUPERVILLAIN", alias: "male_supervillain", category: "People & Body" }, { name: "WOMAN SUPERVILLAIN", alias: "female_supervillain", category: "People & Body" }, { name: "MAGE", alias: "mage", category: "People & Body" }, { name: "MAN MAGE", alias: "male_mage", category: "People & Body" }, { name: "WOMAN MAGE", alias: "female_mage", category: "People & Body" }, { name: "FAIRY", alias: "fairy", category: "People & Body" }, { name: "MAN FAIRY", alias: "male_fairy", category: "People & Body" }, { name: "WOMAN FAIRY", alias: "female_fairy", category: "People & Body" }, { name: "VAMPIRE", alias: "vampire", category: "People & Body" }, { name: "MAN VAMPIRE", alias: "male_vampire", category: "People & Body" }, { name: "WOMAN VAMPIRE", alias: "female_vampire", category: "People & Body" }, { name: "MERPERSON", alias: "merperson", category: "People & Body" }, { name: "MERMAN", alias: "merman", category: "People & Body" }, { name: "MERMAID", alias: "mermaid", category: "People & Body" }, { name: "ELF", alias: "elf", category: "People & Body" }, { name: "MAN ELF", alias: "male_elf", category: "People & Body" }, { name: "WOMAN ELF", alias: "female_elf", category: "People & Body" }, { name: "GENIE", alias: "genie", category: "People & Body" }, { name: "MAN GENIE", alias: "male_genie", category: "People & Body" }, { name: "WOMAN GENIE", alias: "female_genie", category: "People & Body" }, { name: "ZOMBIE", alias: "zombie", category: "People & Body" }, { name: "MAN ZOMBIE", alias: "male_zombie", category: "People & Body" }, { name: "WOMAN ZOMBIE", alias: "female_zombie", category: "People & Body" }, { name: "FACE MASSAGE", alias: "massage", category: "People & Body" }, { name: "MAN GETTING MASSAGE", alias: "man-getting-massage", category: "People & Body" }, { name: "WOMAN GETTING MASSAGE", alias: "woman-getting-massage", category: "People & Body" }, { name: "HAIRCUT", alias: "haircut", category: "People & Body" }, { name: "MAN GETTING HAIRCUT", alias: "man-getting-haircut", category: "People & Body" }, { name: "WOMAN GETTING HAIRCUT", alias: "woman-getting-haircut", category: "People & Body" }, { name: "PEDESTRIAN", alias: "walking", category: "People & Body" }, { name: "MAN WALKING", alias: "man-walking", category: "People & Body" }, { name: "WOMAN WALKING", alias: "woman-walking", category: "People & Body" }, { name: "STANDING PERSON", alias: "standing_person", category: "People & Body" }, { name: "MAN STANDING", alias: "man_standing", category: "People & Body" }, { name: "WOMAN STANDING", alias: "woman_standing", category: "People & Body" }, { name: "KNEELING PERSON", alias: "kneeling_person", category: "People & Body" }, { name: "MAN KNEELING", alias: "man_kneeling", category: "People & Body" }, { name: "WOMAN KNEELING", alias: "woman_kneeling", category: "People & Body" }, { name: "PERSON WITH WHITE CANE", alias: "person_with_probing_cane", category: "People & Body" }, { name: "MAN WITH WHITE CANE", alias: "man_with_probing_cane", category: "People & Body" }, { name: "WOMAN WITH WHITE CANE", alias: "woman_with_probing_cane", category: "People & Body" }, { name: "PERSON IN MOTORIZED WHEELCHAIR", alias: "person_in_motorized_wheelchair", category: "People & Body" }, { name: "MAN IN MOTORIZED WHEELCHAIR", alias: "man_in_motorized_wheelchair", category: "People & Body" }, { name: "WOMAN IN MOTORIZED WHEELCHAIR", alias: "woman_in_motorized_wheelchair", category: "People & Body" }, { name: "PERSON IN MANUAL WHEELCHAIR", alias: "person_in_manual_wheelchair", category: "People & Body" }, { name: "MAN IN MANUAL WHEELCHAIR", alias: "man_in_manual_wheelchair", category: "People & Body" }, { name: "WOMAN IN MANUAL WHEELCHAIR", alias: "woman_in_manual_wheelchair", category: "People & Body" }, { name: "RUNNER", alias: "runner", category: "People & Body" }, { name: "MAN RUNNING", alias: "man-running", category: "People & Body" }, { name: "WOMAN RUNNING", alias: "woman-running", category: