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

package/Channel/components/MessageList.js

@@ -0,0 +1,356 @@
+import React__default, { useState, useEffect } from 'react';
+import { c as compareMessagesForGrouping, u as useChannelContext, i as isAboutSame } from '../../ChannelProvider-c7f50a33.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-bc1c23e0.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import Message from './Message.js';
+import { i as isSameDay } from '../../index-3d2ee6a8.js';
+import UnreadCount from './UnreadCount.js';
+import FrozenNotification from './FrozenNotification.js';
+import { S as SCROLL_BUFFER } from '../../consts-2ec945b5.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import { MessageProvider } from '../../Message/context.js';
+import { u as useDebounce, a as useHandleOnScrollCallback } from '../../index-df56bbc1.js';
+import '../../UserProfileContext-0041c5c2.js';
+import 'prop-types';
+import '../../const-3f1a5fb8.js';
+import '../../index-ecf0b823.js';
+import '../../index-b596c800.js';
+import '../../topics-86131d90.js';
+import '../../index-42dda0be.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../compareIds-d6cffb6b.js';
+import '@sendbird/chat/groupChannel';
+import '../../uuid-d94880c0.js';
+import '@sendbird/chat/message';
+import '../../resolvedReplyType-11088903.js';
+import '../../LocalizationContext-53fdaf30.js';
+import '../../stringSet-63246007.js';
+import '../../index-20f528de.js';
+import '../../ui/Loader.js';
+import './SuggestedMentionList.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../const-c6786399.js';
+import '../../ThreadProvider-da7e379f.js';
+import '../../Thread/context/types.js';
+import '@sendbird/chat';
+import '../../ui/DateSeparator.js';
+import '../../color-4e19bb80.js';
+import '../../ui/MessageInput.js';
+import '../../ui/IconButton.js';
+import '../../ui/Button.js';
+import 'dompurify';
+import '../../consts-876e7a4b.js';
+import '../../consts-72f79e08.js';
+import '../../consts-45aa8134.js';
+import '../../tokenize-ca9f78c1.js';
+import '../../index.module-dea47541.js';
+import '../../ui/MessageContent.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../utils-b0301443.js';
+import '../../index-7313384f.js';
+import '../../index-06f76dfb.js';
+import '../../ui/MessageItemMenu.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../types-577ceca6.js';
+import '../../ui/MessageItemReactionMenu.js';
+import '../../ui/ReactionButton.js';
+import '../../useLongPress-2fd9d19f.js';
+import '../../MediaQueryContext-6fca0d36.js';
+import '../../ui/EmojiReactions.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/BottomSheet.js';
+import '../../index-869e67e8.js';
+import '../../ui/UserListItem.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
+import '../../ui/Tooltip.js';
+import '../../ui/TooltipWrapper.js';
+import '../../ui/AdminMessage.js';
+import '../../ui/TextMessageItemBody.js';
+import '../../index-9dd15aad.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/LinkLabel.js';
+import '../../ui/FileMessageItemBody.js';
+import '../../ui/TextButton.js';
+import '../../ui/ThumbnailMessageItemBody.js';
+import '../../ui/OGMessageItemBody.js';
+import '../../ui/UnknownMessageItemBody.js';
+import '../../ui/QuoteMessage.js';
+import '../../index-81ed90b4.js';
+import '../../ui/ThreadReplies.js';
+import '../../ui/VoiceMessageItemBody.js';
+import '../../ui/ProgressBar.js';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-80b2a1ad.js';
+import '../../VoiceRecorder/context.js';
+import '../../ui/Modal.js';
+import '../../withSendbird.js';
+import '../../ui/PlaybackTime.js';
+import './FileViewer.js';
+import './RemoveMessageModal.js';
+import '../../useDirtyGetMentions-8b0a8d75.js';
+
+const getMessagePartsInfo = _ref => {
+  let {
+    allMessages = [],
+    isMessageGroupingEnabled = true,
+    currentIndex = 0,
+    currentMessage = null,
+    currentChannel = null,
+    replyType = ''
+  } = _ref;
+  const previousMessage = allMessages[currentIndex - 1];
+  const nextMessage = allMessages[currentIndex + 1];
+  const [chainTop, chainBottom] = isMessageGroupingEnabled ? compareMessagesForGrouping(previousMessage, currentMessage, nextMessage, currentChannel, replyType) : [false, false];
+  const previousMessageCreatedAt = previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.createdAt;
+  const currentCreatedAt = currentMessage.createdAt;
+  // https://stackoverflow.com/a/41855608
+  const hasSeparator = !(previousMessageCreatedAt && isSameDay(currentCreatedAt, previousMessageCreatedAt));
+  return {
+    chainTop,
+    chainBottom,
+    hasSeparator
+  };
+};
+
+const DELAY = 500;
+function useSetScrollToBottom(_ref) {
+  let {
+    loading
+  } = _ref;
+  const [scrollBottom, setScrollBottom] = useState(0);
+  useEffect(() => {
+    if (loading) {
+      setScrollBottom(0);
+    }
+  }, [loading]);
+  const scrollCb = e => {
+    const element = e.target;
+    try {
+      setScrollBottom(element.scrollHeight - element.scrollTop - element.offsetHeight);
+    } catch (_unused) {
+      //
+    }
+  };
+  return {
+    scrollBottom,
+    scrollToBottomHandler: useDebounce(scrollCb, DELAY)
+  };
+}
+
+function useScrollBehavior() {
+  const {
+    scrollRef,
+    scrollBehavior = 'auto'
+  } = useChannelContext();
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.style.scrollBehavior = scrollBehavior;
+    }
+  }, [scrollRef.current]);
+  return null;
+}
+
+const SCROLL_BOTTOM_PADDING = 50;
+const MessageList = _ref => {
+  let {
+    className = '',
+    renderMessage,
+    renderPlaceholderEmpty,
+    renderCustomSeparator,
+    renderPlaceholderLoader
+  } = _ref;
+  const {
+    allMessages,
+    hasMorePrev,
+    hasMoreNext,
+    setInitialTimeStamp,
+    setAnimatedMessageId,
+    setHighLightedMessageId,
+    isMessageGroupingEnabled,
+    scrollRef,
+    onScrollCallback,
+    onScrollDownCallback,
+    messagesDispatcher,
+    messageActionTypes,
+    currentGroupChannel,
+    disableMarkAsRead,
+    filterMessageList,
+    replyType,
+    loading,
+    unreadSince
+  } = useChannelContext();
+  const store = useSendbirdStateContext();
+  const allMessagesFiltered = typeof filterMessageList === 'function' ? allMessages.filter(filterMessageList) : allMessages;
+  const markAsReadScheduler = store.config.markAsReadScheduler;
+  useScrollBehavior();
+  const onScroll = () => {
+    const element = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+    if (element == null) {
+      return;
+    }
+    const {
+      scrollTop,
+      clientHeight,
+      scrollHeight
+    } = element;
+    if (isAboutSame(scrollTop, 0, SCROLL_BUFFER)) {
+      onScrollCallback(messages => {
+      });
+    }
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER) && hasMoreNext) {
+      onScrollDownCallback(_ref2 => {
+      });
+    }
+    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER) && !!currentGroupChannel) {
+      messagesDispatcher({
+        type: messageActionTypes.MARK_AS_READ,
+        payload: {
+          channel: currentGroupChannel
+        }
+      });
+      markAsReadScheduler.push(currentGroupChannel);
+    }
+  };
+  const onClickScrollBot = () => {
+    var _scrollRef$current;
+    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 ((scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop) > -1) {
+      var _scrollRef$current$sc, _scrollRef$current2, _scrollRef$current$of, _scrollRef$current3;
+      scrollRef.current.scrollTop = ((_scrollRef$current$sc = scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollHeight) !== null && _scrollRef$current$sc !== void 0 ? _scrollRef$current$sc : 0) - ((_scrollRef$current$of = scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.offsetHeight) !== null && _scrollRef$current$of !== void 0 ? _scrollRef$current$of : 0);
+    }
+  };
+
+  /**
+   * 1. Move the messsage list scroll
+   *    when each message's height is changed by `reactions` OR `showEdit`
+   * 2. Keep the scrollBottom value after fetching new message list
+   */
+  const moveScroll = function () {
+    let isBottomMessageAffected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    const current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+    if (current) {
+      const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+      if (scrollBottom < bottom && (!isBottomMessageAffected || scrollBottom < SCROLL_BUFFER)) {
+        // Move the scroll as much as the height of the message has changed
+        current.scrollTop += bottom - scrollBottom;
+      }
+    }
+  };
+  const handleOnScroll = useHandleOnScrollCallback({
+    hasMore: hasMorePrev,
+    hasNext: hasMoreNext,
+    onScroll,
+    scrollRef
+  });
+  const {
+    scrollToBottomHandler,
+    scrollBottom
+  } = useSetScrollToBottom({
+    loading
+  });
+  if (loading) {
+    return typeof renderPlaceholderLoader === 'function' ? renderPlaceholderLoader() : /*#__PURE__*/React__default.createElement(PlaceHolder, {
+      type: PlaceHolderTypes.LOADING
+    });
+  }
+  if (allMessagesFiltered.length < 1) {
+    if (renderPlaceholderEmpty && typeof renderPlaceholderEmpty === 'function') {
+      return renderPlaceholderEmpty();
+    }
+    return /*#__PURE__*/React__default.createElement(PlaceHolder, {
+      className: "sendbird-conversation__no-messages",
+      type: PlaceHolderTypes.NO_MESSAGES
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `sendbird-conversation__messages ${className}`
+  }, /*#__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: e => {
+      handleOnScroll();
+      scrollToBottomHandler(e);
+    }
+  }, allMessagesFiltered.map((m, idx) => {
+    var _sender, _store$config;
+    const {
+      chainTop,
+      chainBottom,
+      hasSeparator
+    } = getMessagePartsInfo({
+      allMessages: allMessagesFiltered,
+      replyType,
+      isMessageGroupingEnabled,
+      currentIndex: idx,
+      currentMessage: m,
+      currentChannel: currentGroupChannel
+    });
+    const isByMe = (m === null || m === void 0 ? void 0 : (_sender = m.sender) === null || _sender === void 0 ? void 0 : _sender.userId) === (store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.userId);
+    return /*#__PURE__*/React__default.createElement(MessageProvider, {
+      message: m,
+      key: m === null || m === void 0 ? void 0 : m.messageId,
+      isByMe: isByMe
+    }, /*#__PURE__*/React__default.createElement(Message, {
+      handleScroll: moveScroll,
+      renderMessage: renderMessage,
+      message: m,
+      hasSeparator: hasSeparator,
+      chainTop: chainTop,
+      chainBottom: chainBottom,
+      renderCustomSeparator: renderCustomSeparator
+    }));
+  }))), (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isFrozen) && /*#__PURE__*/React__default.createElement(FrozenNotification, {
+    className: "sendbird-conversation__messages__notification"
+  }), unreadSince && /*#__PURE__*/React__default.createElement(UnreadCount, {
+    className: "sendbird-conversation__messages__notification",
+    count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount,
+    time: unreadSince,
+    onClick: () => {
+      var _scrollRef$current4;
+      if (scrollRef !== null && scrollRef !== void 0 && (_scrollRef$current4 = scrollRef.current) !== null && _scrollRef$current4 !== void 0 && _scrollRef$current4.scrollTop) {
+        var _scrollRef$current$sc2, _scrollRef$current5, _scrollRef$current$of2, _scrollRef$current6;
+        scrollRef.current.scrollTop = ((_scrollRef$current$sc2 = scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.scrollHeight) !== null && _scrollRef$current$sc2 !== void 0 ? _scrollRef$current$sc2 : 0) - ((_scrollRef$current$of2 = scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current6 = scrollRef.current) === null || _scrollRef$current6 === void 0 ? void 0 : _scrollRef$current6.offsetHeight) !== null && _scrollRef$current$of2 !== void 0 ? _scrollRef$current$of2 : 0);
+      }
+      if (!disableMarkAsRead && !!currentGroupChannel) {
+        markAsReadScheduler.push(currentGroupChannel);
+        messagesDispatcher({
+          type: messageActionTypes.MARK_AS_READ,
+          payload: {
+            channel: currentGroupChannel
+          }
+        });
+      }
+      setInitialTimeStamp(null);
+      setAnimatedMessageId(null);
+      setHighLightedMessageId(null);
+    }
+  }),
+  // This flag is an unmatched variable
+  scrollBottom > SCROLL_BOTTOM_PADDING && /*#__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-53fdaf30.js';
+import { u as useChannelContext } from '../../ChannelProvider-c7f50a33.js';
+import 'react-dom';
+import '../../index-869e67e8.js';
+import '../../ui/Icon.js';
+import 'prop-types';
+import '../../ui/IconButton.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import '../../index-20f528de.js';
+import '../../stringSet-63246007.js';
+import '../../MediaQueryContext-6fca0d36.js';
+import '../../index-b596c800.js';
+import '../../UserProfileContext-0041c5c2.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../const-3f1a5fb8.js';
+import '../../index-ecf0b823.js';
+import '../../topics-86131d90.js';
+import '../../index-42dda0be.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../compareIds-d6cffb6b.js';
+import '@sendbird/chat/groupChannel';
+import '../../uuid-d94880c0.js';
+import '@sendbird/chat/message';
+import '../../consts-2ec945b5.js';
+import '../../resolvedReplyType-11088903.js';
+
+const RemoveMessage = props => {
+  var _message$threadInfo;
+  const {
+    onSubmit = () => {/* noop */},
+    onCancel,
+    message
+  } = props;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const {
+    deleteMessage
+  } = useChannelContext();
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    type: ButtonTypes.DANGER,
+    disabled: (message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) > 0,
+    onCancel: onCancel,
+    onSubmit: () => {
+      deleteMessage(message).then(() => {
+        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,259 @@
+import React__default, { useRef, useContext, useEffect, useMemo, useState } from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-20f528de.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import Avatar from '../../ui/Avatar.js';
+import { a as LocalizationContext } from '../../LocalizationContext-53fdaf30.js';
+import { u as uuidv4 } from '../../uuid-d94880c0.js';
+import { u as useChannelContext } from '../../ChannelProvider-c7f50a33.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-3f1a5fb8.js';
+import { M as MessageInputKeys } from '../../const-c6786399.js';
+import { u as useThreadContext } from '../../ThreadProvider-da7e379f.js';
+import 'prop-types';
+import '../../stringSet-63246007.js';
+import '../../ui/ImageRenderer.js';
+import '../../index-b596c800.js';
+import '../../UserProfileContext-0041c5c2.js';
+import '../../index-ecf0b823.js';
+import '../../topics-86131d90.js';
+import '../../index-42dda0be.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../compareIds-d6cffb6b.js';
+import '@sendbird/chat/groupChannel';
+import '@sendbird/chat/message';
+import '../../consts-2ec945b5.js';
+import '../../resolvedReplyType-11088903.js';
+import '../../withSendbird.js';
+import '../../Thread/context/types.js';
+import '@sendbird/chat';
+
+function SuggestedUserMentionItem(props) {
+  const {
+    member,
+    isFocused = false,
+    parentScrollRef,
+    onClick,
+    onMouseOver,
+    onMouseMove,
+    renderUserMentionItem
+  } = props;
+  const scrollRef = useRef(null);
+  const {
+    stringSet = {}
+  } = useContext(LocalizationContext);
+  useEffect(() => {
+    if (isFocused && (parentScrollRef === null || parentScrollRef === void 0 ? void 0 : parentScrollRef.current) != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) != null && (parentScrollRef.current.scrollTop >= scrollRef.current.offsetTop || parentScrollRef.current.scrollTop + parentScrollRef.current.clientHeight <= scrollRef.current.offsetTop)) {
+      scrollRef.current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [isFocused]);
+  const customMentionItem = useMemo(() => {
+    if (renderUserMentionItem) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "sendbird-mention-suggest-list__user-item",
+        onClick: event => onClick === null || onClick === void 0 ? void 0 : onClick({
+          event,
+          member: member,
+          itemRef: scrollRef
+        }),
+        onMouseOver: event => onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver({
+          event,
+          member: member,
+          itemRef: scrollRef
+        }),
+        onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove({
+          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 ${isFocused ? 'focused' : ''}`,
+    onClick: event => onClick === null || onClick === void 0 ? void 0 : onClick({
+      event,
+      member: member,
+      itemRef: scrollRef
+    }),
+    onMouseOver: event => onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver({
+      event,
+      member: member,
+      itemRef: scrollRef
+    }),
+    onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove({
+      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 && 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));
+}
+
+const DEBOUNCING_TIME = 300;
+function SuggestedMentionList(props) {
+  var _useChannelContext, _useThreadContext, _stores$sdkStore, _stores$sdkStore$sdk, _stores$sdkStore$sdk$;
+  const {
+    className,
+    targetNickname = '',
+    // memberListQuery,
+    onUserItemClick,
+    onFocusItemChange,
+    onFetchUsers,
+    renderUserMentionItem,
+    inputEvent,
+    ableAddMention = true,
+    maxMentionCount = MAX_USER_MENTION_COUNT,
+    maxSuggestionCount = MAX_USER_SUGGESTION_COUNT
+  } = props;
+  const currentGroupChannel = useChannelContext === null || useChannelContext === void 0 ? void 0 : (_useChannelContext = useChannelContext()) === null || _useChannelContext === void 0 ? void 0 : _useChannelContext.currentGroupChannel;
+  const currentChannel = useThreadContext === null || useThreadContext === void 0 ? void 0 : (_useThreadContext = useThreadContext()) === null || _useThreadContext === void 0 ? void 0 : _useThreadContext.currentChannel;
+  const channelInstance = currentGroupChannel || currentChannel;
+  const {
+    config,
+    stores
+  } = useSendbirdStateContext();
+  const {
+    logger
+  } = config;
+  const currentUserId = (stores === null || stores === void 0 ? void 0 : (_stores$sdkStore = stores.sdkStore) === null || _stores$sdkStore === void 0 ? void 0 : (_stores$sdkStore$sdk = _stores$sdkStore.sdk) === null || _stores$sdkStore$sdk === void 0 ? void 0 : (_stores$sdkStore$sdk$ = _stores$sdkStore$sdk.currentUser) === null || _stores$sdkStore$sdk$ === void 0 ? void 0 : _stores$sdkStore$sdk$.userId) || '';
+  const scrollRef = useRef(null);
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const [timer, setTimer] = useState(null);
+  const [searchString, setSearchString] = useState('');
+  const [lastSearchString, setLastSearchString] = useState('');
+  const [currentUser, setCurrentUser] = useState(null);
+  const [currentMemberList, setCurrentMemberList] = useState([]);
+  useEffect(() => {
+    clearTimeout(timer);
+    setTimer(setTimeout(() => {
+      setSearchString(targetNickname);
+    }, DEBOUNCING_TIME));
+  }, [targetNickname]);
+  useEffect(() => {
+    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) {
+      const currentUserIndex = currentMemberList.findIndex(member => (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) {
+      const currentUserIndex = currentMemberList.findIndex(member => (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(() => {
+    if (!(channelInstance !== null && channelInstance !== 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;
+    }
+    const query = channelInstance === null || channelInstance === void 0 ? void 0 : channelInstance.createMemberListQuery({
+      limit: maxSuggestionCount + 1,
+      // because current user could be included
+      nicknameStartsWithFilter: searchString.slice(USER_MENTION_TEMP_CHAR.length)
+    });
+    // Add member list query for customization
+    query.next().then(memberList => {
+      const suggestingMembers = memberList.filter(member => 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(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 ${className}`,
+    key: "sendbird-mention-suggest-list",
+    ref: scrollRef
+  }, ableAddMention && (currentMemberList === null || currentMemberList === void 0 ? void 0 : currentMemberList.map(member => /*#__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: _ref => {
+      let {
+        member
+      } = _ref;
+      onUserItemClick(member);
+    },
+    onMouseOver: _ref2 => {
+      let {
+        member
+      } = _ref2;
+      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