@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/App.js

@@ -1,44 +1,46 @@
 import React__default, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import Sendbird from './SendbirdProvider.js';
-import { u as useMediaQueryContext } from './MediaQueryContext-e3429d12.js';
+import { SendbirdProvider } from './SendbirdProvider.js';
+import { u as useMediaQueryContext } from './MediaQueryContext-3eeeec4f.js';
 import ChannelList from './ChannelList.js';
 import Channel from './Channel.js';
 import ChannelSettings from './ChannelSettings.js';
 import MessageSearchPannel from './MessageSearch.js';
 import Thread from './Thread.js';
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
-import useSendbirdStateContext from './useSendbirdStateContext.js';
-import { u as uuidv4 } from './uuid-16373bba.js';
-import { u as useVoicePlayerContext, A as ALL } from './index-e15f6b6a.js';
-import { V as VOICE_RECORDER_DEFAULT_MAX, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-691a3935.js';
-import './_rollupPluginBabelHelpers-50c9576f.js';
+import { useSendbirdStateContext } from './useSendbirdStateContext.js';
+import { u as uuidv4 } from './uuid-3c77ef7b.js';
+import { u as useVoicePlayerContext, A as ALL } from './index-124a5766.js';
+import './tslib.es6-0c779aab.js';
+import '@sendbird/uikit-tools';
 import './withSendbird.js';
 import 'css-vars-ponyfill';
-import './index.module-60af77d3.js';
-import './actionTypes-501b8c11.js';
+import './index-c6095960.js';
+import './actionTypes-3cd49b5c.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import './index-5d6a0f12.js';
+import './index-fc1642cb.js';
 import './utils/message/getOutgoingMessageState.js';
-import '@sendbird/uikit-tools';
+import './utils-74c161a0.js';
 import './VoiceRecorder/context.js';
-import './LocalizationContext-2463058b.js';
-import './stringSet-2814bf17.js';
-import './index-7700a436.js';
+import './LocalizationContext-d18a86d8.js';
+import './stringSet-1106c8ec.js';
+import './index-d3f61405.js';
 import './ui/Modal.js';
 import 'react-dom';
-import './utils-407da489.js';
-import './index-98887e8d.js';
+import './index-c7ed4aef.js';
 import './ui/IconButton.js';
 import './ui/Button.js';
-import './index-aa520474.js';
+import './index-12103973.js';
+import 'prop-types';
+import './types-4ffc52f6.js';
 import './ui/Icon.js';
-import './resolvedReplyType-1a128514.js';
-import './index-d99155f7.js';
-import './ChannelListProvider-1188e373.js';
-import './topics-5659403d.js';
-import './UserProfileContext-4ae968eb.js';
+import './consts-aa64aca8.js';
+import './resolvedReplyType-0532593c.js';
+import './hooks/useModal.js';
+import './_rollupPluginBabelHelpers-07dcbc2b.js';
+import './ChannelListProvider-f520f5b3.js';
+import './pubSub/topics.js';
+import './UserProfileContext-26e71f9a.js';
 import './ChannelList/components/ChannelListUI.js';
 import './ChannelList/components/ChannelListHeader.js';
 import './ui/Avatar.js';
@@ -46,7 +48,7 @@ import './ui/ImageRenderer.js';
 import './ChannelList/components/AddChannel.js';
 import './CreateChannel.js';
 import './CreateChannel/components/CreateChannelUI.js';
-import './CreateChannelProvider-a2fad282.js';
+import './CreateChannelProvider-c25dd81b.js';
 import './sendbirdSelectors.js';
 import './CreateChannel/components/InviteUsers.js';
 import './ui/UserListItem.js';
@@ -58,50 +60,51 @@ import './ui/SortByRow.js';
 import './CreateChannel/components/SelectChannelType.js';
 import './ChannelList/components/ChannelPreview.js';
 import './ui/ChannelAvatar.js';
-import './utils-ebf008e2.js';
+import './utils-48a3ef27.js';
 import './ui/Badge.js';
-import './index-7946293f.js';
-import './index-daa3ae67.js';
+import './index-942c5fa2.js';
+import './index-c81fd6ec.js';
 import './ui/Loader.js';
-import './index-5cb32ab5.js';
-import './index-13401b87.js';
+import './index-dc1827ea.js';
+import './index-1432c287.js';
 import './ui/MentionUserLabel.js';
-import './consts-675764c9.js';
+import './consts-7f4d53a3.js';
 import './ui/TextButton.js';
-import './color-b7f211a8.js';
+import './color-1383d4ab.js';
 import './Channel/components/TypingIndicator.js';
-import './ChannelProvider-9de00431.js';
-import './const-711048c3.js';
-import './utils-0c22998a.js';
-import './compareIds-8ed6e36a.js';
+import './ChannelProvider-7f6fd1f8.js';
+import './const-e3326913.js';
+import './utils-40040f8e.js';
 import '@sendbird/chat/message';
-import './useSendMultipleFilesMessage-a3a2c84b.js';
-import './useLongPress-5e1ad951.js';
+import './useSendMultipleFilesMessage-4489a0f6.js';
+import './compareIds-b56b02f1.js';
+import './useLongPress-322bb6a3.js';
 import './ChannelList/components/ChannelPreviewAction.js';
 import './EditUserProfile.js';
-import './index-60a7bf91.js';
+import './EditUserProfile/context.js';
+import './EditUserProfile/components/EditUserProfileUI.js';
 import './ui/Input.js';
-import './index-128523eb.js';
+import './ui/PlaceHolder.js';
 import './Channel/components/ChannelUI.js';
 import './ui/ConnectionStatus.js';
 import './Channel/components/ChannelHeader.js';
-import './utils-cae84d8a.js';
+import './utils-3660243c.js';
 import './Channel/components/MessageList.js';
 import './Channel/components/Message.js';
 import './Channel/components/SuggestedMentionList.js';
-import './const-74ec9eb4.js';
-import './ThreadProvider-9a3b145f.js';
+import './const-4bc3721f.js';
+import './Thread/context.js';
 import './Thread/context/types.js';
 import './ui/DateSeparator.js';
 import './ui/MessageInput.js';
-import './index-8a01c364.js';
+import './index-40447645.js';
 import 'dompurify';
-import './consts-eb77e905.js';
-import './consts-6ee24012.js';
-import './tokenize-4b153552.js';
+import './consts-f0ba9b80.js';
+import './consts-833420ed.js';
+import './tokenize-d17bf862.js';
 import './ui/MessageContent.js';
 import './ui/MessageItemMenu.js';
-import './types-89092633.js';
+import './types-50e412d8.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/ReactionButton.js';
 import './ui/EmojiReactions.js';
@@ -112,27 +115,27 @@ import './ui/TooltipWrapper.js';
 import './Message/context.js';
 import './ui/AdminMessage.js';
 import './ui/TextMessageItemBody.js';
-import './index-ae7ef8cf.js';
+import './index-3d508585.js';
 import './ui/MentionLabel.js';
 import './ui/LinkLabel.js';
 import './ui/FileMessageItemBody.js';
 import './ui/ThumbnailMessageItemBody.js';
-import './utils-b97d5113.js';
+import './utils-e98a7f8c.js';
 import './ui/OGMessageItemBody.js';
 import './ui/UnknownMessageItemBody.js';
 import './ui/QuoteMessage.js';
-import './index-b25ffa7e.js';
+import './index-eec0ce47.js';
 import './ui/ThreadReplies.js';
 import './ui/VoiceMessageItemBody.js';
 import './ui/ProgressBar.js';
 import './VoicePlayer/useVoicePlayer.js';
 import './ui/PlaybackTime.js';
-import './index-7b7478f5.js';
-import './index-c421b228.js';
+import './useStatefulFileInfoList-dd95f949.js';
+import './index-7a1085b6.js';
 import './Channel/components/FileViewer.js';
 import './Channel/components/RemoveMessageModal.js';
-import './stringFormatterUtils-dbad592d.js';
-import './index-b22c4150.js';
+import './stringFormatterUtils-444f6f4c.js';
+import './index-1969ccd8.js';
 import './Message/hooks/useDirtyGetMentions.js';
 import './Channel/utils/getMessagePartsInfo.js';
 import './Channel/utils/compareMessagesForGrouping.js';
@@ -140,9 +143,9 @@ import './Channel/components/UnreadCount.js';
 import './Channel/components/FrozenNotification.js';
 import './Channel/components/MessageInput.js';
 import './ui/QuoteMessageInput.js';
-import './useHandleUploadFiles-406a6c9c.js';
+import './useHandleUploadFiles-33aff88e.js';
 import './VoiceRecorder/useVoiceRecorder.js';
-import './index-3530f4f6.js';
+import './index-ec0c048b.js';
 import './ChannelSettings/components/ChannelSettingsUI.js';
 import './ChannelSettings/context.js';
 import './ChannelSettings/components/ChannelProfile.js';
@@ -150,10 +153,10 @@ import './ChannelSettings/components/EditDetailsModal.js';
 import './ChannelSettings/components/ModerationPanel.js';
 import './ui/Accordion.js';
 import './ui/AccordionGroup.js';
-import './context-b4c70964.js';
+import './context-ae47ac54.js';
 import './ui/Toggle.js';
 import './ChannelSettings/components/UserListItem.js';
-import './MemberList-593867cb.js';
+import './MemberList-469dae9b.js';
 import './ChannelSettings/components/LeaveChannel.js';
 import './ChannelSettings/components/UserPanel.js';
 import './MessageSearch/components/MessageSearchUI.js';
@@ -162,7 +165,7 @@ import './ui/MessageSearchItem.js';
 import './ui/MessageSearchFileItem.js';
 import './Thread/components/ThreadUI.js';
 import './Thread/components/ParentMessageInfo.js';
-import './RemoveMessageModal-9162aebe.js';
+import './RemoveMessageModal-f0cd37a5.js';
 import './Thread/components/ParentMessageInfoItem.js';
 import './Thread/components/ThreadHeader.js';
 import './Thread/components/ThreadList.js';
@@ -170,32 +173,32 @@ import './Thread/components/ThreadListItem.js';
 import 'date-fns';
 import './Thread/components/ThreadMessageInput.js';
 
-const DesktopLayout = props => {
-  const {
-    isReactionEnabled,
-    replyType,
-    isMessageGroupingEnabled,
-    isMultipleFilesMessageEnabled,
-    allowProfileEdit,
-    showSearchIcon,
-    onProfileEditSuccess,
-    disableAutoSelect,
-    currentChannel,
-    setCurrentChannel,
-    showSettings,
-    setShowSettings,
-    showSearch,
-    setShowSearch,
-    highlightedMessage,
-    setHighlightedMessage,
-    startingPoint,
-    setStartingPoint,
-    showThread,
-    setShowThread,
-    threadTargetMessage,
-    setThreadTargetMessage
-  } = props;
-  const [animatedMessageId, setAnimatedMessageId] = useState(null);
+var DesktopLayout = function (props) {
+  var isReactionEnabled = props.isReactionEnabled,
+    replyType = props.replyType,
+    isMessageGroupingEnabled = props.isMessageGroupingEnabled,
+    isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled,
+    allowProfileEdit = props.allowProfileEdit,
+    showSearchIcon = props.showSearchIcon,
+    onProfileEditSuccess = props.onProfileEditSuccess,
+    disableAutoSelect = props.disableAutoSelect,
+    currentChannel = props.currentChannel,
+    setCurrentChannel = props.setCurrentChannel,
+    showSettings = props.showSettings,
+    setShowSettings = props.setShowSettings,
+    showSearch = props.showSearch,
+    setShowSearch = props.setShowSearch,
+    highlightedMessage = props.highlightedMessage,
+    setHighlightedMessage = props.setHighlightedMessage,
+    startingPoint = props.startingPoint,
+    setStartingPoint = props.setStartingPoint,
+    showThread = props.showThread,
+    setShowThread = props.setShowThread,
+    threadTargetMessage = props.threadTargetMessage,
+    setThreadTargetMessage = props.setThreadTargetMessage;
+  var _a = useState(null),
+    animatedMessageId = _a[0],
+    setAnimatedMessageId = _a[1];
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-app__wrap"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -205,7 +208,7 @@ const DesktopLayout = props => {
     activeChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
     onProfileEditSuccess: onProfileEditSuccess,
     disableAutoSelect: disableAutoSelect,
-    onChannelSelect: channel => {
+    onChannelSelect: function (channel) {
       setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
       setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
       if (channel) {
@@ -215,28 +218,21 @@ const DesktopLayout = props => {
       }
     }
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: `
-          ${showSettings ? 'sendbird-app__conversation--settings-open' : ''}
-          ${showSearch ? 'sendbird-app__conversation--search-open' : ''}
-          sendbird-app__conversation-wrap
-        `
+    className: "\n          ".concat(showSettings ? 'sendbird-app__conversation--settings-open' : '', "\n          ").concat(showSearch ? 'sendbird-app__conversation--search-open' : '', "\n          sendbird-app__conversation-wrap\n        ")
   }, /*#__PURE__*/React__default.createElement(Channel, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onChatHeaderActionClick: () => {
+    onChatHeaderActionClick: function () {
       setShowSearch(false);
       setShowThread(false);
       setShowSettings(!showSettings);
     },
-    onSearchClick: () => {
+    onSearchClick: function () {
       setShowSettings(false);
       setShowThread(false);
       setShowSearch(!showSearch);
     },
-    onReplyInThread: _ref => {
-      let {
-        message
-      } = _ref;
-      // parent message
+    onReplyInThread: function (_a) {
+      var message = _a.message;
       setShowSettings(false);
       setShowSearch(false);
       if (replyType === 'THREAD') {
@@ -244,11 +240,8 @@ const DesktopLayout = props => {
         setShowThread(true);
       }
     },
-    onQuoteMessageClick: _ref2 => {
-      let {
-        message
-      } = _ref2;
-      // thread message
+    onQuoteMessageClick: function (_a) {
+      var message = _a.message;
       setShowSettings(false);
       setShowSearch(false);
       if (replyType === 'THREAD') {
@@ -256,10 +249,10 @@ const DesktopLayout = props => {
         setShowThread(true);
       }
     },
-    onMessageAnimated: () => {
+    onMessageAnimated: function () {
       setAnimatedMessageId(null);
     },
-    onMessageHighlighted: () => {
+    onMessageHighlighted: function () {
       setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
     },
     showSearchIcon: showSearchIcon,
@@ -275,17 +268,17 @@ const DesktopLayout = props => {
   }, /*#__PURE__*/React__default.createElement(ChannelSettings, {
     className: "sendbird-channel-settings",
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onCloseClick: () => {
+    onCloseClick: function () {
       setShowSettings(false);
     }
   })), showSearch && /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-app__searchpanel-wrap"
   }, /*#__PURE__*/React__default.createElement(MessageSearchPannel, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onResultClick: message => {
+    onResultClick: function (message) {
       if (message.messageId === highlightedMessage) {
         setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
-        setTimeout(() => {
+        setTimeout(function () {
           setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
         });
       } else {
@@ -293,113 +286,111 @@ const DesktopLayout = props => {
         setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
       }
     },
-    onCloseClick: () => {
+    onCloseClick: function () {
       setShowSearch(false);
     }
   })), showThread && /*#__PURE__*/React__default.createElement(Thread, {
     className: "sendbird-app__thread",
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
     message: threadTargetMessage,
-    onHeaderActionClick: () => {
+    onHeaderActionClick: function () {
       setShowThread(false);
     },
-    onMoveToParentMessage: _ref3 => {
-      let {
-        message,
-        channel
-      } = _ref3;
+    onMoveToParentMessage: function (_a) {
+      var message = _a.message,
+        channel = _a.channel;
       if ((channel === null || channel === void 0 ? void 0 : channel.url) !== (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
         setCurrentChannel(channel);
       }
       if ((message === null || message === void 0 ? void 0 : message.messageId) !== animatedMessageId) {
         setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
       }
-      setTimeout(() => {
+      setTimeout(function () {
         setAnimatedMessageId(message === null || message === void 0 ? void 0 : message.messageId);
       }, 500);
     }
   }));
 };
 
-var PANELS = /*#__PURE__*/function (PANELS) {
+var PANELS;
+(function (PANELS) {
   PANELS["CHANNEL_LIST"] = "CHANNEL_LIST";
   PANELS["CHANNEL"] = "CHANNEL";
   PANELS["CHANNEL_SETTINGS"] = "CHANNEL_SETTINGS";
   PANELS["MESSAGE_SEARCH"] = "MESSAGE_SEARCH";
   PANELS["THREAD"] = "THREAD";
-  return PANELS;
-}(PANELS || {});
-const MobileLayout = props => {
-  var _store$stores, _store$stores$sdkStor, _store$config;
-  const {
-    replyType,
-    isMessageGroupingEnabled,
-    isMultipleFilesMessageEnabled,
-    allowProfileEdit,
-    isReactionEnabled,
-    showSearchIcon,
-    onProfileEditSuccess,
-    currentChannel,
-    setCurrentChannel,
-    highlightedMessage,
-    setHighlightedMessage,
-    startingPoint,
-    setStartingPoint,
-    threadTargetMessage,
-    setThreadTargetMessage
-  } = props;
-  const [panel, setPanel] = useState(PANELS.CHANNEL_LIST);
-  const [animatedMessageId, setAnimatedMessageId] = useState(null);
-  const store = useSendbirdStateContext();
-  const sdk = store === null || store === void 0 ? void 0 : (_store$stores = store.stores) === null || _store$stores === void 0 ? void 0 : (_store$stores$sdkStor = _store$stores.sdkStore) === null || _store$stores$sdkStor === void 0 ? void 0 : _store$stores$sdkStor.sdk;
-  const userId = store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.userId;
-  const {
-    pause
-  } = useVoicePlayerContext();
-  const goToMessage = (message, timeoutCb) => {
+})(PANELS || (PANELS = {}));
+var MobileLayout = function (props) {
+  var _a, _b, _c;
+  var replyType = props.replyType,
+    isMessageGroupingEnabled = props.isMessageGroupingEnabled,
+    isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled,
+    allowProfileEdit = props.allowProfileEdit,
+    isReactionEnabled = props.isReactionEnabled,
+    showSearchIcon = props.showSearchIcon,
+    onProfileEditSuccess = props.onProfileEditSuccess,
+    currentChannel = props.currentChannel,
+    setCurrentChannel = props.setCurrentChannel,
+    highlightedMessage = props.highlightedMessage,
+    setHighlightedMessage = props.setHighlightedMessage,
+    startingPoint = props.startingPoint,
+    setStartingPoint = props.setStartingPoint,
+    threadTargetMessage = props.threadTargetMessage,
+    setThreadTargetMessage = props.setThreadTargetMessage;
+  var _d = useState(PANELS.CHANNEL_LIST),
+    panel = _d[0],
+    setPanel = _d[1];
+  var _e = useState(null),
+    animatedMessageId = _e[0],
+    setAnimatedMessageId = _e[1];
+  var store = useSendbirdStateContext();
+  var sdk = (_b = (_a = store === null || store === void 0 ? void 0 : store.stores) === null || _a === void 0 ? void 0 : _a.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk;
+  var userId = (_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.userId;
+  var pause = useVoicePlayerContext().pause;
+  var goToMessage = function (message, timeoutCb) {
     setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint((message === null || message === void 0 ? void 0 : message.createdAt) || null);
-    setTimeout(() => {
+    setTimeout(function () {
       timeoutCb === null || timeoutCb === void 0 ? void 0 : timeoutCb((message === null || message === void 0 ? void 0 : message.messageId) || null);
     }, 500);
   };
-  useEffect(() => {
+  useEffect(function () {
     if (panel !== PANELS.CHANNEL) {
-      goToMessage(null, () => setAnimatedMessageId(null));
+      goToMessage(null, function () {
+        return setAnimatedMessageId(null);
+      });
     }
   }, [panel]);
-  useEffect(() => {
-    var _sdk$groupChannel;
-    const handlerId = uuidv4();
-    if (sdk !== null && sdk !== void 0 && (_sdk$groupChannel = sdk.groupChannel) !== null && _sdk$groupChannel !== void 0 && _sdk$groupChannel.addGroupChannelHandler) {
-      var _sdk$groupChannel2;
-      const handler = new GroupChannelHandler({
-        onUserBanned: (groupChannel, user) => {
+  useEffect(function () {
+    var _a, _b;
+    var handlerId = uuidv4();
+    if ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
+      var handler = new GroupChannelHandler({
+        onUserBanned: function (groupChannel, user) {
           if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
             setPanel(PANELS.CHANNEL_LIST);
           }
         },
-        onChannelDeleted: channelUrl => {
+        onChannelDeleted: function (channelUrl) {
           if (channelUrl === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
             setPanel(PANELS.CHANNEL_LIST);
           }
         },
-        onUserLeft: (groupChannel, user) => {
+        onUserLeft: function (groupChannel, user) {
           if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
             setPanel(PANELS.CHANNEL_LIST);
           }
         }
       });
-      sdk === null || sdk === void 0 ? void 0 : (_sdk$groupChannel2 = sdk.groupChannel) === null || _sdk$groupChannel2 === void 0 ? void 0 : _sdk$groupChannel2.addGroupChannelHandler(handlerId, handler);
+      (_b = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _b === void 0 ? void 0 : _b.addGroupChannelHandler(handlerId, handler);
     }
-    return () => {
-      var _sdk$groupChannel3, _sdk$groupChannel3$re;
-      sdk === null || sdk === void 0 ? void 0 : (_sdk$groupChannel3 = sdk.groupChannel) === null || _sdk$groupChannel3 === void 0 ? void 0 : (_sdk$groupChannel3$re = _sdk$groupChannel3.removeGroupChannelHandler) === null || _sdk$groupChannel3$re === void 0 ? void 0 : _sdk$groupChannel3$re.call(_sdk$groupChannel3, handlerId);
+    return function () {
+      var _a, _b;
+      (_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.removeGroupChannelHandler) === null || _b === void 0 ? void 0 : _b.call(_a, handlerId);
     };
   }, [sdk, currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
-
   // if currentChannel is changed while on Thread
   // then change panel type to CHANNEL
-  useEffect(() => {
+  useEffect(function () {
     if (panel === PANELS.THREAD) {
       setPanel(PANELS.CHANNEL);
     }
@@ -410,7 +401,7 @@ const MobileLayout = props => {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default.createElement(ChannelList, {
     onProfileEditSuccess: onProfileEditSuccess,
-    onChannelSelect: channel => {
+    onChannelSelect: function (channel) {
       setCurrentChannel(channel);
       setPanel(PANELS.CHANNEL);
     },
@@ -423,10 +414,10 @@ const MobileLayout = props => {
   }, /*#__PURE__*/React__default.createElement(Channel, {
     replyType: replyType,
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onSearchClick: () => {
+    onSearchClick: function () {
       setPanel(PANELS.MESSAGE_SEARCH);
     },
-    onBackClick: () => {
+    onBackClick: function () {
       setPanel(PANELS.CHANNEL_LIST);
       pause(ALL);
     },
@@ -437,23 +428,18 @@ const MobileLayout = props => {
     startingPoint: startingPoint,
     animatedMessage: animatedMessageId,
     highlightedMessage: highlightedMessage,
-    onChatHeaderActionClick: () => {
+    onChatHeaderActionClick: function () {
       setPanel(PANELS.CHANNEL_SETTINGS);
     },
-    onReplyInThread: _ref => {
-      let {
-        message
-      } = _ref;
+    onReplyInThread: function (_a) {
+      var message = _a.message;
       if (replyType === 'THREAD') {
         setPanel(PANELS.THREAD);
         setThreadTargetMessage(message);
       }
     },
-    onQuoteMessageClick: _ref2 => {
-      let {
-        message
-      } = _ref2;
-      // thread message
+    onQuoteMessageClick: function (_a) {
+      var message = _a.message;
       if (replyType === 'THREAD') {
         setThreadTargetMessage(message);
         setPanel(PANELS.THREAD);
@@ -463,22 +449,22 @@ const MobileLayout = props => {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default.createElement(ChannelSettings, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onCloseClick: () => {
+    onCloseClick: function () {
       setPanel(PANELS.CHANNEL);
     },
-    onLeaveChannel: () => {
+    onLeaveChannel: function () {
       setPanel(PANELS.CHANNEL_LIST);
     }
   })), panel === PANELS.MESSAGE_SEARCH && /*#__PURE__*/React__default.createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default.createElement(MessageSearchPannel, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onCloseClick: () => {
+    onCloseClick: function () {
       setPanel(PANELS.CHANNEL);
     },
-    onResultClick: message => {
+    onResultClick: function (message) {
       setPanel(PANELS.CHANNEL);
-      goToMessage(message, messageId => {
+      goToMessage(message, function (messageId) {
         setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
       });
     }
@@ -487,17 +473,15 @@ const MobileLayout = props => {
   }, /*#__PURE__*/React__default.createElement(Thread, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
     message: threadTargetMessage,
-    onHeaderActionClick: () => {
+    onHeaderActionClick: function () {
       setPanel(PANELS.CHANNEL);
       pause(ALL);
     },
-    onMoveToParentMessage: _ref3 => {
-      let {
-        message,
-        channel
-      } = _ref3;
+    onMoveToParentMessage: function (_a) {
+      var message = _a.message,
+        channel = _a.channel;
       setCurrentChannel(channel);
-      goToMessage(message, messageId => {
+      goToMessage(message, function (messageId) {
         setPanel(PANELS.CHANNEL);
         setAnimatedMessageId(messageId);
       });
@@ -505,35 +489,42 @@ const MobileLayout = props => {
   })));
 };
 
-const AppLayout = props => {
-  var _props$replyType, _props$isReactionEnab, _props$showSearchIcon;
-  const {
-    isMessageGroupingEnabled,
-    allowProfileEdit,
-    onProfileEditSuccess,
-    disableAutoSelect,
-    currentChannel,
-    setCurrentChannel
-  } = props;
-  const globalStore = useSendbirdStateContext();
-  const globalConfigs = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config;
-  const [showThread, setShowThread] = useState(false);
-  const [threadTargetMessage, setThreadTargetMessage] = useState(null);
-  const [showSettings, setShowSettings] = useState(false);
-  const [showSearch, setShowSearch] = useState(false);
-  const [highlightedMessage, setHighlightedMessage] = useState(null);
-  const [startingPoint, setStartingPoint] = useState(null);
-  const {
-    isMobile
-  } = useMediaQueryContext();
-
+var AppLayout = function (props) {
+  var _a, _b, _c;
+  var isMessageGroupingEnabled = props.isMessageGroupingEnabled,
+    allowProfileEdit = props.allowProfileEdit,
+    onProfileEditSuccess = props.onProfileEditSuccess,
+    disableAutoSelect = props.disableAutoSelect,
+    currentChannel = props.currentChannel,
+    setCurrentChannel = props.setCurrentChannel;
+  var globalStore = useSendbirdStateContext();
+  var globalConfigs = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config;
+  var _d = useState(false),
+    showThread = _d[0],
+    setShowThread = _d[1];
+  var _e = useState(null),
+    threadTargetMessage = _e[0],
+    setThreadTargetMessage = _e[1];
+  var _f = useState(false),
+    showSettings = _f[0],
+    setShowSettings = _f[1];
+  var _g = useState(false),
+    showSearch = _g[0],
+    setShowSearch = _g[1];
+  var _h = useState(null),
+    highlightedMessage = _h[0],
+    setHighlightedMessage = _h[1];
+  var _j = useState(null),
+    startingPoint = _j[0],
+    setStartingPoint = _j[1];
+  var isMobile = useMediaQueryContext().isMobile;
   /**
    * Below configs can be set via Dashboard UIKit config setting but as a lower priority than App props.
    * So need to be have fallback value \w global configs even though each prop values are undefined
    */
-  const replyType = (_props$replyType = props.replyType) !== null && _props$replyType !== void 0 ? _props$replyType : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.replyType;
-  const isReactionEnabled = (_props$isReactionEnab = props.isReactionEnabled) !== null && _props$isReactionEnab !== void 0 ? _props$isReactionEnab : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.isReactionEnabled;
-  const showSearchIcon = (_props$showSearchIcon = props.showSearchIcon) !== null && _props$showSearchIcon !== void 0 ? _props$showSearchIcon : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.showSearchIcon;
+  var replyType = (_a = props.replyType) !== null && _a !== void 0 ? _a : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.replyType;
+  var isReactionEnabled = (_b = props.isReactionEnabled) !== null && _b !== void 0 ? _b : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.isReactionEnabled;
+  var showSearchIcon = (_c = props.showSearchIcon) !== null && _c !== void 0 ? _c : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.showSearchIcon;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isMobile ? /*#__PURE__*/React__default.createElement(MobileLayout, {
     replyType: replyType,
     showSearchIcon: showSearchIcon,
@@ -580,45 +571,69 @@ const AppLayout = props => {
  * default chat apps
  */
 function App(props) {
-  const {
-    appId,
-    userId,
-    accessToken,
-    customApiHost,
-    customWebSocketHost,
-    breakpoint,
-    theme,
-    userListQuery,
-    nickname,
-    profileUrl,
-    dateLocale,
-    config = {},
-    isReactionEnabled,
-    isMentionEnabled,
-    isVoiceMessageEnabled,
-    voiceRecord,
-    replyType,
-    isMessageGroupingEnabled,
-    isMultipleFilesMessageEnabled,
-    colorSet,
-    stringSet,
-    allowProfileEdit,
-    disableUserProfile,
-    disableMarkAsDelivered,
-    renderUserProfile,
-    showSearchIcon,
-    onProfileEditSuccess,
-    imageCompression,
-    disableAutoSelect,
-    isTypingIndicatorEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList,
-    uikitOptions,
-    isUserIdUsedForNickname,
-    sdkInitParams,
-    customExtensionParams
-  } = props;
-  const [currentChannel, setCurrentChannel] = useState(null);
-  return /*#__PURE__*/React__default.createElement(Sendbird, {
+  var appId = props.appId,
+    userId = props.userId,
+    _a = props.accessToken,
+    accessToken = _a === void 0 ? '' : _a,
+    _b = props.customApiHost,
+    customApiHost = _b === void 0 ? '' : _b,
+    _c = props.customWebSocketHost,
+    customWebSocketHost = _c === void 0 ? '' : _c,
+    _d = props.breakpoint,
+    breakpoint = _d === void 0 ? null : _d,
+    _e = props.theme,
+    theme = _e === void 0 ? 'light' : _e,
+    _f = props.userListQuery,
+    userListQuery = _f === void 0 ? null : _f,
+    _g = props.nickname,
+    nickname = _g === void 0 ? '' : _g,
+    _h = props.profileUrl,
+    profileUrl = _h === void 0 ? '' : _h,
+    _j = props.dateLocale,
+    dateLocale = _j === void 0 ? null : _j,
+    _k = props.config,
+    config = _k === void 0 ? {} : _k,
+    voiceRecord = props.voiceRecord,
+    _l = props.isMessageGroupingEnabled,
+    isMessageGroupingEnabled = _l === void 0 ? true : _l,
+    _m = props.colorSet,
+    colorSet = _m === void 0 ? null : _m,
+    _o = props.stringSet,
+    stringSet = _o === void 0 ? null : _o,
+    _p = props.allowProfileEdit,
+    allowProfileEdit = _p === void 0 ? false : _p,
+    _q = props.disableMarkAsDelivered,
+    disableMarkAsDelivered = _q === void 0 ? false : _q,
+    _r = props.renderUserProfile,
+    renderUserProfile = _r === void 0 ? null : _r,
+    _s = props.onProfileEditSuccess,
+    onProfileEditSuccess = _s === void 0 ? null : _s,
+    _t = props.imageCompression,
+    imageCompression = _t === void 0 ? {} : _t,
+    _u = props.disableAutoSelect,
+    disableAutoSelect = _u === void 0 ? false : _u,
+    sdkInitParams = props.sdkInitParams,
+    customExtensionParams = props.customExtensionParams,
+    eventHandlers = props.eventHandlers,
+    uikitOptions = props.uikitOptions,
+    // The below configs are duplicates of the Dashboard UIKit Configs.
+    // Since their default values will be set in the Sendbird component,
+    // we don't need to set them here.
+    showSearchIcon = props.showSearchIcon,
+    isMentionEnabled = props.isMentionEnabled,
+    isReactionEnabled = props.isReactionEnabled,
+    replyType = props.replyType,
+    disableUserProfile = props.disableUserProfile,
+    isVoiceMessageEnabled = props.isVoiceMessageEnabled,
+    isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled,
+    isTypingIndicatorEnabledOnChannelList = props.isTypingIndicatorEnabledOnChannelList,
+    isMessageReceiptStatusEnabledOnChannelList = props.isMessageReceiptStatusEnabledOnChannelList,
+    _v = props.isUserIdUsedForNickname,
+    isUserIdUsedForNickname = _v === void 0 ? true : _v;
+  var _w = useState(null),
+    currentChannel = _w[0],
+    setCurrentChannel = _w[1];
+  return /*#__PURE__*/React__default.createElement(SendbirdProvider, {
     stringSet: stringSet,
     appId: appId,
     userId: userId,
@@ -642,7 +657,7 @@ function App(props) {
     isVoiceMessageEnabled: isVoiceMessageEnabled,
     isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
     voiceRecord: voiceRecord,
-    onUserProfileMessage: channel => {
+    onUserProfileMessage: function (channel) {
       setCurrentChannel(channel);
     },
     isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList,
@@ -652,7 +667,8 @@ function App(props) {
     uikitOptions: uikitOptions,
     isUserIdUsedForNickname: isUserIdUsedForNickname,
     sdkInitParams: sdkInitParams,
-    customExtensionParams: customExtensionParams
+    customExtensionParams: customExtensionParams,
+    eventHandlers: eventHandlers
   }, /*#__PURE__*/React__default.createElement(AppLayout, {
     isReactionEnabled: isReactionEnabled,
     replyType: replyType,
@@ -665,95 +681,6 @@ function App(props) {
     setCurrentChannel: setCurrentChannel
   }));
 }
-App.propTypes = {
-  appId: PropTypes.string.isRequired,
-  userId: PropTypes.string.isRequired,
-  accessToken: PropTypes.string,
-  customApiHost: PropTypes.string,
-  customWebSocketHost: PropTypes.string,
-  theme: PropTypes.string,
-  userListQuery: PropTypes.func,
-  nickname: PropTypes.string,
-  profileUrl: PropTypes.string,
-  breakpoint: PropTypes.oneOf([PropTypes.string, PropTypes.bool]),
-  allowProfileEdit: PropTypes.bool,
-  disableUserProfile: PropTypes.bool,
-  disableMarkAsDelivered: PropTypes.bool,
-  renderUserProfile: PropTypes.func,
-  onProfileEditSuccess: PropTypes.func,
-  dateLocale: PropTypes.shape({}),
-  config: PropTypes.shape({
-    // None Error Warning Info 'All/Debug'
-    logLevel: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    isREMUnitEnabled: PropTypes.bool
-  }),
-  uikitOptions: PropTypes.shape({}),
-  isReactionEnabled: PropTypes.bool,
-  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
-  showSearchIcon: PropTypes.bool,
-  isMessageGroupingEnabled: PropTypes.bool,
-  stringSet: PropTypes.objectOf(PropTypes.string),
-  colorSet: PropTypes.objectOf(PropTypes.string),
-  imageCompression: PropTypes.shape({
-    compressionRate: PropTypes.number,
-    resizingWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    resizingHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  }),
-  disableAutoSelect: PropTypes.bool,
-  isMentionEnabled: PropTypes.bool,
-  isVoiceMessageEnabled: PropTypes.bool,
-  voiceRecord: PropTypes.shape({
-    maxRecordingTime: PropTypes.number,
-    minRecordingTime: PropTypes.number
-  }),
-  isMultipleFilesMessageEnabled: PropTypes.bool,
-  isTypingIndicatorEnabledOnChannelList: PropTypes.bool,
-  isMessageReceiptStatusEnabledOnChannelList: PropTypes.bool,
-  isUserIdUsedForNickname: PropTypes.bool,
-  sdkInitParams: PropTypes.shape({}),
-  customExtensionParams: PropTypes.shape({})
-};
-App.defaultProps = {
-  accessToken: '',
-  customApiHost: '',
-  customWebSocketHost: '',
-  theme: 'light',
-  nickname: '',
-  profileUrl: '',
-  userListQuery: null,
-  breakpoint: null,
-  dateLocale: null,
-  allowProfileEdit: false,
-  onProfileEditSuccess: null,
-  disableMarkAsDelivered: false,
-  renderUserProfile: null,
-  config: {},
-  voiceRecord: {
-    maxRecordingTime: VOICE_RECORDER_DEFAULT_MAX,
-    minRecordingTime: VOICE_RECORDER_DEFAULT_MIN
-  },
-  isMessageGroupingEnabled: true,
-  stringSet: null,
-  colorSet: null,
-  imageCompression: {},
-  disableAutoSelect: false,
-  uikitOptions: undefined,
-  // The below configs are duplicates of the Dashboard UIKit Configs.
-  // Since their default values will be set in the Sendbird component,
-  // we don't need to set them here.
-  showSearchIcon: undefined,
-  isMentionEnabled: undefined,
-  isReactionEnabled: undefined,
-  replyType: undefined,
-  disableUserProfile: undefined,
-  isVoiceMessageEnabled: undefined,
-  isMultipleFilesMessageEnabled: undefined,
-  isTypingIndicatorEnabledOnChannelList: undefined,
-  isMessageReceiptStatusEnabledOnChannelList: undefined,
-  isUserIdUsedForNickname: true,
-  sdkInitParams: undefined,
-  customExtensionParams: undefined
-};
 
 export { App as default };
 //# sourceMappingURL=App.js.map