@sendbird/uikit-react 3.4.0-rc.1 → 3.4.0-rc.2

package/Channel/components/MessageList.js

@@ -0,0 +1,260 @@
+import React__default, { useState, useMemo } from 'react';
+import { i as isSameDay } from '../../index-00eb27a6.js';
+import { u as useChannelContext, c as compareMessagesForGrouping, i as isAboutSame } from '../../ChannelProvider-def8e42f.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-86034384.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import Message from './Message.js';
+import '../../index-6ccea9a6.js';
+import '../../index-757a563a.js';
+import '../../UserProfileContext-dd096494.js';
+import 'prop-types';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-3e5825fa.js';
+import '../../topics-9fbe0d61.js';
+import '../../index-8ee9e1f5.js';
+import '../../tslib.es6-cd680863.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../compareIds-c8335d61.js';
+import '../../const-e27598a1.js';
+import '@sendbird/chat/groupChannel';
+import '../../uuid-9f7da91d.js';
+import '@sendbird/chat/message';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../index-67c5e94c.js';
+import '../../stringSet-ad8993d1.js';
+import '../../ui/ReactionButton.js';
+import '../../ui/ImageRenderer.js';
+import '../../consts-886b25ca.js';
+import '../../LocalizationContext-a6aa8be8.js';
+import '../../ui/Loader.js';
+import './SuggestedMentionList.js';
+import '../../ui/Avatar.js';
+import '../../const-a965f964.js';
+import '../../ThreadProvider-e0d19ff6.js';
+import '../../Thread/context/types.js';
+import '@sendbird/chat';
+import '../../ui/DateSeparator.js';
+import '../../color-ed83ffc3.js';
+import '../../ui/MessageInput.js';
+import 'react-dom/server';
+import '../../ui/IconButton.js';
+import '../../ui/Button.js';
+import '../../ui/MentionUserLabel.js';
+import '../../ui/MessageContent.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../utils-aae15fda.js';
+import '../../index-c8a147a4.js';
+import '../../index-7283bb53.js';
+import '../../ui/MessageItemMenu.js';
+import '../../types-17028dc8.js';
+import '../../ui/MessageItemReactionMenu.js';
+import '../../ui/EmojiReactions.js';
+import '../../ui/Tooltip.js';
+import '../../ui/TooltipWrapper.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/AdminMessage.js';
+import '../../ui/TextMessageItemBody.js';
+import '../../ui/Word.js';
+import '../../ui/LinkLabel.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/FileMessageItemBody.js';
+import '../../ui/TextButton.js';
+import '../../MediaQueryContext-a551e770.js';
+import '../../ui/ThumbnailMessageItemBody.js';
+import '../../ui/OGMessageItemBody.js';
+import '../../ui/UnknownMessageItemBody.js';
+import '../../ui/QuoteMessage.js';
+import '../../useLongPress-49f5ba4f.js';
+import '../../ui/BottomSheet.js';
+import '../../index-d4908e3c.js';
+import '../../ui/ThreadReplies.js';
+import '../../ui/VoiceMessageItemBody.js';
+import '../../ui/ProgressBar.js';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-a3a4b35c.js';
+import '../../VoiceRecorder/context.js';
+import '../../lame.all.js';
+import '../../ui/PlaybackTime.js';
+import './FileViewer.js';
+import './RemoveMessageModal.js';
+import '../../ui/Modal.js';
+
+var SCROLL_REF_CLASS_NAME = '.sendbird-msg--scroll-ref';
+
+var MessageList = function (props) {
+  var renderMessage = props.renderMessage,
+      renderPlaceholderEmpty = props.renderPlaceholderEmpty,
+      renderCustomSeparator = props.renderCustomSeparator;
+
+  var _a = useChannelContext(),
+      allMessages = _a.allMessages,
+      hasMorePrev = _a.hasMorePrev,
+      setInitialTimeStamp = _a.setInitialTimeStamp,
+      setAnimatedMessageId = _a.setAnimatedMessageId,
+      setHighLightedMessageId = _a.setHighLightedMessageId,
+      isMessageGroupingEnabled = _a.isMessageGroupingEnabled,
+      scrollRef = _a.scrollRef,
+      onScrollCallback = _a.onScrollCallback,
+      onScrollDownCallback = _a.onScrollDownCallback,
+      messagesDispatcher = _a.messagesDispatcher,
+      messageActionTypes = _a.messageActionTypes,
+      currentGroupChannel = _a.currentGroupChannel,
+      disableMarkAsRead = _a.disableMarkAsRead,
+      replyType = _a.replyType;
+
+  var _b = useState(0),
+      scrollBottom = _b[0],
+      setScrollBottom = _b[1];
+
+  var onScroll = function (e) {
+    var element = e.target;
+    var scrollTop = element.scrollTop,
+        clientHeight = element.clientHeight,
+        scrollHeight = element.scrollHeight;
+
+    if (scrollTop === 0) {
+      if (!hasMorePrev) {
+        return;
+      }
+
+      var nodes = scrollRef.current.querySelectorAll(SCROLL_REF_CLASS_NAME);
+      var first_1 = nodes && nodes[0];
+      onScrollCallback(function (_a) {
+        var messages = _a[0];
+
+        if (messages) {
+          // https://github.com/scabbiaza/react-scroll-position-on-updating-dom
+          // Set block to nearest to prevent unexpected scrolling from outer components
+          try {
+            first_1.scrollIntoView({
+              block: "start",
+              inline: "nearest"
+            });
+          } catch (error) {//
+          }
+        }
+      });
+    }
+
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+      onScrollDownCallback(function (_a) {
+        _a[0];
+      });
+    } // Save the lastest scroll bottom value
+
+
+    if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
+      var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+      setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight);
+    }
+
+    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+      // Mark as read if scroll is at end
+      setTimeout(function () {
+        var _a;
+
+        messagesDispatcher({
+          type: messageActionTypes.MARK_AS_READ,
+          payload: {
+            channel: currentGroupChannel
+          }
+        });
+
+        try {
+          (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.markAsRead) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
+        } catch (_b) {//
+        }
+      }, 500);
+    }
+  };
+
+  var onClickScrollBot = function () {
+    var _a, _b, _c;
+
+    setInitialTimeStamp === null || setInitialTimeStamp === void 0 ? void 0 : setInitialTimeStamp(null);
+    setAnimatedMessageId === null || setAnimatedMessageId === void 0 ? void 0 : setAnimatedMessageId(null);
+    setHighLightedMessageId === null || setHighLightedMessageId === void 0 ? void 0 : setHighLightedMessageId(null);
+
+    if (((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) > -1) {
+      scrollRef.current.scrollTop = ((_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) - ((_c = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight);
+    }
+  }; // Because every message components are re-rendered everytime by every scroll events
+
+
+  var memoizedAllMessages = useMemo(function () {
+    return allMessages.map(function (m, idx) {
+      var previousMessage = allMessages[idx - 1];
+      var nextMessage = allMessages[idx + 1];
+
+      var _a = isMessageGroupingEnabled ? compareMessagesForGrouping(previousMessage, m, nextMessage, currentGroupChannel, replyType) : [false, false],
+          chainTop = _a[0],
+          chainBottom = _a[1];
+
+      var previousMessageCreatedAt = previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.createdAt;
+      var currentCreatedAt = m.createdAt; // https://stackoverflow.com/a/41855608
+
+      var hasSeparator = !(previousMessageCreatedAt && isSameDay(currentCreatedAt, previousMessageCreatedAt));
+
+      var handleScroll = function () {
+        var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+
+        if (current) {
+          var bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+
+          if (scrollBottom < bottom) {
+            current.scrollTop += bottom - scrollBottom;
+          }
+        }
+      };
+
+      return /*#__PURE__*/React__default.createElement(Message, {
+        key: m === null || m === void 0 ? void 0 : m.messageId,
+        handleScroll: handleScroll,
+        renderMessage: renderMessage,
+        message: m,
+        hasSeparator: hasSeparator,
+        chainTop: chainTop,
+        chainBottom: chainBottom,
+        renderCustomSeparator: renderCustomSeparator
+      });
+    });
+  }, [allMessages]);
+
+  if (allMessages.length < 1) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (renderPlaceholderEmpty === null || renderPlaceholderEmpty === void 0 ? void 0 : renderPlaceholderEmpty()) || /*#__PURE__*/React__default.createElement(PlaceHolder, {
+      className: "sendbird-conversation__no-messages",
+      type: PlaceHolderTypes.NO_MESSAGES
+    }));
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-conversation__messages"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-conversation__scroll-container"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-conversation__padding"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-conversation__messages-padding",
+    ref: scrollRef,
+    onScroll: onScroll
+  }, memoizedAllMessages)), // This flag is an unmatched variable
+  scrollBottom > 1 && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-conversation__scroll-bottom-button",
+    onClick: onClickScrollBot,
+    onKeyDown: onClickScrollBot,
+    tabIndex: 0,
+    role: "button"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    width: "24px",
+    height: "24px",
+    type: IconTypes.CHEVRON_DOWN,
+    fillColor: IconColors.PRIMARY
+  })));
+};
+
+export { MessageList as default };
+//# sourceMappingURL=MessageList.js.map

package/Channel/components/RemoveMessageModal.js

@@ -0,0 +1,60 @@
+import React__default, { useContext } from 'react';
+import Modal from '../../ui/Modal.js';
+import { ButtonTypes } from '../../ui/Button.js';
+import { a as LocalizationContext } from '../../LocalizationContext-a6aa8be8.js';
+import { u as useChannelContext } from '../../ChannelProvider-def8e42f.js';
+import 'react-dom';
+import '../../index-d4908e3c.js';
+import '../../ui/Icon.js';
+import 'prop-types';
+import '../../ui/IconButton.js';
+import '../../tslib.es6-cd680863.js';
+import '../../index-67c5e94c.js';
+import '../../stringSet-ad8993d1.js';
+import '../../MediaQueryContext-a551e770.js';
+import '../../index-757a563a.js';
+import '../../UserProfileContext-dd096494.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-3e5825fa.js';
+import '../../index-6ccea9a6.js';
+import '../../topics-9fbe0d61.js';
+import '../../index-8ee9e1f5.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../compareIds-c8335d61.js';
+import '../../const-e27598a1.js';
+import '@sendbird/chat/groupChannel';
+import '../../uuid-9f7da91d.js';
+import '@sendbird/chat/message';
+import '../../ui/ContextMenu.js';
+import '../../ui/SortByRow.js';
+import '../../ui/ReactionButton.js';
+import '../../ui/ImageRenderer.js';
+import '../../consts-886b25ca.js';
+
+var RemoveMessage = function (props) {
+  var _a;
+
+  var _b = props.onSubmit,
+      onSubmit = _b === void 0 ? function () {} : _b,
+      onCancel = props.onCancel,
+      message = props.message;
+  var stringSet = useContext(LocalizationContext).stringSet;
+  var deleteMessage = useChannelContext().deleteMessage;
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    type: ButtonTypes.DANGER,
+    disabled: ((_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) > 0,
+    onCancel: onCancel,
+    onSubmit: function () {
+      deleteMessage(message).then(function () {
+        onSubmit();
+        onCancel();
+      });
+    },
+    submitText: stringSet.MESSAGE_MENU__DELETE,
+    titleText: stringSet.MODAL__DELETE_MESSAGE__TITLE
+  });
+};
+
+export { RemoveMessage as default };
+//# sourceMappingURL=RemoveMessageModal.js.map

package/Channel/components/SuggestedMentionList.js

@@ -0,0 +1,314 @@
+import React__default, { useRef, useContext, useEffect, useMemo, useState } from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-67c5e94c.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import Avatar from '../../ui/Avatar.js';
+import { a as LocalizationContext } from '../../LocalizationContext-a6aa8be8.js';
+import { u as uuidv4 } from '../../uuid-9f7da91d.js';
+import { u as useChannelContext } from '../../ChannelProvider-def8e42f.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import { U as USER_MENTION_TEMP_CHAR, M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-e27598a1.js';
+import { M as MessageInputKeys } from '../../const-a965f964.js';
+import { u as useThreadContext } from '../../ThreadProvider-e0d19ff6.js';
+import 'prop-types';
+import '../../stringSet-ad8993d1.js';
+import '../../tslib.es6-cd680863.js';
+import '../../ui/ImageRenderer.js';
+import '../../index-757a563a.js';
+import '../../UserProfileContext-dd096494.js';
+import '../../index-6ccea9a6.js';
+import '../../topics-9fbe0d61.js';
+import '../../index-8ee9e1f5.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../_rollupPluginBabelHelpers-3e5825fa.js';
+import '../../compareIds-c8335d61.js';
+import '@sendbird/chat/groupChannel';
+import '@sendbird/chat/message';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../ui/ReactionButton.js';
+import '../../consts-886b25ca.js';
+import '../../withSendbird.js';
+import '../../Thread/context/types.js';
+import '@sendbird/chat';
+
+function SuggestedUserMentionItem(props) {
+  var member = props.member,
+      _a = props.isFocused,
+      isFocused = _a === void 0 ? false : _a,
+      parentScrollRef = props.parentScrollRef,
+      onClick = props.onClick,
+      onMouseOver = props.onMouseOver,
+      onMouseMove = props.onMouseMove,
+      renderUserMentionItem = props.renderUserMentionItem;
+  var scrollRef = useRef(null);
+  var _b = useContext(LocalizationContext).stringSet,
+      stringSet = _b === void 0 ? {} : _b;
+  useEffect(function () {
+    var _a, _b, _c, _d, _e, _f, _g;
+
+    if (isFocused) {
+      if (((_a = parentScrollRef === null || parentScrollRef === void 0 ? void 0 : parentScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) >= ((_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop)) {
+        (_c = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
+          block: "nearest",
+          inline: "nearest"
+        });
+      } else if (((_d = parentScrollRef === null || parentScrollRef === void 0 ? void 0 : parentScrollRef.current) === null || _d === void 0 ? void 0 : _d.scrollTop) + ((_e = parentScrollRef === null || parentScrollRef === void 0 ? void 0 : parentScrollRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) <= ((_f = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _f === void 0 ? void 0 : _f.offsetTop)) {
+        (_g = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _g === void 0 ? void 0 : _g.scrollIntoView({
+          block: "nearest",
+          inline: "nearest"
+        });
+      }
+    }
+  }, [isFocused]);
+  var customMentionItem = useMemo(function () {
+    if (renderUserMentionItem) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "sendbird-mention-suggest-list__user-item",
+        onClick: function (event) {
+          return onClick === null || onClick === void 0 ? void 0 : onClick({
+            event: event,
+            member: member,
+            itemRef: scrollRef
+          });
+        },
+        onMouseOver: function (event) {
+          return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver({
+            event: event,
+            member: member,
+            itemRef: scrollRef
+          });
+        },
+        onMouseMove: function (event) {
+          return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove({
+            event: event,
+            member: member,
+            itemRef: scrollRef
+          });
+        },
+        key: (member === null || member === void 0 ? void 0 : member.userId) || uuidv4(),
+        ref: scrollRef
+      }, renderUserMentionItem({
+        user: member
+      }));
+    }
+  }, [renderUserMentionItem]);
+
+  if (customMentionItem) {
+    return customMentionItem;
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-mention-suggest-list__user-item ".concat(isFocused ? 'focused' : ''),
+    onClick: function (event) {
+      return onClick === null || onClick === void 0 ? void 0 : onClick({
+        event: event,
+        member: member,
+        itemRef: scrollRef
+      });
+    },
+    onMouseOver: function (event) {
+      return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver({
+        event: event,
+        member: member,
+        itemRef: scrollRef
+      });
+    },
+    onMouseMove: function (event) {
+      return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove({
+        event: event,
+        member: member,
+        itemRef: scrollRef
+      });
+    },
+    key: (member === null || member === void 0 ? void 0 : member.userId) || uuidv4(),
+    ref: scrollRef
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    className: "sendbird-mention-suggest-list__user-item__avatar",
+    src: member === null || member === void 0 ? void 0 : member.profileUrl,
+    alt: "user-profile",
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-mention-suggest-list__user-item__nickname",
+    type: LabelTypography.SUBTITLE_2,
+    color: (member === null || member === void 0 ? void 0 : member.nickname) ? LabelColors.ONBACKGROUND_1 : LabelColors.ONBACKGROUND_3
+  }, (member === null || member === void 0 ? void 0 : member.nickname) || (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MENTION_NAME__NO_NAME)), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-mention-suggest-list__user-item__user-id",
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, member === null || member === void 0 ? void 0 : member.userId));
+}
+
+var DEBOUNCING_TIME = 300;
+
+function SuggestedMentionList(props) {
+  var _a, _b, _c, _d, _e;
+
+  var className = props.className,
+      _f = props.targetNickname,
+      targetNickname = _f === void 0 ? '' : _f,
+      // memberListQuery,
+  onUserItemClick = props.onUserItemClick,
+      onFocusItemChange = props.onFocusItemChange,
+      onFetchUsers = props.onFetchUsers,
+      renderUserMentionItem = props.renderUserMentionItem,
+      inputEvent = props.inputEvent,
+      _g = props.ableAddMention,
+      ableAddMention = _g === void 0 ? true : _g,
+      _h = props.maxMentionCount,
+      maxMentionCount = _h === void 0 ? MAX_USER_MENTION_COUNT : _h,
+      _j = props.maxSuggestionCount,
+      maxSuggestionCount = _j === void 0 ? MAX_USER_SUGGESTION_COUNT : _j;
+  var currentGroupChannel = (_a = useChannelContext === null || useChannelContext === void 0 ? void 0 : useChannelContext()) === null || _a === void 0 ? void 0 : _a.currentGroupChannel;
+  var currentChannel = (_b = useThreadContext === null || useThreadContext === void 0 ? void 0 : useThreadContext()) === null || _b === void 0 ? void 0 : _b.currentChannel;
+  var channelInstance = currentGroupChannel || currentChannel;
+
+  var _k = useSendbirdStateContext(),
+      config = _k.config,
+      stores = _k.stores;
+
+  var logger = config.logger;
+  var currentUserId = ((_e = (_d = (_c = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk) === null || _d === void 0 ? void 0 : _d.currentUser) === null || _e === void 0 ? void 0 : _e.userId) || '';
+  var scrollRef = useRef(null);
+  var stringSet = useContext(LocalizationContext).stringSet;
+
+  var _l = useState(null),
+      timer = _l[0],
+      setTimer = _l[1];
+
+  var _m = useState(''),
+      searchString = _m[0],
+      setSearchString = _m[1];
+
+  var _o = useState(''),
+      lastSearchString = _o[0],
+      setLastSearchString = _o[1];
+
+  var _p = useState(null),
+      currentUser = _p[0],
+      setCurrentUser = _p[1];
+
+  var _q = useState([]),
+      currentMemberList = _q[0],
+      setCurrentMemberList = _q[1];
+
+  useEffect(function () {
+    clearTimeout(timer);
+    setTimer(setTimeout(function () {
+      setSearchString(targetNickname);
+    }, DEBOUNCING_TIME));
+  }, [targetNickname]);
+  useEffect(function () {
+    if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === MessageInputKeys.Enter) {
+      if (currentMemberList.length > 0) {
+        onUserItemClick(currentUser);
+      }
+    }
+
+    if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === MessageInputKeys.ArrowUp) {
+      var currentUserIndex = currentMemberList.findIndex(function (member) {
+        return (member === null || member === void 0 ? void 0 : member.userId) === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+      });
+
+      if (0 < currentUserIndex) {
+        setCurrentUser(currentMemberList[currentUserIndex - 1]);
+        onFocusItemChange(currentMemberList[currentUserIndex - 1]);
+      }
+    }
+
+    if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === MessageInputKeys.ArrowDown) {
+      var currentUserIndex = currentMemberList.findIndex(function (member) {
+        return (member === null || member === void 0 ? void 0 : member.userId) === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+      });
+
+      if (currentUserIndex < currentMemberList.length - 1) {
+        setCurrentUser(currentMemberList[currentUserIndex + 1]);
+        onFocusItemChange(currentMemberList[currentUserIndex + 1]);
+      }
+    }
+  }, [inputEvent]);
+  /* Fetch member list */
+
+  useEffect(function () {
+    if (!(channelInstance === null || channelInstance === void 0 ? void 0 : channelInstance.createMemberListQuery)) {
+      logger.warning('SuggestedMentionList: Creating member list query failed');
+      return;
+    }
+
+    if (lastSearchString && searchString.indexOf(lastSearchString) === 0 && currentMemberList.length === 0) {
+      // Don't need to request query again
+      return;
+    }
+
+    var query = channelInstance === null || channelInstance === void 0 ? void 0 : channelInstance.createMemberListQuery({
+      limit: maxSuggestionCount + 1,
+      nicknameStartsWithFilter: searchString.slice(USER_MENTION_TEMP_CHAR.length)
+    }); // Add member list query for customization
+
+    query.next().then(function (memberList) {
+      var suggestingMembers = memberList.filter(function (member) {
+        return currentUserId !== (member === null || member === void 0 ? void 0 : member.userId);
+      }).slice(0, maxSuggestionCount);
+
+      if (suggestingMembers.length < 1) {
+        logger.info('SuggestedMentionList: Fetched member list is empty');
+      } else {
+        logger.info('SuggestedMentionList: Fetching member list succeeded', {
+          memberListQuery: query,
+          memberList: suggestingMembers
+        });
+        setCurrentUser(suggestingMembers[0]);
+      }
+
+      setLastSearchString(searchString);
+      onFetchUsers(suggestingMembers);
+      setCurrentMemberList(suggestingMembers);
+    }).catch(function (error) {
+      if (error) {
+        logger.error('SuggestedMentionList: Fetching member list failed', error);
+      }
+    });
+  }, [channelInstance === null || channelInstance === void 0 ? void 0 : channelInstance.url, searchString]);
+
+  if (!ableAddMention && currentMemberList.length === 0) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-mention-suggest-list ".concat(className),
+    key: "sendbird-mention-suggest-list",
+    ref: scrollRef
+  }, ableAddMention && (currentMemberList === null || currentMemberList === void 0 ? void 0 : currentMemberList.map(function (member) {
+    return /*#__PURE__*/React__default.createElement(SuggestedUserMentionItem, {
+      key: (member === null || member === void 0 ? void 0 : member.userId) || uuidv4(),
+      member: member,
+      isFocused: (member === null || member === void 0 ? void 0 : member.userId) === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId),
+      parentScrollRef: scrollRef,
+      onClick: function (_a) {
+        var member = _a.member;
+        onUserItemClick(member);
+      },
+      onMouseOver: function (_a) {
+        var member = _a.member;
+        setCurrentUser(member);
+      },
+      renderUserMentionItem: renderUserMentionItem
+    });
+  })), !ableAddMention && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-mention-suggest-list__notice-item"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-mention-suggest-list__notice-item__icon",
+    type: IconTypes.INFO,
+    fillColor: IconColors.ON_BACKGROUND_2,
+    width: "20px",
+    height: "20px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-mention-suggest-list__notice-item__text",
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, stringSet.MENTION_COUNT__OVER_LIMIT.replace('%d', maxMentionCount))));
+}
+
+export { SuggestedMentionList as default };
+//# sourceMappingURL=SuggestedMentionList.js.map