@sendbird/uikit-react 3.10.1 → 3.10.2-alpha.0

package/cjs/chunks/{bundle-GDX6wyym.js → bundle-bDQKUQ5r.js}

@@ -6,15 +6,16 @@ var ui_IconButton = require('../ui/IconButton.js');
 var ui_Icon = require('../ui/Icon.js');
 var ui_ContextMenu = require('../ui/ContextMenu.js');
 var ChannelSettings_components_UserListItem = require('../ChannelSettings/components/UserListItem.js');
-var _tslib = require('./bundle-bXLZZTmP.js');
-var ui_Modal = require('./bundle-Oc2T5_VP.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
+var ui_Modal = require('./bundle-6L4HCLmb.js');
 var ui_UserListItem = require('../ui/UserListItem.js');
-var utils = require('./bundle-LRCFL23q.js');
+var utils = require('./bundle-Y-_KhZFq.js');
 var ChannelSettings_context = require('../ChannelSettings/context.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var LocalizationContext = require('./bundle-qtXdbPNE.js');
-require('./bundle-7J3nX_hP.js');
-var uuid = require('./bundle-INJtS58R.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+require('./bundle-VxcYXhwp.js');
+var index = require('./bundle-zHDXCFIb.js');
+var uuid = require('./bundle-TB_UEIPg.js');
 
 function MembersModal(_a) {
     var _b;
@@ -115,69 +116,105 @@ function MembersModal(_a) {
                 } })); })))));
 }
 
-var isAboutSame = function (a, b, px) { return (Math.abs(a - b) <= px); };
 function InviteUsers(_a) {
+    var _this = this;
     var _b, _c, _d;
     var onCancel = _a.onCancel, onSubmit = _a.onSubmit;
-    var _e = React.useState([]), members = _e[0], setMembers = _e[1];
-    var _f = React.useState({}), selectedMembers = _f[0], setSelectedMembers = _f[1];
-    var _g = React.useState(null), userQuery = _g[0], setUserQuery = _g[1];
+    var _e = React.useState([]), users = _e[0], setUsers = _e[1];
+    var _f = React.useState(null), userListQuery = _f[0], setUserListQuery = _f[1];
+    var _g = React.useState({}), selectedUsers = _g[0], setSelectedUsers = _g[1];
     var state = useSendbirdStateContext.useSendbirdStateContext();
     var sdk = (_c = (_b = state === null || state === void 0 ? void 0 : state.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
     var globalUserListQuery = (_d = state === null || state === void 0 ? void 0 : state.config) === null || _d === void 0 ? void 0 : _d.userListQuery;
     var _h = ChannelSettings_context.useChannelSettingsContext(), channel = _h.channel, overrideInviteUser = _h.overrideInviteUser, queries = _h.queries;
-    var userFilledQuery = _tslib.__assign({}, queries === null || queries === void 0 ? void 0 : queries.applicationUserListQuery);
     var stringSet = LocalizationContext.useLocalization().stringSet;
+    var onScroll = index.useOnScrollPositionChangeDetector({
+        onReachedBottom: function () {
+            return _tslib.__awaiter(this, void 0, void 0, function () {
+                var users_1;
+                return _tslib.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(userListQuery === null || userListQuery === void 0 ? void 0 : userListQuery.hasNext)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, userListQuery.next()];
+                        case 1:
+                            users_1 = _a.sent();
+                            setUsers(function (prev) { return _tslib.__spreadArray(_tslib.__spreadArray([], prev, true), users_1, true); });
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        },
+    });
+    var onInviteUsers = function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+        var userIdsToInvite;
+        return _tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    userIdsToInvite = Object.keys(selectedUsers);
+                    if (!(typeof overrideInviteUser === 'function')) return [3 /*break*/, 1];
+                    overrideInviteUser({ users: userIdsToInvite, onClose: onCancel, channel: channel });
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, (channel === null || channel === void 0 ? void 0 : channel.inviteWithUserIds(userIdsToInvite))];
+                case 2:
+                    _a.sent();
+                    onSubmit(userIdsToInvite);
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var onSelectUser = function (user) {
+        setSelectedUsers(function (_a) {
+            var draft = _tslib.__rest(_a, []);
+            if (draft[user.userId]) {
+                delete draft[user.userId];
+            }
+            else {
+                draft[user.userId] = user;
+            }
+            return draft;
+        });
+    };
+    var membersMap = React.useMemo(function () {
+        var _a;
+        // UIKit policy: In a super or broadcast channel, do not check the members when inviting users.
+        if ((channel === null || channel === void 0 ? void 0 : channel.isSuper) || (channel === null || channel === void 0 ? void 0 : channel.isBroadcast))
+            return _a = {}, _a[sdk.currentUser.userId] = sdk.currentUser, _a;
+        return channel === null || channel === void 0 ? void 0 : channel.members.reduce(function (acc, cur) {
+            acc[cur.userId] = cur;
+            return acc;
+        }, {});
+    }, [channel === null || channel === void 0 ? void 0 : channel.members.length]);
     React.useEffect(function () {
-        var userListQuery = globalUserListQuery
-            ? globalUserListQuery()
-            : sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery(userFilledQuery);
-        if (userListQuery === null || userListQuery === void 0 ? void 0 : userListQuery.next) {
-            userListQuery.next().then(function (members) {
-                setMembers(members);
+        var fetchUsersAndSetQuery = function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+            var query, users_2;
+            var _a;
+            return _tslib.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        query = (_a = globalUserListQuery === null || globalUserListQuery === void 0 ? void 0 : globalUserListQuery()) !== null && _a !== void 0 ? _a : sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery(queries === null || queries === void 0 ? void 0 : queries.applicationUserListQuery);
+                        if (!query) return [3 /*break*/, 2];
+                        return [4 /*yield*/, query.next()];
+                    case 1:
+                        users_2 = _b.sent();
+                        setUserListQuery(query);
+                        setUsers(users_2);
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
             });
-            setUserQuery(userListQuery);
-        }
+        }); };
+        fetchUsersAndSetQuery();
     }, [sdk]);
     return (React.createElement("div", null,
-        React.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, disabled: Object.keys(selectedMembers).length === 0, submitText: stringSet.BUTTON__INVITE, type: ui_Button.ButtonTypes.PRIMARY, onCancel: function () { return onCancel(); }, onSubmit: function () {
-                var members = Object.keys(selectedMembers).filter(function (m) { return selectedMembers[m]; });
-                if (typeof overrideInviteUser === 'function') {
-                    overrideInviteUser({
-                        users: members,
-                        onClose: onCancel,
-                        channel: channel,
-                    });
-                    return;
-                }
-                channel === null || channel === void 0 ? void 0 : channel.inviteWithUserIds(members).then(function () {
-                    onSubmit(members);
-                });
-            }, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE },
-            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: function (e) {
-                    var hasNext = userQuery.hasNext;
-                    var target = e.target;
-                    var fetchMore = isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 20);
-                    if (hasNext && fetchMore) {
-                        userQuery.next().then(function (users) {
-                            setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), users, true));
-                        });
-                    }
-                } },
-                React.createElement("div", { className: "sendbird-more-members__popup-scroll__inner" }, members.map(function (member) {
-                    var _a;
-                    var isJoinedMember = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.some(function (_a) {
-                        var userId = _a.userId;
-                        return userId === (member === null || member === void 0 ? void 0 : member.userId);
-                    });
-                    return (React.createElement(ui_UserListItem, { checkBox: true, checked: isJoinedMember || selectedMembers[member.userId], disabled: isJoinedMember, onChange: function (event) {
-                            var _a;
-                            var modifiedSelectedMembers = _tslib.__assign(_tslib.__assign({}, selectedMembers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
-                            if (!event.target.checked) {
-                                delete modifiedSelectedMembers[event.target.id];
-                            }
-                            setSelectedMembers(modifiedSelectedMembers);
-                        }, user: member, key: member.userId }));
+        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) {
+                    var isMember = Boolean(membersMap[user.userId]);
+                    var isSelected = Boolean(selectedUsers[user.userId]);
+                    return (React.createElement(ui_UserListItem, { key: user.userId, checkBox: true, checked: isMember || isSelected, disabled: isMember, user: user, onChange: function () { return onSelectUser(user); } }));
                 }))))));
 }
 
@@ -276,4 +313,4 @@ var MemberList = function () {
 };
 
 exports.MemberList = MemberList;
-//# sourceMappingURL=bundle-GDX6wyym.js.map
+//# sourceMappingURL=bundle-bDQKUQ5r.js.map

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

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

package/cjs/chunks/{bundle-3K153hLM.js → bundle-eCBAJmJN.js}

@@ -1,10 +1,9 @@
 'use strict';
 
 var React = require('react');
-var pubSub_topics = require('./bundle-135pRm7i.js');
-var utils = require('./bundle-XaLiuh0L.js');
-var index = require('./bundle-6ZegaDWX.js');
-var utils_message_getOutgoingMessageState = require('../utils/message/getOutgoingMessageState.js');
+var pubSub_topics = require('./bundle-77qvrXp8.js');
+var utils = require('./bundle-CrbMqpah.js');
+require('../utils/message/getOutgoingMessageState.js');
 
 var getNicknamesMapFromMembers = function (members) {
     if (members === void 0) { members = []; }
@@ -50,40 +49,6 @@ function compareIds(a, b) {
     var bString = b.toString();
     return aString === bString;
 }
-var getMessageCreatedAt = function (message) { return index.format(message.createdAt, 'p'); };
-var isReadMessage = function (channel, message) { return (utils_message_getOutgoingMessageState.getOutgoingMessageState(channel, message) === utils_message_getOutgoingMessageState.OutgoingMessageStates.READ); };
-var isSameGroup = function (message, comparingMessage, currentChannel) {
-    var _a, _b, _c, _d;
-    if (!(message
-        && comparingMessage
-        && message.messageType
-        && message.messageType !== 'admin'
-        && comparingMessage.messageType
-        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.messageType) !== 'admin'
-        && (message === null || message === void 0 ? void 0 : message.sender)
-        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender)
-        && (message === null || message === void 0 ? void 0 : message.createdAt)
-        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.createdAt)
-        && ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId)
-        && ((_b = comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender) === null || _b === void 0 ? void 0 : _b.userId))) {
-        return false;
-    }
-    return ((message === null || message === void 0 ? void 0 : message.sendingStatus) === (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sendingStatus)
-        && ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.userId) === ((_d = comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender) === null || _d === void 0 ? void 0 : _d.userId)
-        && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage)
-        && isReadMessage(currentChannel, message) === isReadMessage(currentChannel, comparingMessage));
-};
-var compareMessagesForGrouping = function (prevMessage, currMessage, nextMessage, currentChannel, replyType) {
-    if (replyType === 'THREAD' && (currMessage === null || currMessage === void 0 ? void 0 : currMessage.threadInfo)) {
-        return [false, false];
-    }
-    var sendingStatus = (currMessage === null || currMessage === void 0 ? void 0 : currMessage.sendingStatus) || '';
-    var isAcceptable = sendingStatus !== 'pending' && sendingStatus !== 'failed';
-    return [
-        isSameGroup(prevMessage, currMessage, currentChannel) && isAcceptable,
-        isSameGroup(currMessage, nextMessage, currentChannel) && isAcceptable,
-    ];
-};
 var scrollIntoLast = function (intialTry) {
     if (intialTry === void 0) { intialTry = 0; }
     var MAX_TRIES = 10;
@@ -215,10 +180,9 @@ var useSendMultipleFilesMessage = function (_a, _b) {
 };
 
 exports.compareIds = compareIds;
-exports.compareMessagesForGrouping = compareMessagesForGrouping;
 exports.getNicknamesMapFromMembers = getNicknamesMapFromMembers;
 exports.getParentMessageFrom = getParentMessageFrom;
 exports.isAboutSame = isAboutSame;
 exports.scrollIntoLast = scrollIntoLast;
 exports.useSendMultipleFilesMessage = useSendMultipleFilesMessage;
-//# sourceMappingURL=bundle-3K153hLM.js.map
+//# sourceMappingURL=bundle-eCBAJmJN.js.map

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

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

package/cjs/chunks/{bundle-dny_TiUT.js → bundle-ekyeVpZG.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var ui_ContextMenu = require('../ui/ContextMenu.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var LocalizationContext = require('./bundle-qtXdbPNE.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
 
 var OpenChannelMessageStatusTypes = {
     NONE: 'none',
@@ -106,4 +106,4 @@ exports.isFineDelete = isFineDelete;
 exports.isFineEdit = isFineEdit;
 exports.isFineResend = isFineResend;
 exports.showMenuTrigger = showMenuTrigger;
-//# sourceMappingURL=bundle-dny_TiUT.js.map
+//# sourceMappingURL=bundle-ekyeVpZG.js.map

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

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

package/cjs/chunks/{bundle-AbGazomk.js → bundle-fTMJH5JE.js}

@@ -1,20 +1,21 @@
 'use strict';
 
 var React = require('react');
-var Channel_context = require('./bundle-Ue5GkT2H.js');
+var Channel_context = require('../Channel/context.js');
 var ui_PlaceHolder = require('../ui/PlaceHolder.js');
 var ui_Icon = require('../ui/Icon.js');
-var Channel_components_Message = require('../Channel/components/Message.js');
-var utils = require('./bundle-XaLiuh0L.js');
+var Channel_components_Message = require('./bundle-Eqd9bAds.js');
+var utils = require('./bundle-CrbMqpah.js');
 var Channel_utils_getMessagePartsInfo = require('../Channel/utils/getMessagePartsInfo.js');
-var Channel_components_UnreadCount = require('../Channel/components/UnreadCount.js');
-var Channel_components_FrozenNotification = require('../Channel/components/FrozenNotification.js');
-var consts = require('./bundle-JbxviE94.js');
+var index$3 = require('./bundle-DfMlIvtm.js');
+var index$2 = require('./bundle-u7wWilEW.js');
+var consts = require('./bundle-UAspU0bH.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-var index = require('./bundle-tad4_cNF.js');
+var index = require('./bundle-OdZXNc-g.js');
+var useThrottleCallback = require('./bundle-Njt4gDEW.js');
 var ui_TypingIndicatorBubble = require('../ui/TypingIndicatorBubble.js');
-var uikitTools = require('@sendbird/uikit-tools');
+var index$1 = require('./bundle-zHDXCFIb.js');
 
 exports.TypingIndicatorType = void 0;
 (function (TypingIndicatorType) {
@@ -42,7 +43,7 @@ function useSetScrollToBottom(_a) {
     };
     return {
         scrollBottom: scrollBottom,
-        scrollToBottomHandler: index.useThrottleCallback(scrollCb, DELAY, { trailing: true }),
+        scrollToBottomHandler: useThrottleCallback.useThrottleCallback(scrollCb, DELAY, { trailing: true }),
     };
 }
 
@@ -56,26 +57,7 @@ function useScrollBehavior() {
     return null;
 }
 
-var BUFFER_DELAY = 100;
-function useOnScrollPositionChangeDetector(props) {
-    var onReachedTop = props.onReachedTop, onReachedBottom = props.onReachedBottom, onInBetween = props.onInBetween;
-    var cb = uikitTools.usePreservedCallback(function (event) {
-        if (event === null || event === void 0 ? void 0 : event.target) {
-            var _a = event.target, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            if (utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
-                onReachedTop();
-            }
-            else if (utils.isAboutSame(scrollHeight, clientHeight + scrollTop, consts.SCROLL_BUFFER)) {
-                onReachedBottom();
-            }
-            else {
-                onInBetween();
-            }
-        }
-    });
-    return index.useThrottleCallback(cb, BUFFER_DELAY, { trailing: true });
-}
-
+/* We operate the CSS files for Channel&GroupChannel modules in the GroupChannel */
 var SCROLL_BOTTOM_PADDING = 50;
 var MessageList = function (_a) {
     var _b, _c, _d, _e, _f;
@@ -145,7 +127,7 @@ var MessageList = function (_a) {
         onScroll: onScroll,
         scrollRef: scrollRef,
     });
-    var onScrollReachedEndDetector = useOnScrollPositionChangeDetector({
+    var onScrollReachedEndDetector = index$1.useOnScrollPositionChangeDetector({
         onReachedBottom: function () {
             /**
              * Note that this event is already being called in onScroll() above. However, it is only being called when
@@ -201,7 +183,7 @@ var MessageList = function (_a) {
                         }), chainTop = _c.chainTop, chainBottom = _c.chainBottom, hasSeparator = _c.hasSeparator;
                         var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
                         return (React.createElement(Message_context.MessageProvider, { message: m, key: m === null || m === void 0 ? void 0 : m.messageId, isByMe: isByMe },
-                            React.createElement(Channel_components_Message, { handleScroll: moveScroll, renderMessage: renderMessage, renderMessageContent: renderMessageContent, message: m, hasSeparator: hasSeparator, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                            React.createElement(Channel_components_Message.Message, { handleScroll: moveScroll, renderMessage: renderMessage, renderMessageContent: renderMessageContent, message: m, hasSeparator: hasSeparator, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
                     }),
                     localMessages.map(function (m, idx) {
                         var _a, _b;
@@ -215,7 +197,7 @@ var MessageList = function (_a) {
                         }), chainTop = _c.chainTop, chainBottom = _c.chainBottom;
                         var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
                         return (React.createElement(Message_context.MessageProvider, { message: m, key: m === null || m === void 0 ? void 0 : m.messageId, isByMe: isByMe },
-                            React.createElement(Channel_components_Message, { handleScroll: moveScroll, renderMessage: renderMessage, renderMessageContent: renderMessageContent, message: m, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                            React.createElement(Channel_components_Message.Message, { handleScroll: moveScroll, renderMessage: renderMessage, renderMessageContent: renderMessageContent, message: m, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
                     }),
                     !hasMoreNext
                         && ((_c = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.groupChannel) === null || _c === void 0 ? void 0 : _c.enableTypingIndicator)
@@ -223,11 +205,11 @@ var MessageList = function (_a) {
                         && React.createElement(ui_TypingIndicatorBubble, { typingMembers: typingMembers, handleScroll: moveScroll }))),
             (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isFrozen) && (renderFrozenNotification
                 ? renderFrozenNotification()
-                : React.createElement(Channel_components_FrozenNotification, { className: "sendbird-conversation__messages__notification" })),
+                : React.createElement(index$2.FrozenNotification, { className: "sendbird-conversation__messages__notification" })),
             /**
              * Show unread count IFF scroll is not bottom or is bottom but hasNext is true.
              */
-            (!isScrollBottom || hasMoreNext) && (unreadSince || unreadSinceDate) && (React.createElement(Channel_components_UnreadCount, { className: "sendbird-conversation__messages__notification", count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount, time: unreadSince, lastReadAt: unreadSinceDate, onClick: function () {
+            (!isScrollBottom || hasMoreNext) && (unreadSince || unreadSinceDate) && (React.createElement(index$3.UnreadCount, { className: "sendbird-conversation__messages__notification", count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount, time: unreadSince, lastReadAt: unreadSinceDate, onClick: function () {
                     if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)
                         scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
                     if (!disableMarkAsRead && !!currentGroupChannel) {
@@ -247,4 +229,4 @@ var MessageList = function (_a) {
 };
 
 exports.MessageList = MessageList;
-//# sourceMappingURL=bundle-AbGazomk.js.map
+//# sourceMappingURL=bundle-fTMJH5JE.js.map

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

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

package/cjs/chunks/bundle-fUWIw3RI.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var ui_Avatar = require('./bundle-w0ATt2gt.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+
+var GroupChannelListHeader = function (_a) {
+    var renderTitle = _a.renderTitle, renderIconButton = _a.renderIconButton, onEdit = _a.onEdit, allowProfileEdit = _a.allowProfileEdit;
+    var stores = useSendbirdStateContext.useSendbirdStateContext().stores;
+    var user = stores.userStore.user;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    return (React.createElement("div", { className: [
+            'sendbird-channel-header',
+            allowProfileEdit ? 'sendbird-channel-header--allow-edit' : '',
+        ].join(' ') },
+        (renderTitle === null || renderTitle === void 0 ? void 0 : renderTitle()) || (React.createElement("div", { className: "sendbird-channel-header__title", role: "button", onClick: function () {
+                onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+            }, onKeyDown: function () {
+                onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+            }, tabIndex: 0 },
+            React.createElement("div", { className: "sendbird-channel-header__title__left" },
+                React.createElement(ui_Avatar.Avatar, { width: "32px", height: "32px", src: user.profileUrl, alt: user.nickname })),
+            React.createElement("div", { className: "sendbird-channel-header__title__right" },
+                React.createElement(ui_Label.Label, { className: "sendbird-channel-header__title__right__name", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, user.nickname || stringSet.NO_NAME),
+                React.createElement(ui_Label.Label, { className: "sendbird-channel-header__title__right__user-id", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, user.userId)))),
+        React.createElement("div", { className: "sendbird-channel-header__right-icon" }, renderIconButton === null || renderIconButton === void 0 ? void 0 : renderIconButton())));
+};
+
+exports.GroupChannelListHeader = GroupChannelListHeader;
+//# sourceMappingURL=bundle-fUWIw3RI.js.map

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

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

package/cjs/chunks/bundle-fzSiKesI.js

@@ -0,0 +1,202 @@
+'use strict';
+
+var SendbirdChat = require('@sendbird/chat');
+var React = require('react');
+var uuid = require('./bundle-TB_UEIPg.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
+
+function useOnlineStatus(sdk, logger) {
+    var _a, _b;
+    var _c = React.useState(
+    // window is undefined in SSR env
+    typeof window !== 'undefined'
+        ? ((_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.onLine) !== null && _b !== void 0 ? _b : true)
+        : true), isOnline = _c[0], setIsOnline = _c[1];
+    React.useEffect(function () {
+        var uniqueHandlerId = uuid.uuidv4();
+        try {
+            logger.warning('sdk changed', uniqueHandlerId);
+            var handler = new SendbirdChat.ConnectionHandler({
+                onDisconnected: function () {
+                    setIsOnline(false);
+                    logger.warning('onDisconnected', { isOnline: isOnline });
+                },
+                onReconnectStarted: function () {
+                    setIsOnline(false);
+                    logger.warning('onReconnectStarted', { isOnline: isOnline });
+                },
+                onReconnectSucceeded: function () {
+                    setIsOnline(true);
+                    logger.warning('onReconnectSucceeded', { isOnline: isOnline });
+                },
+                onReconnectFailed: function () {
+                    sdk.reconnect();
+                    logger.warning('onReconnectFailed');
+                },
+            });
+            if (sdk === null || sdk === void 0 ? void 0 : sdk.addConnectionHandler) {
+                // workaround -> addConnectionHandler invalidates session handler
+                // provided through configureSession
+                sdk.addConnectionHandler(uniqueHandlerId, handler);
+                logger.info('Added ConnectionHandler', uniqueHandlerId);
+            }
+        }
+        catch (_a) {
+            //
+        }
+        return function () {
+            try {
+                sdk.removeConnectionHandler(uniqueHandlerId);
+                logger.info('Removed ConnectionHandler', uniqueHandlerId);
+            }
+            catch (_a) {
+                //
+            }
+        };
+    }, [sdk]);
+    React.useEffect(function () {
+        var tryReconnect = function () {
+            try {
+                logger.warning('Try reconnecting SDK');
+                if (sdk.connectionState !== 'OPEN') { // connection is not broken yet
+                    sdk.reconnect();
+                }
+            }
+            catch (_a) {
+                //
+            }
+        };
+        // addEventListener version
+        window.addEventListener('online', tryReconnect);
+        return function () {
+            window.removeEventListener('online', tryReconnect);
+        };
+    }, [sdk]);
+    // add offline-class to body
+    React.useEffect(function () {
+        var body = document.querySelector('body');
+        if (!isOnline && !(sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled)) {
+            try {
+                body.classList.add('sendbird__offline');
+                logger.info('Added class sendbird__offline to body');
+            }
+            catch (e) {
+                //
+            }
+        }
+        else {
+            try {
+                body.classList.remove('sendbird__offline');
+                logger.info('Removed class sendbird__offline from body');
+            }
+            catch (e) {
+                //
+            }
+        }
+    }, [isOnline, sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled]);
+    return isOnline;
+}
+
+var TIMEOUT = 2000;
+/*
+  * This is a factory function that returns a scheduler.
+  * The scheduler is a queue that calls the callback function on intervals.
+  * If interval is empty, the callback function is called immediately.
+  * If interval is not empty, the callback function is called after the interval.
+*/
+function schedulerFactory(_a) {
+    var logger = _a.logger, timeout = _a.timeout, cb = _a.cb;
+    var queue = [];
+    var interval = null;
+    var push = function (channel) {
+        var channelPresent = queue.find(function (c) { return c.url === channel.url; });
+        if (!channelPresent) {
+            queue.push(channel);
+        }
+        else {
+            logger.info('Channel: Mark as read already in queue', { channel: channel });
+        }
+        // start the interval if it's not already running
+        if (interval) {
+            return;
+        }
+        var item = queue.shift();
+        if (item) {
+            cb(item);
+        }
+        interval = setInterval(function () {
+            if (queue.length === 0 && interval) {
+                clearInterval(interval);
+                interval = null;
+                return;
+            }
+            var item = queue.shift();
+            if (item) {
+                cb(item);
+            }
+        }, (timeout || TIMEOUT));
+    };
+    var clear = function () {
+        queue = [];
+        if (interval) {
+            clearInterval(interval);
+            interval = null;
+        }
+    };
+    return {
+        push: push,
+        clear: clear,
+        getQueue: function () { return queue; },
+    };
+}
+
+// this hook accepts a callback to run component is unmounted
+function useUnmount(callback, deps) {
+    if (deps === void 0) { deps = []; }
+    React.useLayoutEffect(function () {
+        return function () {
+            callback();
+        };
+    }, deps);
+}
+
+function useMarkAsDeliveredScheduler(_a, _b) {
+    var _this = this;
+    var isConnected = _a.isConnected;
+    var logger = _b.logger;
+    var markAsDeliveredScheduler = React.useMemo(function () { return schedulerFactory({
+        logger: logger,
+        cb: function (channel) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+            var error_1;
+            return _tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, channel.markAsDelivered()];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _a.sent();
+                        logger.warning('Channel: Mark as delivered failed', { channel: channel, error: error_1 });
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); },
+    }); }, []);
+    React.useEffect(function () {
+        // for simplicity, we clear the queue when the connection is lost
+        if (!isConnected) {
+            markAsDeliveredScheduler.clear();
+        }
+    }, [isConnected]);
+    useUnmount(function () { markAsDeliveredScheduler.clear(); });
+    return markAsDeliveredScheduler;
+}
+
+exports.schedulerFactory = schedulerFactory;
+exports.useMarkAsDeliveredScheduler = useMarkAsDeliveredScheduler;
+exports.useOnlineStatus = useOnlineStatus;
+exports.useUnmount = useUnmount;
+//# sourceMappingURL=bundle-fzSiKesI.js.map

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

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