@sendbird/uikit-react 3.6.3 → 3.6.4-rc-0

package/cjs/ui/ContextMenu.js

@@ -1,305 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-a2f03c55.js');
-var reactDom = require('react-dom');
-var ui_SortByRow = require('./SortByRow.js');
-var index = require('../index-f4d89559.js');
-var ui_Label = require('../index-347004c1.js');
-require('../uuid-3462be83.js');
-require('../utils/message/getOutgoingMessageState.js');
-require('prop-types');
-require('../stringSet-b0d09ab2.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-// padding to handle height of last item in message-list
-const HEIGHT_PADDING = 60;
-class MenuItems$1 extends React__default["default"].Component {
-  constructor(props) {
-    super(props);
-    _rollupPluginBabelHelpers._defineProperty(this, "menuRef", /*#__PURE__*/React__default["default"].createRef());
-    _rollupPluginBabelHelpers._defineProperty(this, "setupEvents", () => {
-      const {
-        closeDropdown
-      } = this.props;
-      const {
-        menuRef
-      } = this;
-      const handleClickOutside = event => {
-        var _menuRef$current, _menuRef$current$cont;
-        if (menuRef !== null && menuRef !== void 0 && menuRef.current && !(menuRef !== null && menuRef !== void 0 && (_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && (_menuRef$current$cont = _menuRef$current.contains) !== null && _menuRef$current$cont !== void 0 && _menuRef$current$cont.call(_menuRef$current, event.target))) {
-          closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
-        }
-      };
-      this.setState({
-        handleClickOutside
-      });
-      document.addEventListener('mousedown', handleClickOutside);
-    });
-    _rollupPluginBabelHelpers._defineProperty(this, "cleanUpEvents", () => {
-      const {
-        handleClickOutside
-      } = this.state;
-      document.removeEventListener('mousedown', handleClickOutside);
-    });
-    _rollupPluginBabelHelpers._defineProperty(this, "getMenuPosition", () => {
-      var _parentRef$current, _parentRef$current$ge;
-      const {
-        parentRef,
-        openLeft
-      } = this.props;
-      const parentRect = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : (_parentRef$current$ge = _parentRef$current.getBoundingClientRect) === null || _parentRef$current$ge === void 0 ? void 0 : _parentRef$current$ge.call(_parentRef$current);
-      const x = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0;
-      const y = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0;
-      const menuStyle = {
-        top: y,
-        left: x
-      };
-      if (!this.menuRef.current) return menuStyle;
-      const {
-        innerWidth,
-        innerHeight
-      } = window;
-      const rect = this.menuRef.current.getBoundingClientRect();
-      if (y + rect.height + HEIGHT_PADDING > innerHeight) {
-        menuStyle.top -= rect.height;
-      }
-      if (x + rect.width > innerWidth && !openLeft) {
-        menuStyle.left -= rect.width;
-      }
-      if (menuStyle.top < 0) {
-        menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
-      }
-      menuStyle.top += 32;
-      if (openLeft) {
-        const padding = Number.isNaN(rect.width - 30) ? 108 // default
-        : rect.width - 30;
-        menuStyle.left -= padding;
-      }
-      // warning: this section has to be executed after the openLeft is calculated
-      // menu is outside viewport
-      if (menuStyle.left < 0) {
-        menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
-      }
-      this.setState({
-        menuStyle
-      });
-      return menuStyle;
-    });
-    this.state = {
-      menuStyle: {},
-      handleClickOutside: () => {/* noop */}
-    };
-  }
-  componentDidMount() {
-    this.setupEvents();
-    this.getMenuPosition();
-  }
-  componentWillUnmount() {
-    this.cleanUpEvents();
-  }
-  render() {
-    var _this$props;
-    const {
-      menuStyle
-    } = this.state;
-    const {
-      children,
-      style,
-      className = ''
-    } = this.props;
-    return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
-      className: (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.className
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "sendbird-dropdown__menu-backdrop"
-    }), /*#__PURE__*/React__default["default"].createElement("ul", {
-      className: `${className} sendbird-dropdown__menu`,
-      ref: this.menuRef,
-      style: _rollupPluginBabelHelpers._objectSpread2({
-        display: 'inline-block',
-        position: 'fixed',
-        left: `${Math.round(menuStyle.left)}px`,
-        top: `${Math.round(menuStyle.top)}px`
-      }, style)
-    }, children)), document.getElementById('sendbird-dropdown-portal'));
-  }
-}
-
-const defaultParentRect = {
-  x: 0,
-  y: 0,
-  left: 0,
-  top: 0,
-  height: 0
-};
-const EmojiListItems$1 = _ref => {
-  let {
-    children,
-    parentRef,
-    parentContainRef,
-    spaceFromTrigger = {
-      x: 0,
-      y: 0
-    },
-    closeDropdown
-  } = _ref;
-  const [reactionStyle, setReactionStyle] = React.useState({
-    left: 0,
-    top: 0
-  });
-  const reactionRef = React.useRef(null);
-
-  /* showParent & hideParent */
-  React.useEffect(() => {
-    if (parentContainRef && parentContainRef !== null && parentContainRef !== void 0 && parentContainRef.current) {
-      parentContainRef.current.classList.add('sendbird-reactions--pressed');
-    }
-    return () => {
-      if (parentContainRef && parentContainRef !== null && parentContainRef !== void 0 && parentContainRef.current) {
-        parentContainRef.current.classList.remove('sendbird-reactions--pressed');
-      }
-    };
-  }, []);
-
-  /* setupEvents & cleanupEvents */
-  React.useEffect(() => {
-    const handleClickOutSide = event => {
-      var _reactionRef$current, _reactionRef$current$;
-      if (reactionRef !== null && reactionRef !== void 0 && reactionRef.current && !(reactionRef !== null && reactionRef !== void 0 && (_reactionRef$current = reactionRef.current) !== null && _reactionRef$current !== void 0 && (_reactionRef$current$ = _reactionRef$current.contains) !== null && _reactionRef$current$ !== void 0 && _reactionRef$current$.call(_reactionRef$current, event.target))) {
-        closeDropdown();
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutSide);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutSide);
-    };
-  }, []);
-
-  /* getBarPosition */
-  React.useEffect(() => {
-    var _parentRef$current$ge, _parentRef$current;
-    const spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
-    const spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
-    const parentRect = (_parentRef$current$ge = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect()) !== null && _parentRef$current$ge !== void 0 ? _parentRef$current$ge : defaultParentRect;
-    const x = parentRect.x || parentRect.left;
-    const y = parentRect.y || parentRect.top;
-    const reactionStyle = {
-      top: y,
-      left: x
-    };
-    if (!(reactionRef !== null && reactionRef !== void 0 && reactionRef.current)) {
-      setReactionStyle(reactionStyle);
-    } else {
-      var _reactionRef$current2;
-      const rect = reactionRef === null || reactionRef === void 0 ? void 0 : (_reactionRef$current2 = reactionRef.current) === null || _reactionRef$current2 === void 0 ? void 0 : _reactionRef$current2.getBoundingClientRect();
-      if (reactionStyle.top < rect.height) {
-        reactionStyle.top += parentRect.height;
-        reactionStyle.top += spaceFromTriggerY;
-      } else {
-        reactionStyle.top -= rect.height;
-        reactionStyle.top -= spaceFromTriggerY;
-      }
-      reactionStyle.left -= rect.width / 2;
-      reactionStyle.left += parentRect.height / 2 - 2;
-      reactionStyle.left += spaceFromTriggerX;
-      const maximumLeft = window.innerWidth - rect.width;
-      if (maximumLeft < reactionStyle.left) {
-        reactionStyle.left = maximumLeft;
-      }
-      if (reactionStyle.left < 0) {
-        reactionStyle.left = 0;
-      }
-      setReactionStyle(reactionStyle);
-    }
-  }, []);
-  const rootElement = document.getElementById('sendbird-emoji-list-portal');
-  if (rootElement) {
-    return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "sendbird-dropdown__menu-backdrop"
-    }), /*#__PURE__*/React__default["default"].createElement("ul", {
-      className: "sendbird-dropdown__reaction-bar",
-      ref: reactionRef,
-      style: {
-        display: 'inline-block',
-        position: 'fixed',
-        left: `${Math.round(reactionStyle.left)}px`,
-        top: `${Math.round(reactionStyle.top)}px`
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(ui_SortByRow, {
-      className: "sendbird-dropdown__reaction-bar__row",
-      maxItemCount: 8,
-      itemWidth: 44,
-      itemHeight: 40
-    }, children))), rootElement);
-  }
-  return null;
-};
-
-const ENTER_KEY = 13;
-const MenuItems = MenuItems$1;
-const EmojiListItems = EmojiListItems$1;
-const MenuItem = _ref => {
-  let {
-    className = '',
-    children,
-    onClick,
-    disable = false,
-    dataSbId = ''
-  } = _ref;
-  const handleClickEvent = e => {
-    if (!disable && onClick) {
-      onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    }
-  };
-  return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: index.getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : '']),
-    role: "menuitem",
-    "aria-disabled": disable ? true : false,
-    onClick: handleClickEvent,
-    onKeyPress: e => {
-      if (e.keyCode === ENTER_KEY) handleClickEvent(e);
-    },
-    tabIndex: 0,
-    "data-sb-id": dataSbId
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    className: "sendbird-dropdown__menu-item__text",
-    type: ui_Label.LabelTypography.SUBTITLE_2,
-    color: disable ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
-  }, children));
-};
-const MenuRoot = () => /*#__PURE__*/React__default["default"].createElement("div", {
-  id: "sendbird-dropdown-portal",
-  className: "sendbird-dropdown-portal"
-});
-
-// For the test environment
-const EmojiReactionListRoot = () => /*#__PURE__*/React__default["default"].createElement("div", {
-  id: "sendbird-emoji-list-portal"
-});
-function ContextMenu(_ref2) {
-  let {
-    menuTrigger,
-    menuItems,
-    isOpen
-  } = _ref2;
-  const [showMenu, setShowMenu] = React.useState(false);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-context-menu",
-    style: {
-      display: 'inline'
-    }
-  }, menuTrigger === null || menuTrigger === void 0 ? void 0 : menuTrigger(() => setShowMenu(!showMenu)), (showMenu || isOpen) && menuItems(() => setShowMenu(false)));
-}
-
-exports.EmojiListItems = EmojiListItems;
-exports.EmojiReactionListRoot = EmojiReactionListRoot;
-exports.MenuItem = MenuItem;
-exports.MenuItems = MenuItems;
-exports.MenuRoot = MenuRoot;
-exports["default"] = ContextMenu;
-//# sourceMappingURL=ContextMenu.js.map

package/cjs/ui/DateSeparator.js

@@ -1,34 +0,0 @@
-'use strict';
-
-var React = require('react');
-var color = require('../color-e2978317.js');
-var ui_Label = require('../index-347004c1.js');
-require('prop-types');
-require('../stringSet-b0d09ab2.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const DateSeparator = _ref => {
-  let {
-    children = null,
-    className = '',
-    separatorColor = color.Colors.ONBACKGROUND_4
-  } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-separator'].join(' ')
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: ['sendbird-separator__left', `${color.changeColorToClassName(separatorColor)}--background-color`].join(' ')
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-separator__text"
-  }, children || /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    type: ui_Label.LabelTypography.CAPTION_2,
-    color: ui_Label.LabelColors.ONBACKGROUND_2
-  }, "Date Separator")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: ['sendbird-separator__right', `${color.changeColorToClassName(separatorColor)}--background-color`].join(' ')
-  }));
-};
-
-module.exports = DateSeparator;
-//# sourceMappingURL=DateSeparator.js.map

package/cjs/ui/EmojiReactions.js

@@ -1,335 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ui_ReactionBadge = require('./ReactionBadge.js');
-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-f4d89559.js');
-var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../index-347004c1.js');
-var ui_UserListItem = require('./UserListItem.js');
-var ui_Tooltip = require('./Tooltip.js');
-var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../MediaQueryContext-aea0ce1a.js');
-var useLongPress = require('../useLongPress-d2e3654f.js');
-var LocalizationContext = require('../LocalizationContext-c014018b.js');
-var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var Message_context = require('../Message/context.js');
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-a2f03c55.js');
-require('../utils-29b5d4dd.js');
-require('prop-types');
-require('react-dom');
-require('./SortByRow.js');
-require('../uuid-3462be83.js');
-require('../utils/message/getOutgoingMessageState.js');
-require('../stringSet-b0d09ab2.js');
-require('../index-fea92ea0.js');
-require('../UserProfileContext-218e40b8.js');
-require('./Avatar.js');
-require('./MutedAvatarOverlay.js');
-require('./Checkbox.js');
-require('./UserProfile.js');
-require('../sendbirdSelectors.js');
-require('../topics-d64c7836.js');
-require('./Button.js');
-require('../index-035bdafb.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);
-  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);
-    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: () => {
-        setSelectedEmoji(reaction.key);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
-      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"
-      }))
-    }), /*#__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
-    }, reaction.userIds.length));
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    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"
-  })))));
-};
-
-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 = () => {
-    setEmojiKey('');
-    toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, reaction.key, reactedByMe);
-  };
-  const longPress = useLongPress.useLongPress({
-    onLongPress: () => {
-      setEmojiKey(reaction.key);
-    },
-    onClick: handleOnClick
-  }, {
-    shouldPreventDefault: true,
-    shouldStopPropagation: true
-  });
-  return /*#__PURE__*/React__default["default"].createElement(ui_TooltipWrapper, {
-    className: "sendbird-emoji-reactions__reaction-badge",
-    hoverTooltip: showHoverTooltip ? /*#__PURE__*/React__default["default"].createElement(ui_Tooltip, null, index.getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null)
-  }, /*#__PURE__*/React__default["default"].createElement("div", isMobile ? longPress : {
-    onClick: handleOnClick
-  }, /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
-    count: reaction.userIds.length,
-    selected: reactedByMe
-  }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
-    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) || '',
-    width: "20px",
-    height: "20px",
-    defaultComponent: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-      width: "20px",
-      height: "20px",
-      type: ui_Icon.IconTypes.QUESTION
-    })
-  }))));
-}
-
-const AddReactionBadgeItem = _ref => {
-  let {
-    onClick
-  } = _ref;
-  const onlyClick = useLongPress.useLongPress({
-    onLongPress: () => {/* noop */},
-    onClick
-  }, {
-    shouldPreventDefault: true,
-    shouldStopPropagation: true
-  });
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
-    className: "sendbird-emoji-reactions__add-reaction-badge"
-  }, onlyClick), /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
-    isAdd: true
-  }, /*#__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"
-  })));
-};
-
-const MobileEmojisBottomSheet = _ref => {
-  let {
-    userId,
-    message,
-    emojiContainer,
-    hideMenu,
-    toggleReaction
-  } = _ref;
-  const emojiAllList = React.useMemo(() => {
-    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;
-    return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
-      key: emoji.key,
-      width: "44px",
-      height: "44px",
-      selected: isReacted,
-      onClick: 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}`
-    }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
-      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"
-      }))
-    }));
-  })));
-};
-
-const EmojiReactions = _ref => {
-  var _message$reactions$le, _message$reactions, _message$reactions$le2, _message$reactions2, _message$reactions3;
-  let {
-    className = '',
-    userId,
-    message,
-    channel,
-    emojiContainer,
-    memberNicknamesMap,
-    spaceFromTrigger = {
-      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;
-  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 => {
-    return /*#__PURE__*/React__default["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["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, {
-        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,
-          width: "28px",
-          height: "28px"
-        }))
-      }));
-    }))
-  }), isMobile && showAddReactionBadge && /*#__PURE__*/React__default["default"].createElement(AddReactionBadgeItem, {
-    onClick: () => {
-      setShowEmojiList(true);
-    }
-  }), isMobile && showEmojiList && /*#__PURE__*/React__default["default"].createElement(MobileEmojisBottomSheet, {
-    userId: userId,
-    message: message,
-    emojiContainer: emojiContainer,
-    hideMenu: () => {
-      setShowEmojiList(false);
-    },
-    toggleReaction: toggleReaction
-  }), isMobile && selectedEmojiKey && channel !== null && /*#__PURE__*/React__default["default"].createElement(ReactedMembersBottomSheet, {
-    message: message,
-    channel: channel,
-    emojiKey: selectedEmojiKey,
-    hideMenu: () => {
-      setSelectedEmojiKey('');
-    },
-    emojiContainer: emojiContainer
-  }));
-};
-
-module.exports = EmojiReactions;
-//# sourceMappingURL=EmojiReactions.js.map