@sendbird/uikit-react 3.14.12 → 3.14.13

package/cjs/chunks/{bundle-Cg6OS8uW.js → bundle-DCCzIB4Z.js}

@@ -1,38 +1,40 @@
 'use strict';
 
-var _tslib = require('./bundle-Cu2j1EmN.js');
+var _tslib = require('./bundle-BSZgogl8.js');
 var React = require('react');
 var SendbirdChat = require('@sendbird/chat');
-var LocalizationContext = require('./bundle-Bq4FcvTF.js');
+var LocalizationContext = require('./bundle-BZCLEq3c.js');
 var ChannelSettings_context = require('../ChannelSettings/context.js');
 var ui_Button = require('../ui/Button.js');
-var UserListItemMenu = require('./bundle-BGntYUSD.js');
+var UserListItemMenu = require('./bundle-Tcfsteoj.js');
 var ui_UserListItem = require('../ui/UserListItem.js');
-var ui_Modal = require('./bundle-1dGjBLMq.js');
-var utils = require('./bundle-CO52Wsr3.js');
-var index = require('./bundle-3sKikwZF.js');
-require('./bundle-BM95N32D.js');
+var ui_Modal = require('./bundle-BCx4TP9R.js');
+var utils = require('./bundle-BsUVmQmx.js');
+var index = require('./bundle-DpkHbKDj.js');
+require('./bundle-CLsH2CaE.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 function MembersModal(_a) {
     var _this = this;
-    var onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b;
-    var _c = React.useState([]), members = _c[0], setMembers = _c[1];
-    var _d = React.useState(null), memberQuery = _d[0], setMemberQuery = _d[1];
+    var onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
     var channel = ChannelSettings_context.useChannelSettingsContext().channel;
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
     React.useEffect(function () {
-        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
-            limit: 20,
-        });
+        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(_tslib.__assign({ limit: 20 }, memberListQueryParams));
         memberListQuery === null || memberListQuery === void 0 ? void 0 : memberListQuery.next().then(function (members) {
             setMembers(members);
         });
         setMemberQuery(memberListQuery !== null && memberListQuery !== void 0 ? memberListQuery : null);
     }, []);
-    return (React.createElement("div", null,
-        React.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS },
-            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS },
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
                     onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
                         return _tslib.__generator(this, function (_a) {
                             if (memberQuery && memberQuery.hasNext) {
@@ -43,10 +45,12 @@ function MembersModal(_a) {
                             return [2 /*return*/];
                         });
                     }); },
-                }) }, members.map(function (member) { return (React.createElement(React.Fragment, { key: member.userId }, renderUserListItem({
+                }) }, members.map(function (member, index) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+                // NOTE: This `index` is used to display the current user's user item at the top when customizing externally.
+                index: index,
                 user: member,
                 channel: channel,
-                renderListItemMenu: function (props) { return (React.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { onToggleOperatorState: function (_a) {
+                renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { onToggleOperatorState: function (_a) {
                         var isOperator = _a.newStatus;
                         var newMembers = _tslib.__spreadArray([], members, true);
                         for (var _i = 0, newMembers_1 = newMembers; _i < newMembers_1.length; _i++) {
@@ -80,7 +84,7 @@ function MembersModal(_a) {
 function InviteUsersModal(_a) {
     var _this = this;
     var _b, _c, _d;
-    var onCancel = _a.onCancel, onSubmit = _a.onSubmit, _e = _a.renderUserListItem, renderUserListItem = _e === void 0 ? function (props) { return React.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _e;
+    var onCancel = _a.onCancel, onSubmit = _a.onSubmit, _e = _a.renderUserListItem, renderUserListItem = _e === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _e;
     var _f = React.useState([]), users = _f[0], setUsers = _f[1];
     var _g = React.useState(null), userListQuery = _g[0], setUserListQuery = _g[1];
     var _h = React.useState({}), selectedUsers = _h[0], setSelectedUsers = _h[1];
@@ -170,13 +174,13 @@ function InviteUsersModal(_a) {
         }); };
         fetchUsersAndSetQuery();
     }, [sdk]);
-    return (React.createElement("div", null,
-        React.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, disabled: Object.keys(selectedUsers).length === 0, submitText: stringSet.BUTTON__INVITE, type: ui_Button.ButtonTypes.PRIMARY, onCancel: function () { return onCancel(); }, onSubmit: onInviteUsers, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE },
-            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: onScroll },
-                React.createElement("div", { className: "sendbird-more-members__popup-scroll__inner" }, users.map(function (user) {
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, disabled: Object.keys(selectedUsers).length === 0, submitText: stringSet.BUTTON__INVITE, type: ui_Button.ButtonTypes.PRIMARY, onCancel: function () { return onCancel(); }, onSubmit: onInviteUsers, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE },
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: onScroll },
+                React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll__inner" }, users.map(function (user) {
                     var isMember = Boolean(membersMap ? membersMap[user.userId] : false);
                     var isSelected = Boolean(selectedUsers[user.userId]);
-                    return (React.createElement(React.Fragment, { key: user.userId }, renderUserListItem({
+                    return (React__default.default.createElement(React__default.default.Fragment, { key: user.userId }, renderUserListItem({
                         user: user,
                         checkBox: true,
                         checked: isMember || isSelected,
@@ -187,32 +191,34 @@ function InviteUsersModal(_a) {
 }
 
 var MemberList = function (_a) {
-    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b;
-    var _c = React.useState([]), members = _c[0], setMembers = _c[1];
-    var _d = React.useState(false), hasNext = _d[0], setHasNext = _d[1];
-    var _e = React.useState(false), showAllMembers = _e[0], setShowAllMembers = _e[1];
-    var _f = React.useState(false), showInviteUsers = _f[0], setShowInviteUsers = _f[1];
-    var _g = ChannelSettings_context.useChannelSettingsContext(), channel = _g.channel, forceUpdateUI = _g.forceUpdateUI;
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(false), hasNext = _e[0], setHasNext = _e[1];
+    var _f = React.useState(false), showAllMembers = _f[0], setShowAllMembers = _f[1];
+    var _g = React.useState(false), showInviteUsers = _g[0], setShowInviteUsers = _g[1];
+    var _h = ChannelSettings_context.useChannelSettingsContext(), channel = _h.channel, forceUpdateUI = _h.forceUpdateUI;
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
     var refreshList = React.useCallback(function () {
         if (!channel) {
             setMembers([]);
             return;
         }
-        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({ limit: 10 });
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(_tslib.__assign({ limit: 10 }, memberListQueryParams));
         memberUserListQuery.next().then(function (members) {
             setMembers(members);
             setHasNext(memberUserListQuery.hasNext);
         });
     }, [channel === null || channel === void 0 ? void 0 : channel.url, channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery]);
     React.useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
-    return (React.createElement("div", { className: "sendbird-channel-settings-member-list" },
-        members.map(function (member) { return (React.createElement(React.Fragment, { key: member.userId }, renderUserListItem({
+    return (React__default.default.createElement("div", { className: "sendbird-channel-settings-member-list" },
+        members.map(function (member, index) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+            // NOTE: This `index` is used to display the current user's user item at the top when customizing externally.
+            index: index,
             user: member,
             channel: channel,
             size: 'small',
             avatarSize: '24px',
-            renderListItemMenu: function (props) { return (React.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { onToggleOperatorState: function (_a) {
+            renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { onToggleOperatorState: function (_a) {
                     var isOperator = _a.newStatus;
                     var newMembers = _tslib.__spreadArray([], members, true);
                     for (var _i = 0, newMembers_1 = newMembers; _i < newMembers_1.length; _i++) {
@@ -241,15 +247,15 @@ var MemberList = function (_a) {
                     }));
                 } }))); },
         }))); }),
-        React.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
-            hasNext && (React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowAllMembers(true); } }, stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS)),
-            React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowInviteUsers(true); } }, stringSet.CHANNEL_SETTING__MEMBERS__INVITE_MEMBER)),
-        showAllMembers && (React.createElement(MembersModal, { onCancel: function () {
+        React__default.default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            hasNext && (React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowAllMembers(true); } }, stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS)),
+            React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowInviteUsers(true); } }, stringSet.CHANNEL_SETTING__MEMBERS__INVITE_MEMBER)),
+        showAllMembers && (React__default.default.createElement(MembersModal, { onCancel: function () {
                 setShowAllMembers(false);
                 refreshList();
                 forceUpdateUI();
-            }, renderUserListItem: renderUserListItem })),
-        showInviteUsers && (React.createElement(InviteUsersModal, { onCancel: function () { return setShowInviteUsers(false); }, onSubmit: function () {
+            }, renderUserListItem: renderUserListItem, memberListQueryParams: memberListQueryParams })),
+        showInviteUsers && (React__default.default.createElement(InviteUsersModal, { onCancel: function () { return setShowInviteUsers(false); }, onSubmit: function () {
                 setShowInviteUsers(false);
                 refreshList();
                 forceUpdateUI();
@@ -257,5 +263,4 @@ var MemberList = function (_a) {
 };
 
 exports.MemberList = MemberList;
-exports.MembersModal = MembersModal;
-//# sourceMappingURL=bundle-Cg6OS8uW.js.map
+//# sourceMappingURL=bundle-DCCzIB4Z.js.map

package/cjs/chunks/bundle-DCCzIB4Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DCCzIB4Z.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-CxhOA6gq.js → bundle-DFDL4gbf.js}

@@ -1,19 +1,23 @@
 'use strict';
 
 var React = require('react');
-var utils = require('./bundle-CO52Wsr3.js');
+var utils = require('./bundle-BsUVmQmx.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var ui_ContextMenu = require('./bundle-B_eF_lLw.js');
-var _tslib = require('./bundle-Cu2j1EmN.js');
+var ui_ContextMenu = require('./bundle-5SGoePaQ.js');
+var _tslib = require('./bundle-BSZgogl8.js');
 var ui_IconButton = require('../ui/IconButton.js');
 var ui_Icon = require('../ui/Icon.js');
-var index = require('./bundle-VyDwmxN4.js');
-var LocalizationContext = require('./bundle-Bq4FcvTF.js');
+var index = require('./bundle-E1Tkj9Pc.js');
+var LocalizationContext = require('./bundle-BZCLEq3c.js');
 var SendbirdChat = require('@sendbird/chat');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 var TriggerIcon = function (_a) {
-    var ref = _a.ref, _b = _a.onClick, onClick = _b === void 0 ? utils.noop : _b, _c = _a.onBlur, onBlur = _c === void 0 ? utils.noop : _c, _d = _a.renderIcon, renderIcon = _d === void 0 ? function (props) { return React.createElement(ui_Icon.default, _tslib.__assign({}, props)); } : _d;
-    return (React.createElement(ui_IconButton, { ref: ref, width: "32px", height: "32px", onClick: onClick, onBlur: onBlur }, renderIcon({
+    var ref = _a.ref, _b = _a.onClick, onClick = _b === void 0 ? utils.noop : _b, _c = _a.onBlur, onBlur = _c === void 0 ? utils.noop : _c, _d = _a.renderIcon, renderIcon = _d === void 0 ? function (props) { return React__default.default.createElement(ui_Icon.default, _tslib.__assign({}, props)); } : _d;
+    return (React__default.default.createElement(ui_IconButton, { ref: ref, width: "32px", height: "32px", onClick: onClick, onBlur: onBlur }, renderIcon({
         type: ui_Icon.IconTypes.MORE,
         fillColor: ui_Icon.IconColors.CONTENT_INVERSE,
         width: '24px',
@@ -24,7 +28,7 @@ var CopyMenuItem = function (props) {
     var _a;
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = ui_ContextMenu.useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu;
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
             var _a;
             if (index.isUserMessage(message))
                 index.copyToClipboard(message.message);
@@ -36,7 +40,7 @@ var ReplyMenuItem = function (props) {
     var _a;
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = ui_ContextMenu.useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu, setQuoteMessage = _b.setQuoteMessage;
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { disabled: message.parentMessageId > 0, onClick: function (e) {
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { disabled: message.parentMessageId > 0, onClick: function (e) {
             var _a;
             setQuoteMessage(message);
             hideMenu();
@@ -47,7 +51,7 @@ var ThreadMenuItem = function (props) {
     var _a;
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = ui_ContextMenu.useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu, onReplyInThread = _b.onReplyInThread;
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
             var _a;
             onReplyInThread({ message: message });
             hideMenu();
@@ -58,7 +62,7 @@ var OpenInChannelMenuItem = function (props) {
     var _a;
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = ui_ContextMenu.useMessageMenuContext(), hideMenu = _b.hideMenu, onMoveToParentMessage = _b.onMoveToParentMessage;
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
             var _a;
             onMoveToParentMessage();
             hideMenu();
@@ -69,7 +73,7 @@ var EditMenuItem = function (props) {
     var _a;
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = ui_ContextMenu.useMessageMenuContext(), hideMenu = _b.hideMenu, showEdit = _b.showEdit, isOnline = _b.isOnline;
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
             var _a;
             if (isOnline) {
                 showEdit(true);
@@ -82,7 +86,7 @@ var ResendMenuItem = function (props) {
     var _a;
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = ui_ContextMenu.useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu, resendMessage = _b.resendMessage, isOnline = _b.isOnline;
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
             var _a;
             if (isOnline) {
                 resendMessage(message);
@@ -95,7 +99,7 @@ var DeleteMenuItem = function (props) {
     var _a, _b, _c;
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _d = ui_ContextMenu.useMessageMenuContext(), message = _d.message, hideMenu = _d.hideMenu, deleteMessage = _d.deleteMessage, showRemove = _d.showRemove, isOnline = _d.isOnline, disableDeleteMessage = _d.disableDeleteMessage;
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { disabled: typeof disableDeleteMessage === 'boolean'
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { disabled: typeof disableDeleteMessage === 'boolean'
             ? disableDeleteMessage
             : ((_b = (_a = message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) !== null && _b !== void 0 ? _b : 0) > 0, onClick: function (e) {
             var _a;
@@ -173,8 +177,8 @@ var MessageMenu = function (_a) {
         onReplyInThread: onReplyInThread,
         onMoveToParentMessage: onMoveToParentMessage,
     };
-    return (React.createElement("div", { className: utils.classnames('sendbird-message-menu', className), ref: containerRef },
-        React.createElement(ui_ContextMenu.MessageMenuProvider, { value: {
+    return (React__default.default.createElement("div", { className: utils.classnames('sendbird-message-menu', className), ref: containerRef },
+        React__default.default.createElement(ui_ContextMenu.MessageMenuProvider, { value: {
                 message: message,
                 hideMenu: hideMenu,
                 showMenu: showMenu,
@@ -192,7 +196,7 @@ var MessageMenu = function (_a) {
                 containerRef: containerRef,
             } },
             (renderTrigger({ ref: triggerRef, onClick: toggleMenu })),
-            isMenuVisible && (React.createElement(ui_ContextMenu.MenuItems, { id: ui_ContextMenu.getObservingId(message.messageId), parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: hideMenu, openLeft: isByMe }, (_b = renderMenuItems === null || renderMenuItems === void 0 ? void 0 : renderMenuItems({
+            isMenuVisible && (React__default.default.createElement(ui_ContextMenu.MenuItems, { id: ui_ContextMenu.getObservingId(message.messageId), parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: hideMenu, openLeft: isByMe }, (_b = renderMenuItems === null || renderMenuItems === void 0 ? void 0 : renderMenuItems({
                 items: {
                     CopyMenuItem: CopyMenuItem,
                     ReplyMenuItem: ReplyMenuItem,
@@ -202,15 +206,15 @@ var MessageMenu = function (_a) {
                     ResendMenuItem: ResendMenuItem,
                     DeleteMenuItem: DeleteMenuItem,
                 },
-            })) !== null && _b !== void 0 ? _b : (React.createElement(React.Fragment, null,
-                showMenuItemCopy(params) && React.createElement(CopyMenuItem, null),
-                showMenuItemReply(params) && React.createElement(ReplyMenuItem, null),
-                showMenuItemThread(params) && React.createElement(ThreadMenuItem, null),
-                showMenuItemOpenInChannel(params) && React.createElement(OpenInChannelMenuItem, null),
-                showMenuItemEdit(params) && React.createElement(EditMenuItem, null),
-                showMenuItemResend(params) && React.createElement(ResendMenuItem, null),
-                showMenuItemDelete(params) && React.createElement(DeleteMenuItem, null))))))));
+            })) !== null && _b !== void 0 ? _b : (React__default.default.createElement(React__default.default.Fragment, null,
+                showMenuItemCopy(params) && React__default.default.createElement(CopyMenuItem, null),
+                showMenuItemReply(params) && React__default.default.createElement(ReplyMenuItem, null),
+                showMenuItemThread(params) && React__default.default.createElement(ThreadMenuItem, null),
+                showMenuItemOpenInChannel(params) && React__default.default.createElement(OpenInChannelMenuItem, null),
+                showMenuItemEdit(params) && React__default.default.createElement(EditMenuItem, null),
+                showMenuItemResend(params) && React__default.default.createElement(ResendMenuItem, null),
+                showMenuItemDelete(params) && React__default.default.createElement(DeleteMenuItem, null))))))));
 };
 
 exports.MessageMenu = MessageMenu;
-//# sourceMappingURL=bundle-CxhOA6gq.js.map
+//# sourceMappingURL=bundle-DFDL4gbf.js.map

package/cjs/chunks/bundle-DFDL4gbf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DFDL4gbf.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-ChPz-oxg.js → bundle-DHbhzk3E.js}

@@ -4,6 +4,10 @@ var React = require('react');
 var sendbirdSelectors = require('../sendbirdSelectors.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 exports.CHANNEL_TYPE = void 0;
 (function (CHANNEL_TYPE) {
     CHANNEL_TYPE["GROUP"] = "group";
@@ -11,7 +15,7 @@ exports.CHANNEL_TYPE = void 0;
     CHANNEL_TYPE["BROADCAST"] = "broadcast";
 })(exports.CHANNEL_TYPE || (exports.CHANNEL_TYPE = {}));
 
-var CreateChannelContext = React.createContext(null);
+var CreateChannelContext = React__default.default.createContext(null);
 var CreateChannelProvider = function (props) {
     var _a;
     var children = props.children, onCreateChannelClick = props.onCreateChannelClick, onBeforeCreateChannel = props.onBeforeCreateChannel, onChannelCreated = props.onChannelCreated, userListQuery = props.userListQuery, onCreateChannel = props.onCreateChannel, overrideInviteUser = props.overrideInviteUser;
@@ -19,7 +23,7 @@ var CreateChannelProvider = function (props) {
     var _userListQuery = userListQuery !== null && userListQuery !== void 0 ? userListQuery : (_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.userListQuery;
     var _b = React.useState(0), step = _b[0], setStep = _b[1];
     var _c = React.useState(exports.CHANNEL_TYPE.GROUP), type = _c[0], setType = _c[1];
-    return (React.createElement(CreateChannelContext.Provider, { value: {
+    return (React__default.default.createElement(CreateChannelContext.Provider, { value: {
             sdk: store.stores.sdkStore.sdk,
             createChannel: sendbirdSelectors.getCreateGroupChannel(store),
             onCreateChannelClick: onCreateChannelClick,
@@ -35,7 +39,7 @@ var CreateChannelProvider = function (props) {
         } }, children));
 };
 var useCreateChannelContext = function () {
-    var context = React.useContext(CreateChannelContext);
+    var context = React__default.default.useContext(CreateChannelContext);
     if (!context)
         throw new Error('CreateChannelContext not found. Use within the CreateChannel module.');
     return context;
@@ -43,4 +47,4 @@ var useCreateChannelContext = function () {
 
 exports.CreateChannelProvider = CreateChannelProvider;
 exports.useCreateChannelContext = useCreateChannelContext;
-//# sourceMappingURL=bundle-ChPz-oxg.js.map
+//# sourceMappingURL=bundle-DHbhzk3E.js.map

package/cjs/chunks/bundle-DHbhzk3E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DHbhzk3E.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-DQMzjDLY.js → bundle-DIWdCgyY.js}

@@ -27,4 +27,4 @@ var copyToClipboard = function (text) {
 };
 
 exports.copyToClipboard = copyToClipboard;
-//# sourceMappingURL=bundle-DQMzjDLY.js.map
+//# sourceMappingURL=bundle-DIWdCgyY.js.map

package/cjs/chunks/bundle-DIWdCgyY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DIWdCgyY.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-BqL8lmhl.js → bundle-DPZ5pgOH.js}

@@ -3,4 +3,4 @@
 var MENTION_USER_LABEL_CLASSNAME = 'sendbird-mention-user-label';
 
 exports.MENTION_USER_LABEL_CLASSNAME = MENTION_USER_LABEL_CLASSNAME;
-//# sourceMappingURL=bundle-BqL8lmhl.js.map
+//# sourceMappingURL=bundle-DPZ5pgOH.js.map

package/cjs/chunks/bundle-DPZ5pgOH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DPZ5pgOH.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/chunks/{bundle-D0U-xAFE.js → bundle-DW5WyVEg.js}

@@ -2,10 +2,14 @@
 
 var React = require('react');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 var DEFAULT_MOBILE = false;
 // const DEFAULT_MOBILE = '768px';
 var MOBILE_CLASSNAME = 'sendbird--mobile-mode';
-var MediaQueryContext = React.createContext({
+var MediaQueryContext = React__default.default.createContext({
     breakpoint: DEFAULT_MOBILE,
     isMobile: false,
 });
@@ -66,10 +70,10 @@ var MediaQueryProvider = function (props) {
             (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: removeEventListener', { updateSize: updateSize });
         };
     }, [breakpoint]);
-    return (React.createElement(MediaQueryContext.Provider, { value: { breakpoint: breakpoint, isMobile: isMobile } }, children));
+    return (React__default.default.createElement(MediaQueryContext.Provider, { value: { breakpoint: breakpoint, isMobile: isMobile } }, children));
 };
-var useMediaQueryContext = function () { return React.useContext(MediaQueryContext); };
+var useMediaQueryContext = function () { return React__default.default.useContext(MediaQueryContext); };
 
 exports.MediaQueryProvider = MediaQueryProvider;
 exports.useMediaQueryContext = useMediaQueryContext;
-//# sourceMappingURL=bundle-D0U-xAFE.js.map
+//# sourceMappingURL=bundle-DW5WyVEg.js.map

package/cjs/chunks/bundle-DW5WyVEg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DW5WyVEg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/bundle-DWHwWbeQ.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var GroupChannel_components_TypingIndicator = require('../GroupChannel/components/TypingIndicator.js');
+var index = require('./bundle-E1Tkj9Pc.js');
+var ui_ConnectionStatus = require('../ui/ConnectionStatus.js');
+var ui_PlaceHolder = require('../ui/PlaceHolder.js');
+var utils = require('./bundle-BsUVmQmx.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var GroupChannelUIView = function (props) {
+    var _a, _b, _c, _d;
+    var isLoading = props.isLoading, isInvalid = props.isInvalid, channelUrl = props.channelUrl;
+    var _e = utils.deleteNullish(props), renderChannelHeader = _e.renderChannelHeader, renderMessageList = _e.renderMessageList, renderMessageInput = _e.renderMessageInput, renderTypingIndicator = _e.renderTypingIndicator, renderPlaceholderLoader = _e.renderPlaceholderLoader, renderPlaceholderInvalid = _e.renderPlaceholderInvalid;
+    var _f = useSendbirdStateContext.useSendbirdStateContext(), stores = _f.stores, config = _f.config;
+    var sdkError = (_a = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _a === void 0 ? void 0 : _a.error;
+    var logger = config.logger, isOnline = config.isOnline;
+    // Note: This is not a loading status of the message list.
+    //  It is just for custom props from the Channel module and is not used in the GroupChannel module. (We should remove this in v4)
+    if (isLoading) {
+        return React__default.default.createElement("div", { className: "sendbird-conversation" }, (renderPlaceholderLoader === null || renderPlaceholderLoader === void 0 ? void 0 : renderPlaceholderLoader()) || React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING }));
+    }
+    if (!channelUrl) {
+        return (React__default.default.createElement("div", { className: "sendbird-conversation" }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS })));
+    }
+    if (isInvalid) {
+        return React__default.default.createElement("div", { className: "sendbird-conversation" }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG }));
+    }
+    if (sdkError) {
+        return (React__default.default.createElement("div", { className: "sendbird-conversation" }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || (React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG, retryToConnect: function () {
+                logger.info('Channel: reconnecting');
+                // reconnect();
+            } }))));
+    }
+    return (React__default.default.createElement("div", { className: "sendbird-conversation" }, renderChannelHeader === null || renderChannelHeader === void 0 ? void 0 :
+        renderChannelHeader({ className: 'sendbird-conversation__channel-header' }), renderMessageList === null || renderMessageList === void 0 ? void 0 :
+        renderMessageList(props),
+        React__default.default.createElement("div", { className: "sendbird-conversation__footer" }, renderMessageInput === null || renderMessageInput === void 0 ? void 0 :
+            renderMessageInput(),
+            React__default.default.createElement("div", { className: "sendbird-conversation__footer__typing-indicator" },
+                (renderTypingIndicator === null || renderTypingIndicator === void 0 ? void 0 : renderTypingIndicator())
+                    || (((_b = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _b === void 0 ? void 0 : _b.enableTypingIndicator) && ((_d = (_c = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _c === void 0 ? void 0 : _c.typingIndicatorTypes) === null || _d === void 0 ? void 0 : _d.has(index.TypingIndicatorType.Text)) && (React__default.default.createElement(GroupChannel_components_TypingIndicator.TypingIndicator, { channelUrl: channelUrl }))),
+                !isOnline && React__default.default.createElement(ui_ConnectionStatus, null)))));
+};
+
+exports.GroupChannelUIView = GroupChannelUIView;
+//# sourceMappingURL=bundle-DWHwWbeQ.js.map

package/cjs/chunks/bundle-DWHwWbeQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DWHwWbeQ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-S9DD9Vhs.js → bundle-DYiRJpFp.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./bundle-VyDwmxN4.js');
+var index = require('./bundle-E1Tkj9Pc.js');
 
 function getModalDeleteMessageTitle(stringSet, message) {
     return index.K(message)
@@ -14,4 +14,4 @@ function getModalDeleteMessageTitle(stringSet, message) {
 }
 
 exports.getModalDeleteMessageTitle = getModalDeleteMessageTitle;
-//# sourceMappingURL=bundle-S9DD9Vhs.js.map
+//# sourceMappingURL=bundle-DYiRJpFp.js.map

package/cjs/chunks/bundle-DYiRJpFp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DYiRJpFp.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-bgI8QY8V.js → bundle-Db2msOTT.js}

@@ -2,18 +2,22 @@
 
 var React = require('react');
 var DOMPurify = require('dompurify');
-var _const = require('./bundle-CWAjZyWA.js');
-var _const$1 = require('./bundle-BIlOa8cH.js');
-var _tslib = require('./bundle-Cu2j1EmN.js');
-var consts = require('./bundle-BqL8lmhl.js');
-var consts$2 = require('./bundle-CiIb5etk.js');
-var consts$1 = require('./bundle-BKID5CS2.js');
+var _const = require('./bundle-B8BijbtU.js');
+var _const$1 = require('./bundle-BhgTi0HE.js');
+var _tslib = require('./bundle-BSZgogl8.js');
+var consts = require('./bundle-DPZ5pgOH.js');
+var consts$2 = require('./bundle-CC7ewM-Z.js');
+var consts$1 = require('./bundle-CwwjS2wm.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var DOMPurify__default = /*#__PURE__*/_interopDefaultCompat(DOMPurify);
 
 function renderToString(_a) {
     var userId = _a.userId, nickname = _a.nickname;
     // donot change this template, it wont work
     var el = "<span data-userid=\"".concat(userId, "\" data-sb-mention=\"true\" class=\"").concat(consts.MENTION_USER_LABEL_CLASSNAME, "\">").concat(nickname, "</span>");
-    var purifier = DOMPurify(window);
+    var purifier = DOMPurify__default.default(window);
     var sanitized_ = purifier.sanitize(el);
     var token = sanitized_.split(' ');
     var spanTag = token[0], rest = token.slice(1);
@@ -211,7 +215,7 @@ function usePaste(_a) {
             return;
         }
         // has html, check if there are mentions, sanitize and insert
-        var purifier = DOMPurify(window);
+        var purifier = DOMPurify__default.default(window);
         var clean = purifier.sanitize(html);
         var pasteNode = createPasteNode();
         if (pasteNode) {
@@ -261,4 +265,4 @@ exports.nodeListToArray = nodeListToArray;
 exports.renderToString = renderToString;
 exports.sanitizeString = sanitizeString;
 exports.usePaste = usePaste;
-//# sourceMappingURL=bundle-bgI8QY8V.js.map
+//# sourceMappingURL=bundle-Db2msOTT.js.map

package/cjs/chunks/bundle-Db2msOTT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-Db2msOTT.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-zDgTxAsN.js → bundle-DeDM8_tg.js}

@@ -2,8 +2,8 @@
 
 var SendbirdChat = require('@sendbird/chat');
 var React = require('react');
-var uuid = require('./bundle-BkKs2HEQ.js');
-var _tslib = require('./bundle-Cu2j1EmN.js');
+var uuid = require('./bundle-DAzWBBxC.js');
+var _tslib = require('./bundle-BSZgogl8.js');
 
 function useOnlineStatus(sdk, logger) {
     var _a, _b;
@@ -199,4 +199,4 @@ exports.schedulerFactory = schedulerFactory;
 exports.useMarkAsDeliveredScheduler = useMarkAsDeliveredScheduler;
 exports.useOnlineStatus = useOnlineStatus;
 exports.useUnmount = useUnmount;
-//# sourceMappingURL=bundle-zDgTxAsN.js.map
+//# sourceMappingURL=bundle-DeDM8_tg.js.map

package/cjs/chunks/bundle-DeDM8_tg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DeDM8_tg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-B9w45biR.js → bundle-DneJah8w.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var consts = require('./bundle-DsscLs3k.js');
-var useThrottleCallback = require('./bundle-DONsST_H.js');
-var utils = require('./bundle-DFqn4B6U.js');
+var consts = require('./bundle-COzM5cWS.js');
+var useThrottleCallback = require('./bundle-ClXoWwwH.js');
+var utils = require('./bundle-xw9pjZRm.js');
 var uikitTools = require('@sendbird/uikit-tools');
 
 var DELAY = 100;
@@ -52,4 +52,4 @@ function useHandleOnScrollCallback(_a) {
 }
 
 exports.useHandleOnScrollCallback = useHandleOnScrollCallback;
-//# sourceMappingURL=bundle-B9w45biR.js.map
+//# sourceMappingURL=bundle-DneJah8w.js.map

package/cjs/chunks/bundle-DneJah8w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DneJah8w.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-3sKikwZF.js → bundle-DpkHbKDj.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var consts = require('./bundle-DsscLs3k.js');
-var utils = require('./bundle-DFqn4B6U.js');
+var consts = require('./bundle-COzM5cWS.js');
+var utils = require('./bundle-xw9pjZRm.js');
 var uikitTools = require('@sendbird/uikit-tools');
-var useThrottleCallback = require('./bundle-DONsST_H.js');
+var useThrottleCallback = require('./bundle-ClXoWwwH.js');
 
 var BUFFER_DELAY = 100;
 function useOnScrollPositionChangeDetector(params) {
@@ -29,4 +29,4 @@ function useOnScrollPositionChangeDetector(params) {
 }
 
 exports.useOnScrollPositionChangeDetector = useOnScrollPositionChangeDetector;
-//# sourceMappingURL=bundle-3sKikwZF.js.map
+//# sourceMappingURL=bundle-DpkHbKDj.js.map

package/cjs/chunks/bundle-DpkHbKDj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DpkHbKDj.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}