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

package/cjs/App.js

@@ -1,9 +1,8 @@
 'use strict';
 
 var React = require('react');
-var PropTypes = require('prop-types');
 var SendbirdProvider = require('./SendbirdProvider.js');
-var MediaQueryContext = require('./MediaQueryContext-73aac8cf.js');
+var MediaQueryContext = require('./MediaQueryContext-d6fdbe43.js');
 var ChannelList = require('./ChannelList.js');
 var Channel = require('./Channel.js');
 var ChannelSettings = require('./ChannelSettings.js');
@@ -11,36 +10,39 @@ var MessageSearch = require('./MessageSearch.js');
 var Thread = require('./Thread.js');
 var groupChannel = require('@sendbird/chat/groupChannel');
 var useSendbirdStateContext = require('./useSendbirdStateContext.js');
-var uuid = require('./uuid-b2806cf5.js');
-var VoicePlayer_context = require('./index-1f6b30ea.js');
-var consts = require('./consts-fb07c671.js');
-require('./_rollupPluginBabelHelpers-83d7e84b.js');
+var uuid = require('./uuid-c74bbbb6.js');
+var VoicePlayer_context = require('./index-0ec5a831.js');
+require('./tslib.es6-2f2b0bca.js');
+require('@sendbird/uikit-tools');
 require('./withSendbird.js');
 require('css-vars-ponyfill');
-require('./index.module-a24e9cd7.js');
-require('./actionTypes-1d118952.js');
+require('./index-609b07a2.js');
+require('./actionTypes-7fa02f94.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
-require('./index-fbe9cc73.js');
+require('./index-b995f638.js');
 require('./utils/message/getOutgoingMessageState.js');
-require('@sendbird/uikit-tools');
+require('./utils-180c6bc8.js');
 require('./VoiceRecorder/context.js');
-require('./LocalizationContext-482c1343.js');
-require('./stringSet-d00535a5.js');
-require('./index-d04f312e.js');
+require('./LocalizationContext-5009012e.js');
+require('./stringSet-98b52c49.js');
+require('./index-fd8a0abb.js');
 require('./ui/Modal.js');
 require('react-dom');
-require('./utils-c47c68b1.js');
-require('./index-cbcacbee.js');
+require('./index-daf80c58.js');
 require('./ui/IconButton.js');
 require('./ui/Button.js');
-require('./index-18720f0d.js');
+require('./index-35820a94.js');
+require('prop-types');
+require('./types-66554668.js');
 require('./ui/Icon.js');
-require('./resolvedReplyType-85b4bd7c.js');
-require('./index-e9ac5ae1.js');
-require('./ChannelListProvider-e55e6242.js');
-require('./topics-adde627b.js');
-require('./UserProfileContext-fa8d0383.js');
+require('./consts-95462b21.js');
+require('./resolvedReplyType-c20ef661.js');
+require('./hooks/useModal.js');
+require('./_rollupPluginBabelHelpers-94c18dc1.js');
+require('./ChannelListProvider-a418de2e.js');
+require('./pubSub/topics.js');
+require('./UserProfileContext-922a43ec.js');
 require('./ChannelList/components/ChannelListUI.js');
 require('./ChannelList/components/ChannelListHeader.js');
 require('./ui/Avatar.js');
@@ -48,7 +50,7 @@ require('./ui/ImageRenderer.js');
 require('./ChannelList/components/AddChannel.js');
 require('./CreateChannel.js');
 require('./CreateChannel/components/CreateChannelUI.js');
-require('./CreateChannelProvider-8b8a557c.js');
+require('./CreateChannelProvider-70c9cb7c.js');
 require('./sendbirdSelectors.js');
 require('./CreateChannel/components/InviteUsers.js');
 require('./ui/UserListItem.js');
@@ -60,50 +62,51 @@ require('./ui/SortByRow.js');
 require('./CreateChannel/components/SelectChannelType.js');
 require('./ChannelList/components/ChannelPreview.js');
 require('./ui/ChannelAvatar.js');
-require('./utils-5bfb4516.js');
+require('./utils-e313131f.js');
 require('./ui/Badge.js');
-require('./index-8ec12d1d.js');
-require('./index-c9b003b3.js');
+require('./index-aeb36f01.js');
+require('./index-b6d51e74.js');
 require('./ui/Loader.js');
-require('./index-11f9cc0f.js');
-require('./index-4eb7e2b5.js');
+require('./index-83d2aed9.js');
+require('./index-826b76d5.js');
 require('./ui/MentionUserLabel.js');
-require('./consts-b018b1ed.js');
+require('./consts-54f5c12d.js');
 require('./ui/TextButton.js');
-require('./color-d83b77ac.js');
+require('./color-477ddbd4.js');
 require('./Channel/components/TypingIndicator.js');
-require('./ChannelProvider-6fa73019.js');
-require('./const-67ff9e34.js');
-require('./utils-68aa6bf6.js');
-require('./compareIds-bef997cb.js');
+require('./ChannelProvider-7fa98120.js');
+require('./const-9def5c09.js');
+require('./utils-55fc6797.js');
 require('@sendbird/chat/message');
-require('./useSendMultipleFilesMessage-81cdc9d0.js');
-require('./useLongPress-1c0f4696.js');
+require('./useSendMultipleFilesMessage-87e0ffa3.js');
+require('./compareIds-de541666.js');
+require('./useLongPress-c1da8ba7.js');
 require('./ChannelList/components/ChannelPreviewAction.js');
 require('./EditUserProfile.js');
-require('./index-56a25735.js');
+require('./EditUserProfile/context.js');
+require('./EditUserProfile/components/EditUserProfileUI.js');
 require('./ui/Input.js');
-require('./index-7f41c4b6.js');
+require('./ui/PlaceHolder.js');
 require('./Channel/components/ChannelUI.js');
 require('./ui/ConnectionStatus.js');
 require('./Channel/components/ChannelHeader.js');
-require('./utils-b34d4e2c.js');
+require('./utils-0fac6ad1.js');
 require('./Channel/components/MessageList.js');
 require('./Channel/components/Message.js');
 require('./Channel/components/SuggestedMentionList.js');
-require('./const-1726bde0.js');
-require('./ThreadProvider-8b0cf491.js');
+require('./const-640252c1.js');
+require('./Thread/context.js');
 require('./Thread/context/types.js');
 require('./ui/DateSeparator.js');
 require('./ui/MessageInput.js');
-require('./index-759f2a26.js');
+require('./index-bdf7089c.js');
 require('dompurify');
-require('./consts-d3b53f23.js');
-require('./consts-bf228385.js');
-require('./tokenize-9296fc47.js');
+require('./consts-a3b7ae99.js');
+require('./consts-85cd42fa.js');
+require('./tokenize-91bdbeb0.js');
 require('./ui/MessageContent.js');
 require('./ui/MessageItemMenu.js');
-require('./types-0b5148cb.js');
+require('./types-31ed2276.js');
 require('./ui/MessageItemReactionMenu.js');
 require('./ui/ReactionButton.js');
 require('./ui/EmojiReactions.js');
@@ -114,27 +117,27 @@ require('./ui/TooltipWrapper.js');
 require('./Message/context.js');
 require('./ui/AdminMessage.js');
 require('./ui/TextMessageItemBody.js');
-require('./index-2ab19f9b.js');
+require('./index-e81e2882.js');
 require('./ui/MentionLabel.js');
 require('./ui/LinkLabel.js');
 require('./ui/FileMessageItemBody.js');
 require('./ui/ThumbnailMessageItemBody.js');
-require('./utils-418b4438.js');
+require('./utils-851724e0.js');
 require('./ui/OGMessageItemBody.js');
 require('./ui/UnknownMessageItemBody.js');
 require('./ui/QuoteMessage.js');
-require('./index-81baccd0.js');
+require('./index-0a25b9b2.js');
 require('./ui/ThreadReplies.js');
 require('./ui/VoiceMessageItemBody.js');
 require('./ui/ProgressBar.js');
 require('./VoicePlayer/useVoicePlayer.js');
 require('./ui/PlaybackTime.js');
-require('./index-4b5a006d.js');
-require('./index-857630c5.js');
+require('./useStatefulFileInfoList-aa70b6b9.js');
+require('./index-7b0c6630.js');
 require('./Channel/components/FileViewer.js');
 require('./Channel/components/RemoveMessageModal.js');
-require('./stringFormatterUtils-8d6592ca.js');
-require('./index-7c374c20.js');
+require('./stringFormatterUtils-e324636c.js');
+require('./index-c22e0cbf.js');
 require('./Message/hooks/useDirtyGetMentions.js');
 require('./Channel/utils/getMessagePartsInfo.js');
 require('./Channel/utils/compareMessagesForGrouping.js');
@@ -142,9 +145,9 @@ require('./Channel/components/UnreadCount.js');
 require('./Channel/components/FrozenNotification.js');
 require('./Channel/components/MessageInput.js');
 require('./ui/QuoteMessageInput.js');
-require('./useHandleUploadFiles-b2fc56e5.js');
+require('./useHandleUploadFiles-fbe6ad64.js');
 require('./VoiceRecorder/useVoiceRecorder.js');
-require('./index-91b4af96.js');
+require('./index-ee3bf381.js');
 require('./ChannelSettings/components/ChannelSettingsUI.js');
 require('./ChannelSettings/context.js');
 require('./ChannelSettings/components/ChannelProfile.js');
@@ -152,10 +155,10 @@ require('./ChannelSettings/components/EditDetailsModal.js');
 require('./ChannelSettings/components/ModerationPanel.js');
 require('./ui/Accordion.js');
 require('./ui/AccordionGroup.js');
-require('./context-bd2878ff.js');
+require('./context-9814fafe.js');
 require('./ui/Toggle.js');
 require('./ChannelSettings/components/UserListItem.js');
-require('./MemberList-26b8de48.js');
+require('./MemberList-529a0086.js');
 require('./ChannelSettings/components/LeaveChannel.js');
 require('./ChannelSettings/components/UserPanel.js');
 require('./MessageSearch/components/MessageSearchUI.js');
@@ -164,7 +167,7 @@ require('./ui/MessageSearchItem.js');
 require('./ui/MessageSearchFileItem.js');
 require('./Thread/components/ThreadUI.js');
 require('./Thread/components/ParentMessageInfo.js');
-require('./RemoveMessageModal-dfeeb36a.js');
+require('./RemoveMessageModal-f029d40e.js');
 require('./Thread/components/ParentMessageInfoItem.js');
 require('./Thread/components/ThreadHeader.js');
 require('./Thread/components/ThreadList.js');
@@ -175,34 +178,33 @@ require('./Thread/components/ThreadMessageInput.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-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] = React.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 = React.useState(null),
+    animatedMessageId = _a[0],
+    setAnimatedMessageId = _a[1];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-app__wrap"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -212,7 +214,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) {
@@ -222,28 +224,21 @@ const DesktopLayout = props => {
       }
     }
   })), /*#__PURE__*/React__default["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["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') {
@@ -251,11 +246,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') {
@@ -263,10 +255,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,
@@ -282,17 +274,17 @@ const DesktopLayout = props => {
   }, /*#__PURE__*/React__default["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["default"].createElement("div", {
     className: "sendbird-app__searchpanel-wrap"
   }, /*#__PURE__*/React__default["default"].createElement(MessageSearch, {
     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 {
@@ -300,113 +292,111 @@ const DesktopLayout = props => {
         setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
       }
     },
-    onCloseClick: () => {
+    onCloseClick: function () {
       setShowSearch(false);
     }
   })), showThread && /*#__PURE__*/React__default["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] = React.useState(PANELS.CHANNEL_LIST);
-  const [animatedMessageId, setAnimatedMessageId] = React.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
-  } = VoicePlayer_context.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 = React.useState(PANELS.CHANNEL_LIST),
+    panel = _d[0],
+    setPanel = _d[1];
+  var _e = React.useState(null),
+    animatedMessageId = _e[0],
+    setAnimatedMessageId = _e[1];
+  var store = useSendbirdStateContext.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 = VoicePlayer_context.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);
   };
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (panel !== PANELS.CHANNEL) {
-      goToMessage(null, () => setAnimatedMessageId(null));
+      goToMessage(null, function () {
+        return setAnimatedMessageId(null);
+      });
     }
   }, [panel]);
-  React.useEffect(() => {
-    var _sdk$groupChannel;
-    const handlerId = uuid.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 groupChannel.GroupChannelHandler({
-        onUserBanned: (groupChannel, user) => {
+  React.useEffect(function () {
+    var _a, _b;
+    var handlerId = uuid.uuidv4();
+    if ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
+      var handler = new groupChannel.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
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (panel === PANELS.THREAD) {
       setPanel(PANELS.CHANNEL);
     }
@@ -417,7 +407,7 @@ const MobileLayout = props => {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default["default"].createElement(ChannelList, {
     onProfileEditSuccess: onProfileEditSuccess,
-    onChannelSelect: channel => {
+    onChannelSelect: function (channel) {
       setCurrentChannel(channel);
       setPanel(PANELS.CHANNEL);
     },
@@ -430,10 +420,10 @@ const MobileLayout = props => {
   }, /*#__PURE__*/React__default["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(VoicePlayer_context.ALL);
     },
@@ -444,23 +434,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);
@@ -470,22 +455,22 @@ const MobileLayout = props => {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default["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["default"].createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default["default"].createElement(MessageSearch, {
     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);
       });
     }
@@ -494,17 +479,15 @@ const MobileLayout = props => {
   }, /*#__PURE__*/React__default["default"].createElement(Thread, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
     message: threadTargetMessage,
-    onHeaderActionClick: () => {
+    onHeaderActionClick: function () {
       setPanel(PANELS.CHANNEL);
       pause(VoicePlayer_context.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);
       });
@@ -512,35 +495,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] = React.useState(false);
-  const [threadTargetMessage, setThreadTargetMessage] = React.useState(null);
-  const [showSettings, setShowSettings] = React.useState(false);
-  const [showSearch, setShowSearch] = React.useState(false);
-  const [highlightedMessage, setHighlightedMessage] = React.useState(null);
-  const [startingPoint, setStartingPoint] = React.useState(null);
-  const {
-    isMobile
-  } = MediaQueryContext.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.useSendbirdStateContext();
+  var globalConfigs = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config;
+  var _d = React.useState(false),
+    showThread = _d[0],
+    setShowThread = _d[1];
+  var _e = React.useState(null),
+    threadTargetMessage = _e[0],
+    setThreadTargetMessage = _e[1];
+  var _f = React.useState(false),
+    showSettings = _f[0],
+    setShowSettings = _f[1];
+  var _g = React.useState(false),
+    showSearch = _g[0],
+    setShowSearch = _g[1];
+  var _h = React.useState(null),
+    highlightedMessage = _h[0],
+    setHighlightedMessage = _h[1];
+  var _j = React.useState(null),
+    startingPoint = _j[0],
+    setStartingPoint = _j[1];
+  var isMobile = MediaQueryContext.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["default"].createElement(React__default["default"].Fragment, null, isMobile ? /*#__PURE__*/React__default["default"].createElement(MobileLayout, {
     replyType: replyType,
     showSearchIcon: showSearchIcon,
@@ -587,45 +577,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] = React.useState(null);
-  return /*#__PURE__*/React__default["default"].createElement(SendbirdProvider, {
+  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 = React.useState(null),
+    currentChannel = _w[0],
+    setCurrentChannel = _w[1];
+  return /*#__PURE__*/React__default["default"].createElement(SendbirdProvider.SendbirdProvider, {
     stringSet: stringSet,
     appId: appId,
     userId: userId,
@@ -649,7 +663,7 @@ function App(props) {
     isVoiceMessageEnabled: isVoiceMessageEnabled,
     isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
     voiceRecord: voiceRecord,
-    onUserProfileMessage: channel => {
+    onUserProfileMessage: function (channel) {
       setCurrentChannel(channel);
     },
     isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList,
@@ -659,7 +673,8 @@ function App(props) {
     uikitOptions: uikitOptions,
     isUserIdUsedForNickname: isUserIdUsedForNickname,
     sdkInitParams: sdkInitParams,
-    customExtensionParams: customExtensionParams
+    customExtensionParams: customExtensionParams,
+    eventHandlers: eventHandlers
   }, /*#__PURE__*/React__default["default"].createElement(AppLayout, {
     isReactionEnabled: isReactionEnabled,
     replyType: replyType,
@@ -672,95 +687,6 @@ function App(props) {
     setCurrentChannel: setCurrentChannel
   }));
 }
-App.propTypes = {
-  appId: PropTypes__default["default"].string.isRequired,
-  userId: PropTypes__default["default"].string.isRequired,
-  accessToken: PropTypes__default["default"].string,
-  customApiHost: PropTypes__default["default"].string,
-  customWebSocketHost: PropTypes__default["default"].string,
-  theme: PropTypes__default["default"].string,
-  userListQuery: PropTypes__default["default"].func,
-  nickname: PropTypes__default["default"].string,
-  profileUrl: PropTypes__default["default"].string,
-  breakpoint: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-  allowProfileEdit: PropTypes__default["default"].bool,
-  disableUserProfile: PropTypes__default["default"].bool,
-  disableMarkAsDelivered: PropTypes__default["default"].bool,
-  renderUserProfile: PropTypes__default["default"].func,
-  onProfileEditSuccess: PropTypes__default["default"].func,
-  dateLocale: PropTypes__default["default"].shape({}),
-  config: PropTypes__default["default"].shape({
-    // None Error Warning Info 'All/Debug'
-    logLevel: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
-    isREMUnitEnabled: PropTypes__default["default"].bool
-  }),
-  uikitOptions: PropTypes__default["default"].shape({}),
-  isReactionEnabled: PropTypes__default["default"].bool,
-  replyType: PropTypes__default["default"].oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
-  showSearchIcon: PropTypes__default["default"].bool,
-  isMessageGroupingEnabled: PropTypes__default["default"].bool,
-  stringSet: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
-  colorSet: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
-  imageCompression: PropTypes__default["default"].shape({
-    compressionRate: PropTypes__default["default"].number,
-    resizingWidth: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-    resizingHeight: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
-  }),
-  disableAutoSelect: PropTypes__default["default"].bool,
-  isMentionEnabled: PropTypes__default["default"].bool,
-  isVoiceMessageEnabled: PropTypes__default["default"].bool,
-  voiceRecord: PropTypes__default["default"].shape({
-    maxRecordingTime: PropTypes__default["default"].number,
-    minRecordingTime: PropTypes__default["default"].number
-  }),
-  isMultipleFilesMessageEnabled: PropTypes__default["default"].bool,
-  isTypingIndicatorEnabledOnChannelList: PropTypes__default["default"].bool,
-  isMessageReceiptStatusEnabledOnChannelList: PropTypes__default["default"].bool,
-  isUserIdUsedForNickname: PropTypes__default["default"].bool,
-  sdkInitParams: PropTypes__default["default"].shape({}),
-  customExtensionParams: PropTypes__default["default"].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: consts.VOICE_RECORDER_DEFAULT_MAX,
-    minRecordingTime: consts.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
-};
 
 module.exports = App;
 //# sourceMappingURL=App.js.map