@sendbird/uikit-react 3.5.0-rc.1 → 3.5.0

package/cjs/Channel/components/RemoveMessageModal.js

@@ -3,53 +3,57 @@
 var React = require('react');
 var ui_Modal = require('../../ui/Modal.js');
 var ui_Button = require('../../ui/Button.js');
-var LocalizationContext = require('../../LocalizationContext-bddc5c2b.js');
-var Channel_context = require('../../ChannelProvider-fc58e60e.js');
+var LocalizationContext = require('../../LocalizationContext-0e429c3d.js');
+var Channel_context = require('../../ChannelProvider-0df75472.js');
 require('react-dom');
-require('../../index-c5cd589d.js');
+require('../../index-f570d25c.js');
 require('../../ui/Icon.js');
 require('prop-types');
 require('../../ui/IconButton.js');
-require('../../tslib.es6-b8ba50ef.js');
-require('../../index-5d5497c2.js');
-require('../../stringSet-3e6167ef.js');
-require('../../MediaQueryContext-4711a81f.js');
-require('../../index-d14a43c4.js');
-require('../../UserProfileContext-8d0dee57.js');
+require('../../_rollupPluginBabelHelpers-c89f311a.js');
+require('../../index-6cb0d040.js');
+require('../../stringSet-106da549.js');
+require('../../MediaQueryContext-33fc3b17.js');
+require('../../index-016f7106.js');
+require('../../UserProfileContext-87580795.js');
 require('../../useSendbirdStateContext.js');
 require('../../withSendbird.js');
-require('../../_rollupPluginBabelHelpers-fed1e122.js');
-require('../../index-8de8f28a.js');
-require('../../topics-56842e14.js');
-require('../../index-62c1bdfc.js');
+require('../../const-a85f3364.js');
+require('../../index-869e9a94.js');
+require('../../topics-b384e6b3.js');
+require('../../index-5231fde8.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../compareIds-4124b297.js');
-require('../../const-015e5589.js');
+require('../../compareIds-ccccfe86.js');
 require('@sendbird/chat/groupChannel');
-require('../../uuid-2475ef6c.js');
+require('../../uuid-12b01f73.js');
 require('@sendbird/chat/message');
-require('../../ui/ContextMenu.js');
-require('../../ui/SortByRow.js');
-require('../../ui/ReactionButton.js');
-require('../../ui/ImageRenderer.js');
+require('../../consts-5e0f96b3.js');
+require('../../resolvedReplyType-67e78c63.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var RemoveMessage = function (props) {
-  var _a;
-
-  var onCancel = props.onCancel,
-      message = props.message;
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-  var deleteMessage = Channel_context.useChannelContext().deleteMessage;
+const RemoveMessage = props => {
+  var _message$threadInfo;
+  const {
+    onSubmit = () => {/* noop */},
+    onCancel,
+    message
+  } = props;
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const {
+    deleteMessage
+  } = Channel_context.useChannelContext();
   return /*#__PURE__*/React__default["default"].createElement(ui_Modal["default"], {
     type: ui_Button.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/cjs/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","Modal","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,gBAAU,CAACC,uCAAD,CAAV,UAAd,CAAA;AAEN,EAAA,IAAAC,aAAa,GACXC,iCAAiB,EAAA,cADnB,CAAA;AAEF,EAAA,oBACEC,wCAACC,mBAAD,EAAA;IACE,IAAI,EAAEC,qBAAW,CAACC,MADpB;AAEE,IAAA,QAAQ,EAAE,CAAA,MAAAT,OAAO,KAAA,IAAP,IAAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAAA,OAAO,CAAEU,UAAT,MAAqB,IAArB,IAAqBC,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqBA,EAAA,CAAAC,UAArB,IAAkC,CAF9C;AAGE,IAAA,QAAQ,EAAEb,QAHZ;AAIE,IAAA,QAAQ,EAAE,YAAA;AAAQK,MAAAA,aAAa,CAACJ,OAAD,CAAb,CAAuBa,IAAvB,CAA4B,YAAA;QAC5Cd,QAAQ,EAAA,CAAA;OADQ,CAAA,CAAA;KAJpB;IAOE,UAAU,EAAEE,SAAS,CAACa,oBAPxB;IAQE,SAAS,EAAEb,SAAS,CAACc,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,gBAAU,CAACC,uCAAmB,CAAC,CAAA;EACrD,MAAM;AACJC,IAAAA,aAAAA;GACD,GAAGC,iCAAiB,EAAE,CAAA;AACvB,EAAA,oBACEC,yBAAA,CAAAC,aAAA,CAACC,mBAAK,EAAA;IACJC,IAAI,EAAEC,qBAAW,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/cjs/Channel/components/SuggestedMentionList.js

@@ -1,34 +1,31 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../../index-5d5497c2.js');
+var ui_Label = require('../../index-6cb0d040.js');
 var ui_Icon = require('../../ui/Icon.js');
 var ui_Avatar = require('../../ui/Avatar.js');
-var LocalizationContext = require('../../LocalizationContext-bddc5c2b.js');
-var uuid = require('../../uuid-2475ef6c.js');
-var Channel_context = require('../../ChannelProvider-fc58e60e.js');
+var LocalizationContext = require('../../LocalizationContext-0e429c3d.js');
+var uuid = require('../../uuid-12b01f73.js');
+var Channel_context = require('../../ChannelProvider-0df75472.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var _const$1 = require('../../const-015e5589.js');
-var _const = require('../../const-fd64914b.js');
-var Thread_context = require('../../ThreadProvider-389f5031.js');
+var _const$1 = require('../../const-a85f3364.js');
+var _const = require('../../const-d8cece19.js');
+var Thread_context = require('../../ThreadProvider-8ee179c2.js');
 require('prop-types');
-require('../../stringSet-3e6167ef.js');
-require('../../tslib.es6-b8ba50ef.js');
+require('../../stringSet-106da549.js');
 require('../../ui/ImageRenderer.js');
-require('../../index-d14a43c4.js');
-require('../../UserProfileContext-8d0dee57.js');
-require('../../index-8de8f28a.js');
-require('../../topics-56842e14.js');
-require('../../index-62c1bdfc.js');
+require('../../index-016f7106.js');
+require('../../UserProfileContext-87580795.js');
+require('../../index-869e9a94.js');
+require('../../topics-b384e6b3.js');
+require('../../index-5231fde8.js');
+require('../../_rollupPluginBabelHelpers-c89f311a.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../_rollupPluginBabelHelpers-fed1e122.js');
-require('../../compareIds-4124b297.js');
+require('../../compareIds-ccccfe86.js');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/chat/message');
-require('../../ui/ContextMenu.js');
-require('react-dom');
-require('../../ui/SortByRow.js');
-require('../../ui/ReactionButton.js');
+require('../../consts-5e0f96b3.js');
+require('../../resolvedReplyType-67e78c63.js');
 require('../../withSendbird.js');
 require('../../Thread/context/types.js');
 require('@sendbird/chat');
@@ -38,59 +35,46 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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 = React.useRef(null);
-  var _b = React.useContext(LocalizationContext.LocalizationContext).stringSet,
-      stringSet = _b === void 0 ? {} : _b;
-  React.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 = React.useRef(null);
+  const {
+    stringSet = {}
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  React.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 = React.useMemo(function () {
+  const customMentionItem = React.useMemo(() => {
     if (renderUserMentionItem) {
       return /*#__PURE__*/React__default["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) || uuid.uuidv4(),
         ref: scrollRef
       }, renderUserMentionItem({
@@ -98,34 +82,26 @@ function SuggestedUserMentionItem(props) {
       }));
     }
   }, [renderUserMentionItem]);
-
   if (customMentionItem) {
     return customMentionItem;
   }
-
   return /*#__PURE__*/React__default["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) || uuid.uuidv4(),
     ref: scrollRef
   }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
@@ -137,7 +113,7 @@ function SuggestedUserMentionItem(props) {
   }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-mention-suggest-list__user-item__nickname",
     type: ui_Label.LabelTypography.SUBTITLE_2,
-    color: (member === null || member === void 0 ? void 0 : member.nickname) ? ui_Label.LabelColors.ONBACKGROUND_1 : ui_Label.LabelColors.ONBACKGROUND_3
+    color: member !== null && member !== void 0 && member.nickname ? ui_Label.LabelColors.ONBACKGROUND_1 : ui_Label.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["default"].createElement(ui_Label.Label, {
     className: "sendbird-mention-suggest-list__user-item__user-id",
     type: ui_Label.LabelTypography.SUBTITLE_2,
@@ -145,117 +121,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 ? _const$1.MAX_USER_MENTION_COUNT : _h,
-      _j = props.maxSuggestionCount,
-      maxSuggestionCount = _j === void 0 ? _const$1.MAX_USER_SUGGESTION_COUNT : _j;
-  var currentGroupChannel = (_a = Channel_context.useChannelContext === null || Channel_context.useChannelContext === void 0 ? void 0 : Channel_context.useChannelContext()) === null || _a === void 0 ? void 0 : _a.currentGroupChannel;
-  var currentChannel = (_b = Thread_context.useThreadContext === null || Thread_context.useThreadContext === void 0 ? void 0 : Thread_context.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 = React.useRef(null);
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-
-  var _l = React.useState(null),
-      timer = _l[0],
-      setTimer = _l[1];
-
-  var _m = React.useState(''),
-      searchString = _m[0],
-      setSearchString = _m[1];
-
-  var _o = React.useState(''),
-      lastSearchString = _o[0],
-      setLastSearchString = _o[1];
-
-  var _p = React.useState(null),
-      currentUser = _p[0],
-      setCurrentUser = _p[1];
-
-  var _q = React.useState([]),
-      currentMemberList = _q[0],
-      setCurrentMemberList = _q[1];
-
-  React.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 = _const$1.MAX_USER_MENTION_COUNT,
+    maxSuggestionCount = _const$1.MAX_USER_SUGGESTION_COUNT
+  } = props;
+  const currentGroupChannel = Channel_context.useChannelContext === null || Channel_context.useChannelContext === void 0 ? void 0 : (_useChannelContext = Channel_context.useChannelContext()) === null || _useChannelContext === void 0 ? void 0 : _useChannelContext.currentGroupChannel;
+  const currentChannel = Thread_context.useThreadContext === null || Thread_context.useThreadContext === void 0 ? void 0 : (_useThreadContext = Thread_context.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 = React.useRef(null);
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const [timer, setTimer] = React.useState(null);
+  const [searchString, setSearchString] = React.useState('');
+  const [lastSearchString, setLastSearchString] = React.useState('');
+  const [currentUser, setCurrentUser] = React.useState(null);
+  const [currentMemberList, setCurrentMemberList] = React.useState([]);
+  React.useEffect(() => {
     clearTimeout(timer);
-    setTimer(setTimeout(function () {
+    setTimer(setTimeout(() => {
       setSearchString(targetNickname);
     }, DEBOUNCING_TIME));
   }, [targetNickname]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === _const.MessageInputKeys.Enter) {
       if (currentMemberList.length > 0) {
         onUserItemClick(currentUser);
       }
     }
-
     if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === _const.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) === _const.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 */
 
-  React.useEffect(function () {
-    if (!(channelInstance === null || channelInstance === void 0 ? void 0 : channelInstance.createMemberListQuery)) {
+  /* Fetch member list */
+  React.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(_const$1.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 {
@@ -265,42 +212,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["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["default"].createElement(SuggestedUserMentionItem, {
-      key: (member === null || member === void 0 ? void 0 : member.userId) || uuid.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["default"].createElement("div", {
+  }, ableAddMention && (currentMemberList === null || currentMemberList === void 0 ? void 0 : currentMemberList.map(member => /*#__PURE__*/React__default["default"].createElement(SuggestedUserMentionItem, {
+    key: (member === null || member === void 0 ? void 0 : member.userId) || uuid.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["default"].createElement("div", {
     className: "sendbird-mention-suggest-list__notice-item"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
     className: "sendbird-mention-suggest-list__notice-item__icon",