@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/cjs/ui/EmojiReactions.js

@@ -6,84 +6,92 @@ var ui_ReactionButton = require('./ReactionButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var index = require('../index-fbe9cc73.js');
+var index = require('../index-b995f638.js');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../index-18720f0d.js');
+var ui_Label = require('../index-35820a94.js');
 var ui_UserListItem = require('./UserListItem.js');
 var ui_Tooltip = require('./Tooltip.js');
 var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../MediaQueryContext-73aac8cf.js');
-var useLongPress = require('../useLongPress-1c0f4696.js');
-var LocalizationContext = require('../LocalizationContext-482c1343.js');
+var MediaQueryContext = require('../MediaQueryContext-d6fdbe43.js');
+var useLongPress = require('../useLongPress-c1da8ba7.js');
+var LocalizationContext = require('../LocalizationContext-5009012e.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-83d7e84b.js');
-require('../utils-c47c68b1.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-94c18dc1.js');
+require('../tslib.es6-2f2b0bca.js');
+require('../utils-180c6bc8.js');
 require('prop-types');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-b2806cf5.js');
+require('../uuid-c74bbbb6.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index.module-a24e9cd7.js');
-require('../stringSet-d00535a5.js');
-require('../index-cbcacbee.js');
-require('../UserProfileContext-fa8d0383.js');
+require('../index-609b07a2.js');
+require('../stringSet-98b52c49.js');
+require('../types-66554668.js');
+require('../index-daf80c58.js');
+require('../UserProfileContext-922a43ec.js');
 require('./Avatar.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./UserProfile.js');
 require('../sendbirdSelectors.js');
-require('../topics-adde627b.js');
+require('../pubSub/topics.js');
 require('./Button.js');
-require('../index-d04f312e.js');
+require('../index-fd8a0abb.js');
 require('../withSendbird.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ReactedMembersBottomSheet = _ref => {
-  var _message$reactions, _message$reactions2, _message$reactions2$f;
-  let {
-    message,
-    channel,
-    emojiKey = '',
-    hideMenu,
-    emojiContainer
-  } = _ref;
-  const {
-    members = []
-  } = channel;
-  const [selectedEmoji, setSelectedEmoji] = React.useState(emojiKey);
+var ReactedMembersBottomSheet = function (_a) {
+  var _b, _c, _d;
+  var message = _a.message,
+    channel = _a.channel,
+    _e = _a.emojiKey,
+    emojiKey = _e === void 0 ? '' : _e,
+    hideMenu = _a.hideMenu,
+    emojiContainer = _a.emojiContainer,
+    onPressUserProfileHandler = _a.onPressUserProfileHandler;
+  var _f = channel.members,
+    members = _f === void 0 ? [] : _f;
+  var _g = React.useState(emojiKey),
+    selectedEmoji = _g[0],
+    setSelectedEmoji = _g[1];
+  function onPressUserProfileCallBack() {
+    if (onPressUserProfileHandler && message) {
+      var sender = message === null || message === void 0 ? void 0 : message.sender;
+      onPressUserProfileHandler(sender);
+    }
+  }
   return /*#__PURE__*/React__default["default"].createElement(ui_BottomSheet, {
     onBackdropClick: hideMenu
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet__reacted-members"
-  }, (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.map(reaction => {
-    const emojiUrl = index.getEmojiUrl(emojiContainer, reaction.key);
+  }, (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.map(function (reaction) {
+    var emojiUrl = index.getEmojiUrl(emojiContainer, reaction.key);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: reaction.key,
-      className: `
-                  sendbird-message__bottomsheet__reacted-members__item
-                  ${selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : ''}
-                `,
-      onClick: () => {
+      className: "\n                  sendbird-message__bottomsheet__reacted-members__item\n                  ".concat(selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : '', "\n                "),
+      onClick: function () {
         setSelectedEmoji(reaction.key);
       }
     }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer["default"], {
       url: emojiUrl,
       width: "28px",
       height: "28px",
-      placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
-        style: style
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-        type: ui_Icon.IconTypes.QUESTION,
-        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-        width: "28px",
-        height: "28px"
-      }))
+      placeHolder: function (style) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          style: style
+        }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+          type: ui_Icon.IconTypes.QUESTION,
+          fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+          width: "28px",
+          height: "28px"
+        }));
+      }
     }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
       type: ui_Label.LabelTypography.BUTTON_2,
       color: selectedEmoji === reaction.key ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3
@@ -92,42 +100,47 @@ const ReactedMembersBottomSheet = _ref => {
     className: "sendbird-message__bottomsheet__reactor-list"
   },
   // making a member list who reacted to the message with the `selectedEmoji`
-  ((_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : (_message$reactions2$f = _message$reactions2.find(reaction => reaction.key === selectedEmoji)) === null || _message$reactions2$f === void 0 ? void 0 : _message$reactions2$f.userIds.map(userId => members.find(member => member.userId === userId)).filter(member => member !== undefined)).map(member => /*#__PURE__*/React__default["default"].createElement(ui_UserListItem, {
-    key: member.userId,
-    className: "sendbird-message__bottomsheet__reactor-list__item",
-    user: member,
-    avatarSize: "36px"
-  })))));
+  ((_d = (_c = message.reactions) === null || _c === void 0 ? void 0 : _c.find(function (reaction) {
+    return reaction.key === selectedEmoji;
+  })) === null || _d === void 0 ? void 0 : _d.userIds.map(function (userId) {
+    return members.find(function (member) {
+      return member.userId === userId;
+    });
+  }).filter(function (member) {
+    return member !== undefined;
+  })).map(function (member) {
+    return /*#__PURE__*/React__default["default"].createElement(ui_UserListItem, {
+      key: member.userId,
+      className: "sendbird-message__bottomsheet__reactor-list__item",
+      user: member,
+      avatarSize: "36px",
+      onClick: onPressUserProfileCallBack
+    });
+  }))));
 };
 
-function ReactionItem(_ref) {
-  var _emojisMap$get;
-  let {
-    reaction,
-    memberNicknamesMap,
-    setEmojiKey,
-    toggleReaction,
-    emojisMap,
-    channel
-  } = _ref;
-  const store = useSendbirdStateContext();
-  const {
-    isMobile
-  } = MediaQueryContext.useMediaQueryContext();
-  const messageStore = Message_context.useMessageContext();
-  const message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
-  const {
-    stringSet
-  } = React.useContext(LocalizationContext.LocalizationContext);
-  const userId = store.config.userId;
-  const reactedByMe = index.isReactedBy(userId, reaction);
-  const showHoverTooltip = reaction.userIds.length > 0 && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !channel.isSuper;
-  const handleOnClick = () => {
+function ReactionItem(_a) {
+  var _b;
+  var reaction = _a.reaction,
+    memberNicknamesMap = _a.memberNicknamesMap,
+    setEmojiKey = _a.setEmojiKey,
+    toggleReaction = _a.toggleReaction,
+    emojisMap = _a.emojisMap,
+    channel = _a.channel;
+  var store = useSendbirdStateContext.useSendbirdStateContext();
+  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+  var messageStore = Message_context.useMessageContext();
+  var message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  var userId = store.config.userId;
+  var reactedByMe = index.isReactedBy(userId, reaction);
+  var showHoverTooltip = reaction.userIds.length > 0 && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !channel.isSuper;
+  var handleOnClick = function () {
     setEmojiKey('');
     toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, reaction.key, reactedByMe);
   };
-  const longPress = useLongPress.useLongPress({
-    onLongPress: () => {
+  var longPress = useLongPress.useLongPress({
+    onLongPress: function () {
       setEmojiKey(reaction.key);
     },
     onClick: handleOnClick
@@ -145,7 +158,7 @@ function ReactionItem(_ref) {
     selected: reactedByMe
   }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer["default"], {
     circle: true,
-    url: ((_emojisMap$get = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _emojisMap$get === void 0 ? void 0 : _emojisMap$get.url) || '',
+    url: ((_b = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _b === void 0 ? void 0 : _b.url) || '',
     width: "20px",
     height: "20px",
     defaultComponent: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
@@ -156,13 +169,11 @@ function ReactionItem(_ref) {
   }))));
 }
 
-const AddReactionBadgeItem = _ref => {
-  let {
-    onClick
-  } = _ref;
-  const onlyClick = useLongPress.useLongPress({
-    onLongPress: () => {/* noop */},
-    onClick
+var AddReactionBadgeItem = function (_a) {
+  var onClick = _a.onClick;
+  var onlyClick = useLongPress.useLongPress({
+    onLongPress: function () {},
+    onClick: onClick
   }, {
     shouldPreventDefault: true,
     shouldStopPropagation: true
@@ -179,78 +190,86 @@ const AddReactionBadgeItem = _ref => {
   })));
 };
 
-const MobileEmojisBottomSheet = _ref => {
-  let {
-    userId,
-    message,
-    emojiContainer,
-    hideMenu,
-    toggleReaction
-  } = _ref;
-  const emojiAllList = React.useMemo(() => {
+var MobileEmojisBottomSheet = function (_a) {
+  var userId = _a.userId,
+    message = _a.message,
+    emojiContainer = _a.emojiContainer,
+    hideMenu = _a.hideMenu,
+    toggleReaction = _a.toggleReaction;
+  var emojiAllList = React.useMemo(function () {
     return index.getEmojiListAll(emojiContainer);
   }, [emojiContainer]);
   return /*#__PURE__*/React__default["default"].createElement(ui_BottomSheet, {
     onBackdropClick: hideMenu
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet"
-  }, emojiAllList.map(emoji => {
-    var _message$reactions$fi, _message$reactions, _message$reactions$fi2, _message$reactions$fi3;
-    const isReacted = (_message$reactions$fi = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions.find(reaction => reaction.key === emoji.key)) === null || _message$reactions$fi2 === void 0 ? void 0 : (_message$reactions$fi3 = _message$reactions$fi2.userIds) === null || _message$reactions$fi3 === void 0 ? void 0 : _message$reactions$fi3.some(reactorId => reactorId === userId)) !== null && _message$reactions$fi !== void 0 ? _message$reactions$fi : false;
+  }, emojiAllList.map(function (emoji) {
+    var _a, _b, _c, _d;
+    var isReacted = (_d = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) {
+      return reaction.key === emoji.key;
+    })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
+      return reactorId === userId;
+    })) !== null && _d !== void 0 ? _d : false;
     return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
       key: emoji.key,
       width: "44px",
       height: "44px",
       selected: isReacted,
-      onClick: e => {
+      onClick: function (e) {
         e === null || e === void 0 ? void 0 : e.stopPropagation();
         toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
         hideMenu();
       },
-      dataSbId: `ui_mobile_emoji_reactions_menu_${emoji.key}`
+      dataSbId: "ui_mobile_emoji_reactions_menu_".concat(emoji.key)
     }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer["default"], {
       url: emoji.url,
       width: "38px",
       height: "38px",
-      placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
-        style: style
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-        type: ui_Icon.IconTypes.QUESTION,
-        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-        width: "28px",
-        height: "28px"
-      }))
+      placeHolder: function (style) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          style: style
+        }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+          type: ui_Icon.IconTypes.QUESTION,
+          fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+          width: "28px",
+          height: "28px"
+        }));
+      }
     }));
   })));
 };
 
-const EmojiReactions = _ref => {
-  var _message$reactions$le, _message$reactions, _message$reactions$le2, _message$reactions2, _message$reactions3;
-  let {
-    className = '',
-    userId,
-    message,
-    channel,
-    emojiContainer,
-    memberNicknamesMap,
-    spaceFromTrigger = {
+var EmojiReactions = function (_a) {
+  var _b, _c, _d, _e, _f;
+  var _g = _a.className,
+    className = _g === void 0 ? '' : _g,
+    userId = _a.userId,
+    message = _a.message,
+    channel = _a.channel,
+    emojiContainer = _a.emojiContainer,
+    memberNicknamesMap = _a.memberNicknamesMap,
+    _h = _a.spaceFromTrigger,
+    spaceFromTrigger = _h === void 0 ? {
       x: 0,
       y: 0
-    },
-    isByMe = false,
-    toggleReaction
-  } = _ref;
-  const {
-    isMobile
-  } = MediaQueryContext.useMediaQueryContext();
-  const addReactionRef = React.useRef(null);
-  const [showEmojiList, setShowEmojiList] = React.useState(false);
-  const [selectedEmojiKey, setSelectedEmojiKey] = React.useState('');
-  const emojisMap = index.getEmojiMapAll(emojiContainer);
-  const showAddReactionBadge = ((_message$reactions$le = (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) !== null && _message$reactions$le !== void 0 ? _message$reactions$le : 0) < emojisMap.size;
+    } : _h,
+    _j = _a.isByMe,
+    isByMe = _j === void 0 ? false : _j,
+    toggleReaction = _a.toggleReaction,
+    onPressUserProfile = _a.onPressUserProfile;
+  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+  var addReactionRef = React.useRef(null);
+  var _k = React.useState(false),
+    showEmojiList = _k[0],
+    setShowEmojiList = _k[1];
+  var _l = React.useState(''),
+    selectedEmojiKey = _l[0],
+    setSelectedEmojiKey = _l[1];
+  var emojisMap = index.getEmojiMapAll(emojiContainer);
+  var showAddReactionBadge = ((_c = (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) < emojisMap.size;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
-  }, ((_message$reactions$le2 = (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length) !== null && _message$reactions$le2 !== void 0 ? _message$reactions$le2 : 0) > 0 && ((_message$reactions3 = message.reactions) === null || _message$reactions3 === void 0 ? void 0 : _message$reactions3.map(reaction => {
+  }, ((_e = (_d = message.reactions) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) > 0 && ((_f = message.reactions) === null || _f === void 0 ? void 0 : _f.map(function (reaction) {
     return /*#__PURE__*/React__default["default"].createElement(ReactionItem, {
       key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
       reaction: reaction,
@@ -261,63 +280,73 @@ const EmojiReactions = _ref => {
       channel: channel
     });
   })), !isMobile && showAddReactionBadge && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
-      className: "sendbird-emoji-reactions__add-reaction-badge",
-      ref: addReactionRef,
-      isAdd: true,
-      onClick: e => {
-        var _e$stopPropagation;
-        toggleDropdown();
-        e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-      type: ui_Icon.IconTypes.EMOJI_MORE,
-      fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-      width: "20px",
-      height: "20px"
-    })),
-    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
-      parentRef: addReactionRef,
-      parentContainRef: addReactionRef,
-      closeDropdown: closeDropdown,
-      spaceFromTrigger: spaceFromTrigger
-    }, index.getEmojiListAll(emojiContainer).map(emoji => {
-      var _message$reactions4, _message$reactions4$f, _message$reactions4$f2;
-      const isReacted = (message === null || message === void 0 ? void 0 : (_message$reactions4 = message.reactions) === null || _message$reactions4 === void 0 ? void 0 : (_message$reactions4$f = _message$reactions4.find(reaction => reaction.key === emoji.key)) === null || _message$reactions4$f === void 0 ? void 0 : (_message$reactions4$f2 = _message$reactions4$f.userIds) === null || _message$reactions4$f2 === void 0 ? void 0 : _message$reactions4$f2.some(reactorId => reactorId === userId)) || false;
-      return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
-        key: emoji.key,
-        width: "36px",
-        height: "36px",
-        selected: isReacted,
-        onClick: e => {
-          closeDropdown();
-          toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
-          e === null || e === void 0 ? void 0 : e.stopPropagation();
-        },
-        dataSbId: `ui_emoji_reactions_menu_${emoji.key}`
-      }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer["default"], {
-        url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
-        width: "28px",
-        height: "28px",
-        placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
-          style: style
-        }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-          type: ui_Icon.IconTypes.QUESTION,
-          fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
+        className: "sendbird-emoji-reactions__add-reaction-badge",
+        ref: addReactionRef,
+        isAdd: true,
+        onClick: function (e) {
+          var _a;
+          toggleDropdown();
+          (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.EMOJI_MORE,
+        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+        width: "20px",
+        height: "20px"
+      }));
+    },
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
+        parentRef: addReactionRef,
+        parentContainRef: addReactionRef,
+        closeDropdown: closeDropdown,
+        spaceFromTrigger: spaceFromTrigger
+      }, index.getEmojiListAll(emojiContainer).map(function (emoji) {
+        var _a, _b, _c;
+        var isReacted = ((_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) {
+          return reaction.key === emoji.key;
+        })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
+          return reactorId === userId;
+        })) || false;
+        return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
+          key: emoji.key,
+          width: "36px",
+          height: "36px",
+          selected: isReacted,
+          onClick: function (e) {
+            closeDropdown();
+            toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+          },
+          dataSbId: "ui_emoji_reactions_menu_".concat(emoji.key)
+        }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer["default"], {
+          url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
           width: "28px",
-          height: "28px"
-        }))
+          height: "28px",
+          placeHolder: function (style) {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              style: style
+            }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+              type: ui_Icon.IconTypes.QUESTION,
+              fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+              width: "28px",
+              height: "28px"
+            }));
+          }
+        }));
       }));
-    }))
+    }
   }), isMobile && showAddReactionBadge && /*#__PURE__*/React__default["default"].createElement(AddReactionBadgeItem, {
-    onClick: () => {
+    onClick: function () {
       setShowEmojiList(true);
     }
   }), isMobile && showEmojiList && /*#__PURE__*/React__default["default"].createElement(MobileEmojisBottomSheet, {
     userId: userId,
     message: message,
     emojiContainer: emojiContainer,
-    hideMenu: () => {
+    hideMenu: function () {
       setShowEmojiList(false);
     },
     toggleReaction: toggleReaction
@@ -325,10 +354,11 @@ const EmojiReactions = _ref => {
     message: message,
     channel: channel,
     emojiKey: selectedEmojiKey,
-    hideMenu: () => {
+    hideMenu: function () {
       setSelectedEmojiKey('');
     },
-    emojiContainer: emojiContainer
+    emojiContainer: emojiContainer,
+    onPressUserProfileHandler: onPressUserProfile
   }));
 };