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

package/ui/ContextMenu.js

@@ -0,0 +1,292 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { a as _defineProperty, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-71645d31.js';
+import { createPortal } from 'react-dom';
+import SortByRow from './SortByRow.js';
+import { h as getClassName } from '../index-42dda0be.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import '../uuid-d94880c0.js';
+import '../utils/message/getOutgoingMessageState.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+
+// padding to handle height of last item in message-list
+const HEIGHT_PADDING = 60;
+class MenuItems$1 extends React__default.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "menuRef", /*#__PURE__*/React__default.createRef());
+    _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);
+    });
+    _defineProperty(this, "cleanUpEvents", () => {
+      const {
+        handleClickOutside
+      } = this.state;
+      document.removeEventListener('mousedown', handleClickOutside);
+    });
+    _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__*/createPortal( /*#__PURE__*/React__default.createElement("div", {
+      className: (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.className
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "sendbird-dropdown__menu-backdrop"
+    }), /*#__PURE__*/React__default.createElement("ul", {
+      className: `${className} sendbird-dropdown__menu`,
+      ref: this.menuRef,
+      style: _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] = useState({
+    left: 0,
+    top: 0
+  });
+  const reactionRef = useRef(null);
+
+  /* showParent & hideParent */
+  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 */
+  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 */
+  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__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "sendbird-dropdown__menu-backdrop"
+    }), /*#__PURE__*/React__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.createElement(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.createElement("li", {
+    className: 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.createElement(Label, {
+    className: "sendbird-dropdown__menu-item__text",
+    type: LabelTypography.SUBTITLE_2,
+    color: disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
+  }, children));
+};
+const MenuRoot = () => /*#__PURE__*/React__default.createElement("div", {
+  id: "sendbird-dropdown-portal",
+  className: "sendbird-dropdown-portal"
+});
+
+// For the test environment
+const EmojiReactionListRoot = () => /*#__PURE__*/React__default.createElement("div", {
+  id: "sendbird-emoji-list-portal"
+});
+function ContextMenu(_ref2) {
+  let {
+    menuTrigger,
+    menuItems,
+    isOpen
+  } = _ref2;
+  const [showMenu, setShowMenu] = useState(false);
+  return /*#__PURE__*/React__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)));
+}
+
+export { EmojiListItems, EmojiReactionListRoot, MenuItem, MenuItems, MenuRoot, ContextMenu as default };
+//# sourceMappingURL=ContextMenu.js.map

package/ui/DateSeparator.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { C as Colors, c as changeColorToClassName } from '../color-4e19bb80.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+
+const DateSeparator = _ref => {
+  let {
+    children = null,
+    className = '',
+    separatorColor = Colors.ONBACKGROUND_4
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-separator'].join(' ')
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: ['sendbird-separator__left', `${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', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')
+  }));
+};
+
+export { DateSeparator as default };
+//# sourceMappingURL=DateSeparator.js.map

package/ui/EmojiReactions.js

@@ -0,0 +1,329 @@
+import React__default, { useState, useContext, useMemo, useRef } from 'react';
+import ReactionBadge from './ReactionBadge.js';
+import ReactionButton from './ReactionButton.js';
+import ImageRenderer from './ImageRenderer.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import ContextMenu, { EmojiListItems } from './ContextMenu.js';
+import { H as getEmojiUrl, I as isReactedBy, J as getEmojiTooltipString, G as getEmojiListAll, K as getEmojiMapAll, h as getClassName } from '../index-42dda0be.js';
+import BottomSheet from './BottomSheet.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import UserListItem from './UserListItem.js';
+import Tooltip from './Tooltip.js';
+import TooltipWrapper from './TooltipWrapper.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-6fca0d36.js';
+import { u as useLongPress } from '../useLongPress-2fd9d19f.js';
+import { a as LocalizationContext } from '../LocalizationContext-53fdaf30.js';
+import useSendbirdStateContext from '../useSendbirdStateContext.js';
+import { useMessageContext } from '../Message/context.js';
+import { b as _extends } from '../_rollupPluginBabelHelpers-71645d31.js';
+import '../utils-b0301443.js';
+import 'prop-types';
+import 'react-dom';
+import './SortByRow.js';
+import '../uuid-d94880c0.js';
+import '../utils/message/getOutgoingMessageState.js';
+import '../stringSet-63246007.js';
+import '../index-869e67e8.js';
+import '../UserProfileContext-0041c5c2.js';
+import './Avatar.js';
+import './MutedAvatarOverlay.js';
+import './Checkbox.js';
+import './UserProfile.js';
+import '../sendbirdSelectors.js';
+import '../topics-86131d90.js';
+import './Button.js';
+import '../index-b596c800.js';
+import '../withSendbird.js';
+
+const ReactedMembersBottomSheet = _ref => {
+  var _message$reactions, _message$reactions2, _message$reactions2$f;
+  let {
+    message,
+    channel,
+    emojiKey = '',
+    hideMenu,
+    emojiContainer
+  } = _ref;
+  const {
+    members = []
+  } = channel;
+  const [selectedEmoji, setSelectedEmoji] = useState(emojiKey);
+  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"
+  }, (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.map(reaction => {
+    const emojiUrl = getEmojiUrl(emojiContainer, reaction.key);
+    return /*#__PURE__*/React__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.createElement(ImageRenderer, {
+      url: emojiUrl,
+      width: "28px",
+      height: "28px",
+      placeHolder: style => /*#__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`
+  ((_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.createElement(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
+  } = useMediaQueryContext();
+  const messageStore = useMessageContext();
+  const message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const userId = store.config.userId;
+  const reactedByMe = 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({
+    onLongPress: () => {
+      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: ((_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.createElement(Icon, {
+      width: "20px",
+      height: "20px",
+      type: IconTypes.QUESTION
+    })
+  }))));
+}
+
+const AddReactionBadgeItem = _ref => {
+  let {
+    onClick
+  } = _ref;
+  const onlyClick = useLongPress({
+    onLongPress: () => {/* noop */},
+    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"
+  })));
+};
+
+const MobileEmojisBottomSheet = _ref => {
+  let {
+    userId,
+    message,
+    emojiContainer,
+    hideMenu,
+    toggleReaction
+  } = _ref;
+  const emojiAllList = useMemo(() => {
+    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(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.createElement(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.createElement(ImageRenderer, {
+      url: emoji.url,
+      width: "38px",
+      height: "38px",
+      placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
+        style: style
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.QUESTION,
+        fillColor: 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
+  } = useMediaQueryContext();
+  const addReactionRef = useRef(null);
+  const [showEmojiList, setShowEmojiList] = useState(false);
+  const [selectedEmojiKey, setSelectedEmojiKey] = useState('');
+  const emojisMap = 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.createElement("div", {
+    className: 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.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: toggleDropdown => /*#__PURE__*/React__default.createElement(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.createElement(Icon, {
+      type: IconTypes.EMOJI_MORE,
+      fillColor: IconColors.ON_BACKGROUND_3,
+      width: "20px",
+      height: "20px"
+    })),
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(EmojiListItems, {
+      parentRef: addReactionRef,
+      parentContainRef: addReactionRef,
+      closeDropdown: closeDropdown,
+      spaceFromTrigger: spaceFromTrigger
+    }, 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.createElement(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.createElement(ImageRenderer, {
+        url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
+        width: "28px",
+        height: "28px",
+        placeHolder: style => /*#__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: () => {
+      setShowEmojiList(true);
+    }
+  }), isMobile && showEmojiList && /*#__PURE__*/React__default.createElement(MobileEmojisBottomSheet, {
+    userId: userId,
+    message: message,
+    emojiContainer: emojiContainer,
+    hideMenu: () => {
+      setShowEmojiList(false);
+    },
+    toggleReaction: toggleReaction
+  }), isMobile && selectedEmojiKey && channel !== null && /*#__PURE__*/React__default.createElement(ReactedMembersBottomSheet, {
+    message: message,
+    channel: channel,
+    emojiKey: selectedEmojiKey,
+    hideMenu: () => {
+      setSelectedEmojiKey('');
+    },
+    emojiContainer: emojiContainer
+  }));
+};
+
+export { EmojiReactions as default };
+//# sourceMappingURL=EmojiReactions.js.map