Upgrade emojibase and twemoji (#7286)

Co-authored-by: Tulir Asokan <tulir@maunium.net>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/emojipicker/EmojiPicker.tsx

@@ -196,8 +196,11 @@ class EmojiPicker extends React.Component<IProps, IState> {
     };
 
     private emojiMatchesFilter = (emoji: IEmoji, filter: string): boolean => {
-        return emoji.annotation.toLowerCase().includes(filter) ||
-            emoji.emoticon?.toLowerCase().includes(filter) ||
+        return emoji.label.toLowerCase().includes(filter) ||
+            (Array.isArray(emoji.emoticon)
+                ? emoji.emoticon.some((x) => x.includes(filter))
+                : emoji.emoticon?.includes(filter)
+            ) ||
             emoji.shortcodes.some(x => x.toLowerCase().includes(filter)) ||
             emoji.unicode.split(ZERO_WIDTH_JOINER).includes(filter);
     };

src/components/views/emojipicker/Preview.tsx

@@ -27,7 +27,7 @@ interface IProps {
 @replaceableComponent("views.emojipicker.Preview")
 class Preview extends React.PureComponent<IProps> {
     render() {
-        const { unicode, annotation, shortcodes: [shortcode] } = this.props.emoji;
+        const { unicode, label, shortcodes: [shortcode] } = this.props.emoji;
 
         return (
             <div className="mx_EmojiPicker_footer mx_EmojiPicker_preview">
@@ -36,7 +36,7 @@ class Preview extends React.PureComponent<IProps> {
                 </div>
                 <div className="mx_EmojiPicker_preview_text">
                     <div className="mx_EmojiPicker_name mx_EmojiPicker_preview_name">
-                        { annotation }
+                        { label }
                     </div>
                     <div className="mx_EmojiPicker_shortcode">
                         { shortcode }

src/components/views/emojipicker/QuickReactions.tsx

@@ -68,7 +68,7 @@ class QuickReactions extends React.Component<IProps, IState> {
                     { !this.state.hover
                         ? _t("Quick Reactions")
                         : <React.Fragment>
-                            <span className="mx_EmojiPicker_name">{ this.state.hover.annotation }</span>
+                            <span className="mx_EmojiPicker_name">{ this.state.hover.label }</span>
                             <span className="mx_EmojiPicker_shortcode">{ this.state.hover.shortcodes[0] }</span>
                         </React.Fragment>
                     }