@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-0

package/Channel/components/RemoveMessageModal.js

@@ -1,49 +1,52 @@
 import React__default, { useContext } from 'react';
 import Modal from '../../ui/Modal.js';
 import { ButtonTypes } from '../../ui/Button.js';
-import { a as LocalizationContext } from '../../LocalizationContext-4df0cc32.js';
-import { u as useChannelContext } from '../../ChannelProvider-554e7116.js';
+import { a as LocalizationContext } from '../../LocalizationContext-1839d2db.js';
+import { u as useChannelContext } from '../../ChannelProvider-42ea1a96.js';
 import 'react-dom';
-import '../../index-e5b78039.js';
+import '../../index-3165e396.js';
 import '../../ui/Icon.js';
 import 'prop-types';
 import '../../ui/IconButton.js';
-import '../../tslib.es6-bcead7e6.js';
-import '../../index-44470dab.js';
-import '../../stringSet-d555d877.js';
-import '../../MediaQueryContext-74183e34.js';
-import '../../index-07e060cd.js';
-import '../../UserProfileContext-c58a7b86.js';
+import '../../_rollupPluginBabelHelpers-ce69e916.js';
+import '../../index-e1cd2fcf.js';
+import '../../stringSet-d368e289.js';
+import '../../MediaQueryContext-0e0b3a1b.js';
+import '../../index-d9c12cf4.js';
+import '../../UserProfileContext-7e645551.js';
 import '../../useSendbirdStateContext.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-498add61.js';
-import '../../index-3f26a31c.js';
-import '../../topics-351ea731.js';
-import '../../index-5f08f486.js';
+import '../../index-06f34585.js';
+import '../../topics-f9628f1f.js';
+import '../../index-fd51c7d1.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../compareIds-9430f9d8.js';
-import '../../const-9d11f204.js';
+import '../../compareIds-08858dd3.js';
+import '../../const-a77c08c9.js';
 import '@sendbird/chat/groupChannel';
-import '../../uuid-286ed926.js';
+import '../../uuid-720c99c0.js';
 import '@sendbird/chat/message';
-import '../../ui/ContextMenu.js';
-import '../../ui/SortByRow.js';
-import '../../ui/ReactionButton.js';
-import '../../ui/ImageRenderer.js';
+import '../../consts-9393e7c8.js';
 
-var RemoveMessage = function (props) {
-  var _a;
-
-  var onCancel = props.onCancel,
-      message = props.message;
-  var stringSet = useContext(LocalizationContext).stringSet;
-  var deleteMessage = useChannelContext().deleteMessage;
+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: ((_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) > 0,
+    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: function () {
-      deleteMessage(message).then(function () {
+    onSubmit: () => {
+      deleteMessage(message).then(() => {
+        onSubmit();
         onCancel();
       });
     },

package/Channel/components/RemoveMessageModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoveMessageModal.js","sources":["../../../src/smart-components/Channel/components/RemoveMessageModal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport Modal from '../../../ui/Modal';\nimport { ButtonTypes } from '../../../ui/Button';\nimport { LocalizationContext } from '../../../lib/LocalizationContext';\nimport { useChannelContext } from '../context/ChannelProvider';\nimport { EveryMessage } from '../../../types';\n\nexport interface RemoveMessageProps {\n  onCancel: () => void;\n  message: EveryMessage;\n}\n\nconst RemoveMessage: React.FC<RemoveMessageProps> = (props: RemoveMessageProps) => {\n  const {\n    onCancel,\n    message,\n  } = props;\n  const { stringSet } = useContext(LocalizationContext);\n  const {\n    deleteMessage,\n  } = useChannelContext();\n  return (\n    <Modal\n      type={ButtonTypes.DANGER}\n      disabled={message?.threadInfo?.replyCount > 0}\n      onCancel={onCancel}\n      onSubmit={() => { deleteMessage(message).then(() => {\n        onCancel();\n      }) }}\n      submitText={stringSet.MESSAGE_MENU__DELETE}\n      titleText={stringSet.MODAL__DELETE_MESSAGE__TITLE}\n    />\n  );\n};\n\nexport default RemoveMessage;\n"],"names":["RemoveMessage","props","onCancel","message","stringSet","useContext","LocalizationContext","deleteMessage","useChannelContext","React","ButtonTypes","DANGER","threadInfo","_a","replyCount","then","MESSAGE_MENU__DELETE","MODAL__DELETE_MESSAGE__TITLE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,aAAa,GAAiC,UAACC,KAAD,EAA0B;;;AAE1E,EAAA,IAAAC,QAAQ,GAEND,KAAK,CAAAC,QAFP;AAAA,MACAC,OAAO,GACLF,KAAK,CAAAE,OAFP,CAAA;AAGM,EAAA,IAAAC,SAAS,GAAKC,UAAU,CAACC,mBAAD,CAAV,UAAd,CAAA;AAEN,EAAA,IAAAC,aAAa,GACXC,iBAAiB,EAAA,cADnB,CAAA;AAEF,EAAA,oBACEC,6BAAC,KAAD,EAAA;IACE,IAAI,EAAEC,WAAW,CAACC,MADpB;AAEE,IAAA,QAAQ,EAAE,CAAA,MAAAR,OAAO,KAAA,IAAP,IAAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAAA,OAAO,CAAES,UAAT,MAAqB,IAArB,IAAqBC,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqBA,EAAA,CAAAC,UAArB,IAAkC,CAF9C;AAGE,IAAA,QAAQ,EAAEZ,QAHZ;AAIE,IAAA,QAAQ,EAAE,YAAA;AAAQK,MAAAA,aAAa,CAACJ,OAAD,CAAb,CAAuBY,IAAvB,CAA4B,YAAA;QAC5Cb,QAAQ,EAAA,CAAA;OADQ,CAAA,CAAA;KAJpB;IAOE,UAAU,EAAEE,SAAS,CAACY,oBAPxB;IAQE,SAAS,EAAEZ,SAAS,CAACa,4BAAAA;GATzB,CAAA,CAAA;AAYD;;;;"}
+{"version":3,"file":"RemoveMessageModal.js","sources":["../../../src/modules/Channel/components/RemoveMessageModal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport Modal from '../../../ui/Modal';\nimport { ButtonTypes } from '../../../ui/Button';\nimport { LocalizationContext } from '../../../lib/LocalizationContext';\nimport { useChannelContext } from '../context/ChannelProvider';\nimport { EveryMessage } from '../../../types';\n\nexport interface RemoveMessageProps {\n  onSubmit?: () => void;\n  onCancel: () => void;\n  message: EveryMessage;\n}\n\nconst RemoveMessage: React.FC<RemoveMessageProps> = (props: RemoveMessageProps) => {\n  const {\n    onSubmit = () => { /* noop */ },\n    onCancel,\n    message,\n  } = props;\n  const { stringSet } = useContext(LocalizationContext);\n  const {\n    deleteMessage,\n  } = useChannelContext();\n  return (\n    <Modal\n      type={ButtonTypes.DANGER}\n      disabled={message?.threadInfo?.replyCount > 0}\n      onCancel={onCancel}\n      onSubmit={() => { deleteMessage(message).then(() => {\n        onSubmit();\n        onCancel();\n      }); }}\n      submitText={stringSet.MESSAGE_MENU__DELETE}\n      titleText={stringSet.MODAL__DELETE_MESSAGE__TITLE}\n    />\n  );\n};\n\nexport default RemoveMessage;\n"],"names":["RemoveMessage","props","_message$threadInfo","onSubmit","onCancel","message","stringSet","useContext","LocalizationContext","deleteMessage","useChannelContext","React","createElement","Modal","type","ButtonTypes","DANGER","disabled","threadInfo","replyCount","then","submitText","MESSAGE_MENU__DELETE","titleText","MODAL__DELETE_MESSAGE__TITLE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcMA,MAAAA,aAA2C,GAAIC,KAAyB,IAAK;AAAA,EAAA,IAAAC,mBAAA,CAAA;EACjF,MAAM;AACJC,IAAAA,QAAQ,GAAGA,MAAM,YAAc;IAC/BC,QAAQ;AACRC,IAAAA,OAAAA;AACF,GAAC,GAAGJ,KAAK,CAAA;EACT,MAAM;AAAEK,IAAAA,SAAAA;AAAU,GAAC,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;EACrD,MAAM;AACJC,IAAAA,aAAAA;GACD,GAAGC,iBAAiB,EAAE,CAAA;AACvB,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;IACJC,IAAI,EAAEC,WAAW,CAACC,MAAO;AACzBC,IAAAA,QAAQ,EAAE,CAAAZ,OAAO,aAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAAH,mBAAA,GAAPG,OAAO,CAAEa,UAAU,cAAAhB,mBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAnBA,mBAAA,CAAqBiB,UAAU,IAAG,CAAE;AAC9Cf,IAAAA,QAAQ,EAAEA,QAAS;IACnBD,QAAQ,EAAEA,MAAM;AAAEM,MAAAA,aAAa,CAACJ,OAAO,CAAC,CAACe,IAAI,CAAC,MAAM;AAClDjB,QAAAA,QAAQ,EAAE,CAAA;AACVC,QAAAA,QAAQ,EAAE,CAAA;AACZ,OAAC,CAAC,CAAA;KAAI;IACNiB,UAAU,EAAEf,SAAS,CAACgB,oBAAqB;IAC3CC,SAAS,EAAEjB,SAAS,CAACkB,4BAAAA;GACrB,CAAA,CAAA;AAEN;;;;"}

package/Channel/components/SuggestedMentionList.js

@@ -1,90 +1,73 @@
 import React__default, { useRef, useContext, useEffect, useMemo, useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-44470dab.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e1cd2fcf.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
 import Avatar from '../../ui/Avatar.js';
-import { a as LocalizationContext } from '../../LocalizationContext-4df0cc32.js';
-import { u as uuidv4 } from '../../uuid-286ed926.js';
-import { u as useChannelContext } from '../../ChannelProvider-554e7116.js';
+import { a as LocalizationContext } from '../../LocalizationContext-1839d2db.js';
+import { u as uuidv4 } from '../../uuid-720c99c0.js';
+import { u as useChannelContext } from '../../ChannelProvider-42ea1a96.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-9d11f204.js';
-import { M as MessageInputKeys } from '../../const-83764204.js';
-import { u as useThreadContext } from '../../ThreadProvider-6974fb3e.js';
+import { U as USER_MENTION_TEMP_CHAR, M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-a77c08c9.js';
+import { M as MessageInputKeys } from '../../const-714046e0.js';
+import { u as useThreadContext } from '../../ThreadProvider-0b73628e.js';
 import 'prop-types';
-import '../../stringSet-d555d877.js';
-import '../../tslib.es6-bcead7e6.js';
+import '../../stringSet-d368e289.js';
 import '../../ui/ImageRenderer.js';
-import '../../index-07e060cd.js';
-import '../../UserProfileContext-c58a7b86.js';
-import '../../index-3f26a31c.js';
-import '../../topics-351ea731.js';
-import '../../index-5f08f486.js';
+import '../../index-d9c12cf4.js';
+import '../../UserProfileContext-7e645551.js';
+import '../../index-06f34585.js';
+import '../../topics-f9628f1f.js';
+import '../../index-fd51c7d1.js';
+import '../../_rollupPluginBabelHelpers-ce69e916.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../_rollupPluginBabelHelpers-498add61.js';
-import '../../compareIds-9430f9d8.js';
+import '../../compareIds-08858dd3.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-9393e7c8.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"
-        });
-      }
+  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]);
-  var customMentionItem = useMemo(function () {
+  const customMentionItem = useMemo(() => {
     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
-          });
-        },
+        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({
@@ -92,34 +75,26 @@ function SuggestedUserMentionItem(props) {
       }));
     }
   }, [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
-      });
-    },
+    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, {
@@ -131,7 +106,7 @@ function SuggestedUserMentionItem(props) {
   }), /*#__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
+    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,
@@ -139,117 +114,88 @@ function SuggestedUserMentionItem(props) {
   }, member === null || member === void 0 ? void 0 : member.userId));
 }
 
-var DEBOUNCING_TIME = 300;
-
+const 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 () {
+  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(function () {
+    setTimer(setTimeout(() => {
       setSearchString(targetNickname);
     }, DEBOUNCING_TIME));
   }, [targetNickname]);
-  useEffect(function () {
+  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) {
-      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);
-      });
-
+      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) {
-      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);
-      });
-
+      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(function () {
-    if (!(channelInstance === null || channelInstance === void 0 ? void 0 : channelInstance.createMemberListQuery)) {
+  /* 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;
     }
-
-    var query = channelInstance === null || channelInstance === void 0 ? void 0 : channelInstance.createMemberListQuery({
+    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(function (memberList) {
-      var suggestingMembers = memberList.filter(function (member) {
-        return currentUserId !== (member === null || member === void 0 ? void 0 : member.userId);
-      }).slice(0, maxSuggestionCount);
-
+    });
+    // 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 {
@@ -259,42 +205,41 @@ function SuggestedMentionList(props) {
         });
         setCurrentUser(suggestingMembers[0]);
       }
-
       setLastSearchString(searchString);
       onFetchUsers(suggestingMembers);
       setCurrentMemberList(suggestingMembers);
-    }).catch(function (error) {
+    }).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 ".concat(className),
+    className: `sendbird-mention-suggest-list ${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", {
+  }, 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",