@sendbird/uikit-react 3.7.0 → 3.8.1

package/ui/DateSeparator.js

@@ -1,29 +1,18 @@
-import { c as __spreadArray } from '../tslib.es6-c2fb729e.js';
+import { a as __spreadArray } from '../chunks/bundle-AVOWwEQ4.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../color-57373b4c.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-92741c7e.js';
-import 'prop-types';
-import '../stringSet-6422c6b9.js';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-06CfHADE.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-lDOyfwhb.js';
+import '../chunks/bundle-4zdVdGkr.js';
 
-var DateSeparator = function (_a) {
-  var _b = _a.children,
-    children = _b === void 0 ? null : _b,
-    _c = _a.className,
-    className = _c === void 0 ? '' : _c,
-    _d = _a.separatorColor,
-    separatorColor = _d === void 0 ? Colors.ONBACKGROUND_4 : _d;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-separator'], false).join(' ')
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: ['sendbird-separator__left', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ')
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-separator__text"
-  }, children || /*#__PURE__*/React__default.createElement(Label, {
-    type: LabelTypography.CAPTION_2,
-    color: LabelColors.ONBACKGROUND_2
-  }, "Date Separator")), /*#__PURE__*/React__default.createElement("div", {
-    className: ['sendbird-separator__right', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ')
-  }));
+var DateSeparator = function (_a) {
+    var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.separatorColor, separatorColor = _d === void 0 ? Colors.ONBACKGROUND_4 : _d;
+    return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-separator',
+        ], false).join(' ') },
+        React__default.createElement("div", { className: ['sendbird-separator__left', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ') }),
+        React__default.createElement("div", { className: "sendbird-separator__text" }, children
+            || (React__default.createElement(Label, { type: LabelTypography.CAPTION_2, color: LabelColors.ONBACKGROUND_2 }, "Date Separator"))),
+        React__default.createElement("div", { className: ['sendbird-separator__right', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ') })));
 };
 
 export { DateSeparator as default };

package/ui/DateSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateSeparator.js","sources":["../../src/ui/DateSeparator/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport {\n  Colors,\n  changeColorToClassName,\n} from '../../utils/color';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface DateSeparatorProps {\n  children?: string | ReactElement;\n  className?: string | Array<string>;\n  separatorColor?: Colors;\n}\nconst DateSeparator = ({\n  children = null,\n  className = '',\n  separatorColor = Colors.ONBACKGROUND_4,\n}: DateSeparatorProps): ReactElement => {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-separator',\n      ].join(' ')}\n    >\n      <div className={['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n      <div className=\"sendbird-separator__text\">\n        {\n          children\n          || (\n            <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>\n              Date Separator\n            </Label>\n          )\n        }\n      </div>\n      <div className={['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n    </div>\n  );\n};\n\nexport default DateSeparator;\n"],"names":["DateSeparator","_a","_b","children","_c","className","_d","separatorColor","Colors","ONBACKGROUND_4","React","createElement","__spreadArray","Array","isArray","join","concat","changeColorToClassName","Label","type","LabelTypography","CAPTION_2","color","LabelColors","ONBACKGROUND_2"],"mappings":";;;;;;;AAgBA,IAAMA,aAAa,GAAG,UAACC,EAIF,EAAA;MAHnBC,EAAe,GAAAD,EAAA,CAAAE,QAAA;IAAfA,QAAQ,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,KAAA;IACfE,EAAA,GAAAH,EAAA,CAAAI,SAAc;IAAdA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,EAAA;IACdE,sBAAsC;IAAtCC,cAAc,mBAAGC,MAAM,CAACC,cAAc,GAAAH,EAAA,CAAA;EAEtC,oBACEI,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEN,IAAAA,SAAS,EAAEO,aAAA,CAAAA,aAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAO,CAACT,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,EAAC,IAAA,CAAA,EAAA,CACvD,oBAAoB,CACpB,EAAA,KAAA,CAAA,CAAAU,IAAI,CAAC,GAAG,CAAA;GAEVL,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAE,CAAC,0BAA0B,EAAE,EAAG,CAAAW,MAAA,CAAAC,sBAAsB,CAACV,cAAc,CAAC,uBAAoB,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAA;AAAE,GACtH,CAAA,eAAAL,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAC,0BAAA;AAA0B,GAAA,EAErCF,QAAQ,iBAENO,cAAA,CAAAC,aAAA,CAACO,KAAK,EAAA;IAACC,IAAI,EAAEC,eAAe,CAACC,SAAU;IAACC,KAAK,EAAEC,WAAW,CAACC,cAAAA;AAAe,GAAA,EACxE,gBACK,CAGR,CACL,eAAAd,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAE,CAAC,2BAA2B,EAAE,EAAG,CAAAW,MAAA,CAAAC,sBAAsB,CAACV,cAAc,CAAC,uBAAoB,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAA;AAAE,GACzH,CAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"DateSeparator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/ui/EmojiReactions.js

@@ -4,356 +4,173 @@ import ReactionButton from './ReactionButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ContextMenu, { EmojiListItems } from './ContextMenu.js';
-import { M as getEmojiUrl, N as isReactedBy, O as getEmojiTooltipString, L as getEmojiListAll, P as getEmojiMapAll, o as getClassName } from '../index-776554c0.js';
+import { O as getEmojiUrl, P as isReactedBy, Q as getEmojiTooltipString, p as getEmojiListAll, R as getEmojiMapAll, n as getClassName } from '../chunks/bundle-OoXqnc0l.js';
 import BottomSheet from './BottomSheet.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-92741c7e.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-lDOyfwhb.js';
 import UserListItem from './UserListItem.js';
+import { _ as __assign } from '../chunks/bundle-AVOWwEQ4.js';
 import Tooltip from './Tooltip.js';
 import TooltipWrapper from './TooltipWrapper.js';
-import { u as useMediaQueryContext } from '../MediaQueryContext-114ca049.js';
-import { u as useLongPress } from '../useLongPress-f8655a14.js';
-import { a as LocalizationContext } from '../LocalizationContext-287ee149.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-QKq7b-WA.js';
+import { u as useLongPress } from '../chunks/bundle-9uR-6efo.js';
+import { L as LocalizationContext } from '../chunks/bundle-GqUhOzeC.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { useMessageContext } from '../Message/context.js';
-import { _ as _extends } from '../_rollupPluginBabelHelpers-e92eb032.js';
-import '../tslib.es6-c2fb729e.js';
-import '../utils-6c50a6d1.js';
-import 'prop-types';
+import '../chunks/bundle-4zdVdGkr.js';
+import '../chunks/bundle-FQAabli1.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../uuid-c15b8b3b.js';
+import '../chunks/bundle-iPDlyZXo.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../index-09847c0f.js';
-import '../stringSet-6422c6b9.js';
-import '../types-9d43ac6e.js';
-import '../index-04bd1a59.js';
-import '../UserProfileContext-2001a468.js';
-import './Avatar.js';
+import '../chunks/bundle-0BwB1B7t.js';
+import '../hooks/useModal.js';
+import '../chunks/bundle-gYyMZyCn.js';
+import './IconButton.js';
+import './Button.js';
+import '../chunks/bundle-ltzZCtkR.js';
+import '../chunks/bundle-G3cS-S1W.js';
+import '../chunks/bundle-x3udz03j.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
 import './UserProfile.js';
 import '../sendbirdSelectors.js';
-import '../pubSub/topics.js';
-import './Button.js';
-import '../index-e4277f9c.js';
+import '../chunks/bundle--Hrow3p-.js';
 import '../withSendbird.js';
 
-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 = 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.createElement(BottomSheet, {
-    onBackdropClick: hideMenu
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-message__bottomsheet"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-message__bottomsheet__reacted-members"
-  }, (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.map(function (reaction) {
-    var emojiUrl = getEmojiUrl(emojiContainer, reaction.key);
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: reaction.key,
-      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.createElement(ImageRenderer, {
-      url: emojiUrl,
-      width: "28px",
-      height: "28px",
-      placeHolder: function (style) {
-        return /*#__PURE__*/React__default.createElement("div", {
-          style: style
-        }, /*#__PURE__*/React__default.createElement(Icon, {
-          type: IconTypes.QUESTION,
-          fillColor: IconColors.ON_BACKGROUND_3,
-          width: "28px",
-          height: "28px"
-        }));
-      }
-    }), /*#__PURE__*/React__default.createElement(Label, {
-      type: LabelTypography.BUTTON_2,
-      color: selectedEmoji === reaction.key ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3
-    }, reaction.userIds.length));
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-message__bottomsheet__reactor-list"
-  },
-  // making a member list who reacted to the message with the `selectedEmoji`
-  ((_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.createElement(UserListItem, {
-      key: member.userId,
-      className: "sendbird-message__bottomsheet__reactor-list__item",
-      user: member,
-      avatarSize: "36px",
-      onClick: onPressUserProfileCallBack
-    });
-  }))));
+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 = 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 (React__default.createElement(BottomSheet, { onBackdropClick: hideMenu },
+        React__default.createElement("div", { className: "sendbird-message__bottomsheet" },
+            React__default.createElement("div", { className: "sendbird-message__bottomsheet__reacted-members" }, (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.map(function (reaction) {
+                var emojiUrl = getEmojiUrl(emojiContainer, reaction.key);
+                return (React__default.createElement("div", { key: reaction.key, 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);
+                    } },
+                    React__default.createElement(ImageRenderer, { url: emojiUrl, width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
+                            React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } }),
+                    React__default.createElement(Label, { type: LabelTypography.BUTTON_2, color: selectedEmoji === reaction.key ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3 }, reaction.userIds.length)));
+            })),
+            React__default.createElement("div", { className: "sendbird-message__bottomsheet__reactor-list" }, // making a member list who reacted to the message with the `selectedEmoji`
+            ((_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 (React__default.createElement(UserListItem, { key: member.userId, className: "sendbird-message__bottomsheet__reactor-list__item", user: member, avatarSize: "36px", onClick: onPressUserProfileCallBack })); })))));
 };
 
-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();
-  var isMobile = useMediaQueryContext().isMobile;
-  var messageStore = useMessageContext();
-  var message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
-  var stringSet = useContext(LocalizationContext).stringSet;
-  var userId = store.config.userId;
-  var reactedByMe = 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);
-  };
-  var longPress = useLongPress({
-    onLongPress: function () {
-      setEmojiKey(reaction.key);
-    },
-    onClick: handleOnClick
-  }, {
-    shouldPreventDefault: true,
-    shouldStopPropagation: true
-  });
-  return /*#__PURE__*/React__default.createElement(TooltipWrapper, {
-    className: "sendbird-emoji-reactions__reaction-badge",
-    hoverTooltip: showHoverTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, null, getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null)
-  }, /*#__PURE__*/React__default.createElement("div", isMobile ? longPress : {
-    onClick: handleOnClick
-  }, /*#__PURE__*/React__default.createElement(ReactionBadge, {
-    count: reaction.userIds.length,
-    selected: reactedByMe
-  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
-    circle: true,
-    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.createElement(Icon, {
-      width: "20px",
-      height: "20px",
-      type: IconTypes.QUESTION
-    })
-  }))));
+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();
+    var isMobile = useMediaQueryContext().isMobile;
+    var messageStore = useMessageContext();
+    var message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var userId = store.config.userId;
+    var reactedByMe = 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);
+    };
+    var longPress = useLongPress({
+        onLongPress: function () {
+            setEmojiKey(reaction.key);
+        },
+        onClick: handleOnClick,
+    }, {
+        shouldPreventDefault: true,
+        shouldStopPropagation: true,
+    });
+    return (React__default.createElement(TooltipWrapper, { className: "sendbird-emoji-reactions__reaction-badge", hoverTooltip: showHoverTooltip ? (React__default.createElement(Tooltip, null, getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))) : React__default.createElement(React__default.Fragment, null) },
+        React__default.createElement("div", __assign({}, (isMobile
+            ? longPress
+            : { onClick: handleOnClick })),
+            React__default.createElement(ReactionBadge, { count: reaction.userIds.length, selected: reactedByMe },
+                React__default.createElement(ImageRenderer, { circle: true, 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: (React__default.createElement(Icon, { width: "20px", height: "20px", type: IconTypes.QUESTION })) })))));
 }
 
-var AddReactionBadgeItem = function (_a) {
-  var onClick = _a.onClick;
-  var onlyClick = useLongPress({
-    onLongPress: function () {},
-    onClick: onClick
-  }, {
-    shouldPreventDefault: true,
-    shouldStopPropagation: true
-  });
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: "sendbird-emoji-reactions__add-reaction-badge"
-  }, onlyClick), /*#__PURE__*/React__default.createElement(ReactionBadge, {
-    isAdd: true
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: IconTypes.EMOJI_MORE,
-    fillColor: IconColors.ON_BACKGROUND_3,
-    width: "20px",
-    height: "20px"
-  })));
+var AddReactionBadgeItem = function (_a) {
+    var onClick = _a.onClick;
+    var onlyClick = useLongPress({
+        onLongPress: function () { },
+        onClick: onClick,
+    }, {
+        shouldPreventDefault: true,
+        shouldStopPropagation: true,
+    });
+    return (React__default.createElement("div", __assign({ className: "sendbird-emoji-reactions__add-reaction-badge" }, onlyClick),
+        React__default.createElement(ReactionBadge, { isAdd: true },
+            React__default.createElement(Icon, { type: IconTypes.EMOJI_MORE, fillColor: IconColors.ON_BACKGROUND_3, width: "20px", height: "20px" }))));
 };
 
-var MobileEmojisBottomSheet = function (_a) {
-  var userId = _a.userId,
-    message = _a.message,
-    emojiContainer = _a.emojiContainer,
-    hideMenu = _a.hideMenu,
-    toggleReaction = _a.toggleReaction;
-  var emojiAllList = useMemo(function () {
-    return getEmojiListAll(emojiContainer);
-  }, [emojiContainer]);
-  return /*#__PURE__*/React__default.createElement(BottomSheet, {
-    onBackdropClick: hideMenu
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet"
-  }, 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.createElement(ReactionButton, {
-      key: emoji.key,
-      width: "44px",
-      height: "44px",
-      selected: isReacted,
-      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_".concat(emoji.key)
-    }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
-      url: emoji.url,
-      width: "38px",
-      height: "38px",
-      placeHolder: function (style) {
-        return /*#__PURE__*/React__default.createElement("div", {
-          style: style
-        }, /*#__PURE__*/React__default.createElement(Icon, {
-          type: IconTypes.QUESTION,
-          fillColor: IconColors.ON_BACKGROUND_3,
-          width: "28px",
-          height: "28px"
-        }));
-      }
-    }));
-  })));
+var MobileEmojisBottomSheet = function (_a) {
+    var userId = _a.userId, message = _a.message, emojiContainer = _a.emojiContainer, hideMenu = _a.hideMenu, toggleReaction = _a.toggleReaction;
+    var emojiAllList = useMemo(function () {
+        return getEmojiListAll(emojiContainer);
+    }, [emojiContainer]);
+    return (React__default.createElement(BottomSheet, { onBackdropClick: hideMenu },
+        React__default.createElement("div", { className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet" }, 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 (React__default.createElement(ReactionButton, { key: emoji.key, width: "44px", height: "44px", selected: isReacted, 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_".concat(emoji.key) },
+                React__default.createElement(ImageRenderer, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
+                        React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+        }))));
 };
 
-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
-    } : _h,
-    _j = _a.isByMe,
-    isByMe = _j === void 0 ? false : _j,
-    toggleReaction = _a.toggleReaction,
-    onPressUserProfile = _a.onPressUserProfile;
-  var isMobile = useMediaQueryContext().isMobile;
-  var addReactionRef = useRef(null);
-  var _k = useState(false),
-    showEmojiList = _k[0],
-    setShowEmojiList = _k[1];
-  var _l = useState(''),
-    selectedEmojiKey = _l[0],
-    setSelectedEmojiKey = _l[1];
-  var emojisMap = 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.createElement("div", {
-    className: getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
-  }, ((_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.createElement(ReactionItem, {
-      key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
-      reaction: reaction,
-      memberNicknamesMap: memberNicknamesMap,
-      setEmojiKey: setSelectedEmojiKey,
-      toggleReaction: toggleReaction,
-      emojisMap: emojisMap,
-      channel: channel
-    });
-  })), !isMobile && showAddReactionBadge && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default.createElement(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.createElement(Icon, {
-        type: IconTypes.EMOJI_MORE,
-        fillColor: IconColors.ON_BACKGROUND_3,
-        width: "20px",
-        height: "20px"
-      }));
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default.createElement(EmojiListItems, {
-        parentRef: addReactionRef,
-        parentContainRef: addReactionRef,
-        closeDropdown: closeDropdown,
-        spaceFromTrigger: spaceFromTrigger
-      }, 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.createElement(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.createElement(ImageRenderer, {
-          url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
-          width: "28px",
-          height: "28px",
-          placeHolder: function (style) {
-            return /*#__PURE__*/React__default.createElement("div", {
-              style: style
-            }, /*#__PURE__*/React__default.createElement(Icon, {
-              type: IconTypes.QUESTION,
-              fillColor: IconColors.ON_BACKGROUND_3,
-              width: "28px",
-              height: "28px"
-            }));
-          }
-        }));
-      }));
-    }
-  }), isMobile && showAddReactionBadge && /*#__PURE__*/React__default.createElement(AddReactionBadgeItem, {
-    onClick: function () {
-      setShowEmojiList(true);
-    }
-  }), isMobile && showEmojiList && /*#__PURE__*/React__default.createElement(MobileEmojisBottomSheet, {
-    userId: userId,
-    message: message,
-    emojiContainer: emojiContainer,
-    hideMenu: function () {
-      setShowEmojiList(false);
-    },
-    toggleReaction: toggleReaction
-  }), isMobile && selectedEmojiKey && channel !== null && /*#__PURE__*/React__default.createElement(ReactedMembersBottomSheet, {
-    message: message,
-    channel: channel,
-    emojiKey: selectedEmojiKey,
-    hideMenu: function () {
-      setSelectedEmojiKey('');
-    },
-    emojiContainer: emojiContainer,
-    onPressUserProfileHandler: onPressUserProfile
-  }));
+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 } : _h, _j = _a.isByMe, isByMe = _j === void 0 ? false : _j, toggleReaction = _a.toggleReaction, onPressUserProfile = _a.onPressUserProfile;
+    var isMobile = useMediaQueryContext().isMobile;
+    var addReactionRef = useRef(null);
+    var _k = useState(false), showEmojiList = _k[0], setShowEmojiList = _k[1];
+    var _l = useState(''), selectedEmojiKey = _l[0], setSelectedEmojiKey = _l[1];
+    var emojisMap = 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 (React__default.createElement("div", { className: getClassName([
+            className, 'sendbird-emoji-reactions',
+            isByMe ? 'outgoing' : 'incoming',
+        ]) },
+        (((_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 (React__default.createElement(ReactionItem, { key: reaction === null || reaction === void 0 ? void 0 : reaction.key, reaction: reaction, memberNicknamesMap: memberNicknamesMap, setEmojiKey: setSelectedEmojiKey, toggleReaction: toggleReaction, emojisMap: emojisMap, channel: channel }));
+        })),
+        (!isMobile && showAddReactionBadge) && (React__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.createElement(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);
+                } },
+                React__default.createElement(Icon, { type: IconTypes.EMOJI_MORE, fillColor: IconColors.ON_BACKGROUND_3, width: "20px", height: "20px" }))); }, menuItems: function (closeDropdown) { return (React__default.createElement(EmojiListItems, { parentRef: addReactionRef, parentContainRef: addReactionRef, closeDropdown: closeDropdown, spaceFromTrigger: spaceFromTrigger }, 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 (React__default.createElement(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) },
+                    React__default.createElement(ImageRenderer, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
+                            React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+            }))); } })),
+        (isMobile && showAddReactionBadge) && (React__default.createElement(AddReactionBadgeItem, { onClick: function () {
+                setShowEmojiList(true);
+            } })),
+        (isMobile && showEmojiList) && (React__default.createElement(MobileEmojisBottomSheet, { userId: userId, message: message, emojiContainer: emojiContainer, hideMenu: function () {
+                setShowEmojiList(false);
+            }, toggleReaction: toggleReaction })),
+        (isMobile && selectedEmojiKey && channel !== null) && (React__default.createElement(ReactedMembersBottomSheet, { message: message, channel: channel, emojiKey: selectedEmojiKey, hideMenu: function () {
+                setSelectedEmojiKey('');
+            }, emojiContainer: emojiContainer, onPressUserProfileHandler: onPressUserProfile }))));
 };
 
 export { EmojiReactions as default };