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

package/cjs/chunks/{bundle-2_VQBtF9.js → bundle-zGSEOOdl.js}

@@ -1,16 +1,17 @@
 'use strict';
 
-var _tslib = require('./bundle-UHsDbhGB.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
 var React = require('react');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var pubSub_topics = require('./bundle-Q7Qb_8Qy.js');
-var uuid = require('./bundle-Ox6f1Pr4.js');
-var utils = require('./bundle-wTtkySLW.js');
-var consts = require('./bundle-trkwub16.js');
-var UserProfileContext = require('./bundle-e6jRRPqy.js');
+var pubSub_topics = require('./bundle-77qvrXp8.js');
+var uuid = require('./bundle-TB_UEIPg.js');
+var utils = require('./bundle-Y-_KhZFq.js');
+var consts = require('./bundle-UAspU0bH.js');
+var UserProfileContext = require('./bundle-TPy0gj60.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var index = require('./bundle-X1vsWmGi.js');
-var index$1 = require('./bundle-bPLEZuwe.js');
+var index = require('./bundle-xM2DAzE6.js');
+var index$1 = require('./bundle-nox41MG6.js');
+var useReconnectOnIdle = require('./bundle-JBbKwE7L.js');
 
 var RESET_CHANNEL_LIST = 'RESET_CHANNEL_LIST';
 var CREATE_CHANNEL = 'CREATE_CHANNEL';
@@ -21,6 +22,7 @@ var FETCH_CHANNELS_SUCCESS = 'FETCH_CHANNELS_SUCCESS';
 var FETCH_CHANNELS_FAILURE = 'FETCH_CHANNELS_FAILURE';
 var INIT_CHANNELS_START = 'INIT_CHANNELS_START';
 var INIT_CHANNELS_SUCCESS = 'INIT_CHANNELS_SUCCESS';
+var REFRESH_CHANNELS_SUCCESS = 'REFRESH_CHANNELS_SUCCESS';
 var INIT_CHANNELS_FAILURE = 'INIT_CHANNELS_FAILURE';
 var ON_USER_JOINED = 'ON_USER_JOINED';
 var ON_CHANNEL_DELETED = 'ON_CHANNEL_DELETED';
@@ -32,7 +34,6 @@ var ON_CHANNEL_FROZEN = 'ON_CHANNEL_FROZEN';
 var ON_CHANNEL_UNFROZEN = 'ON_CHANNEL_UNFROZEN';
 var ON_READ_RECEIPT_UPDATED = 'ON_READ_RECEIPT_UPDATED';
 var ON_DELIVERY_RECEIPT_UPDATED = 'ON_DELIVERY_RECEIPT_UPDATED';
-var CHANNEL_REPLACED_TO_TOP = 'CHANNEL_REPLACED_TO_TOP';
 var CHANNEL_LIST_PARAMS_UPDATED = 'CHANNEL_LIST_PARAMS_UPDATED';
 
 var DELIVERY_RECEIPT = 'delivery_receipt';
@@ -141,7 +142,7 @@ var createChannelListQuery = function (_a) {
     var params = {
         includeEmpty: false,
         limit: 20,
-        order: 'latest_last_message', // 'chronological', 'latest_last_message', 'channel_name_alphabetical', and 'metadata_value_alphabetical'
+        order: groupChannel.GroupChannelListOrder.LATEST_LAST_MESSAGE,
     };
     if (userFilledChannelListQuery) {
         Object.keys(userFilledChannelListQuery).forEach(function (key) {
@@ -267,15 +268,6 @@ var pubSubHandler = function (pubSub, channelListDispatcher) {
             payload: channel === null || channel === void 0 ? void 0 : channel.url,
         });
     }));
-    subscriber.set(pubSub_topics.pubSubTopics.SEND_MESSAGE_START, pubSub.subscribe(pubSub_topics.pubSubTopics.SEND_MESSAGE_START, function (_a) {
-        var channel = _a.channel;
-        if (channel.isGroupChannel()) {
-            channelListDispatcher({
-                type: CHANNEL_REPLACED_TO_TOP,
-                payload: channel,
-            });
-        }
-    }));
     return subscriber;
 };
 
@@ -315,10 +307,16 @@ function channelListReducer(state, action) {
         var payload = _a.payload;
         return (_tslib.__assign(_tslib.__assign({}, state), { loading: true, currentUserId: payload.currentUserId }));
     })
-        .with({ type: RESET_CHANNEL_LIST }, function () { return initialState; })
+        .with({ type: RESET_CHANNEL_LIST }, function () {
+        return initialState;
+    })
         .with({ type: INIT_CHANNELS_SUCCESS }, function (action) {
         var _a = action.payload, channelList = _a.channelList, disableAutoSelect = _a.disableAutoSelect;
-        return _tslib.__assign(_tslib.__assign({}, state), { initialized: true, loading: false, allChannels: channelList, disableAutoSelect: disableAutoSelect, currentChannel: !disableAutoSelect && channelList && channelList.length && channelList.length > 0 ? channelList[0] : null });
+        return _tslib.__assign(_tslib.__assign({}, state), { initialized: true, loading: false, allChannels: channelList, disableAutoSelect: disableAutoSelect, currentChannel: !disableAutoSelect && channelList && channelList.length && channelList.length > 0 ? channelList[0] : state.currentChannel });
+    })
+        .with({ type: REFRESH_CHANNELS_SUCCESS }, function (action) {
+        var _a = action.payload, channelList = _a.channelList, currentChannel = _a.currentChannel;
+        return _tslib.__assign(_tslib.__assign({}, state), { loading: false, allChannels: channelList, currentChannel: currentChannel });
     })
         .with({ type: FETCH_CHANNELS_SUCCESS }, function (action) {
         var currentChannels = state.allChannels.map(function (c) { return c.url; });
@@ -329,12 +327,13 @@ function channelListReducer(state, action) {
         return _tslib.__assign(_tslib.__assign({}, state), { allChannels: _tslib.__spreadArray(_tslib.__spreadArray([], state.allChannels, true), filteredChannels, true) });
     })
         .with({ type: CREATE_CHANNEL }, function (action) {
+        var _a;
         var channel = action.payload;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, channelListQuery = state.channelListQuery;
         if (channelListQuery) {
             if (index$1.filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to add to the ChannelList
-                return _tslib.__assign(_tslib.__assign({}, state), { currentChannel: channel, allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel) });
+                return _tslib.__assign(_tslib.__assign({}, state), { currentChannel: channel, allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // Do not add to the ChannelList
             return _tslib.__assign(_tslib.__assign({}, state), { currentChannel: channel });
@@ -345,12 +344,13 @@ function channelListReducer(state, action) {
     })
         // A hidden channel will be unhidden when getting new message
         .with({ type: ON_CHANNEL_ARCHIVED }, function (action) {
+        var _a;
         var channel = action.payload;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
         if (channelListQuery) {
             if (index$1.filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to [add to/keep in] the ChannelList
-                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel) });
+                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // * Remove the channel from the ChannelList: because the channel is filtered
         }
@@ -378,38 +378,58 @@ function channelListReducer(state, action) {
         return _tslib.__assign(_tslib.__assign({}, state), { currentChannel: channelUrl === ((_a = state.currentChannel) === null || _a === void 0 ? void 0 : _a.url) ? allChannels[0] : state.currentChannel, allChannels: allChannels });
     })
         .with({ type: ON_USER_LEFT }, function (action) {
-        var _a = action.payload, channel = _a.channel, isMe = _a.isMe;
+        var _a;
+        var _b = action.payload, channel = _b.channel, isMe = _b.isMe;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
-        var nextChannels = allChannels.filter(function (ch) { return ch.url !== channel.url; });
-        var nextChannel = null;
-        if (channelListQuery) {
-            if (index$1.filterChannelListParams(channelListQuery, channel, currentUserId)) {
-                // Good to [add to/keep in] the ChannelList
-                nextChannels = index$1.getChannelsWithUpsertedChannel(allChannels, channel);
+        var nextChannels = _tslib.__spreadArray([], allChannels, true);
+        var nextChannel = channel;
+        /**
+         * 1. If I left channel:
+         *   - Remove the channel from channel list
+         *   - Replace currentChannel with the next ordered channel
+         * 2. If other member left channel:
+         *   2-1. If query is given:
+         *     2-1-1. If channel no longer matches the query
+         *       - Same as step 1
+         *     2-1-2. If channel matches the query:
+         *       - Upsert channel list with the channel
+         *       - Replace currentChannel IFF url is same
+         *   2-2. If query is not given,
+         *     - Same as step 2-1-2
+         */
+        /* `1` and `2-1-1` */
+        if (isMe || (channelListQuery && !index$1.filterChannelListParams(channelListQuery, channel, currentUserId))) {
+            var channelAt = allChannels.findIndex(function (ch) { return ch.url === channel.url; });
+            if (channelAt > -1) {
+                nextChannels.splice(channelAt, 1);
+                nextChannel = getNextChannel({
+                    channel: channel,
+                    currentChannel: currentChannel,
+                    allChannels: allChannels,
+                    disableAutoSelect: disableAutoSelect,
+                });
             }
         }
-        // Replace the currentChannel if I left the currentChannel
-        if (isMe) {
-            nextChannel = getNextChannel({
-                channel: channel,
-                currentChannel: currentChannel,
-                allChannels: allChannels,
-                disableAutoSelect: disableAutoSelect,
-            });
+        else {
+            /* `2-1-2` and `2-2` */
+            nextChannels = index$1.getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order);
+            if ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) === channel.url) {
+                nextChannel = channel;
+            }
         }
         return _tslib.__assign(_tslib.__assign({}, state), { currentChannel: nextChannel, allChannels: nextChannels });
     })
         .with({
         type: index.S.union(ON_USER_JOINED, ON_CHANNEL_CHANGED, ON_READ_RECEIPT_UPDATED, ON_DELIVERY_RECEIPT_UPDATED),
     }, function (action) {
-        var _a, _b;
+        var _a, _b, _c;
         var channel = action.payload;
-        var _c = state.allChannels, allChannels = _c === void 0 ? [] : _c, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
+        var _d = state.allChannels, allChannels = _d === void 0 ? [] : _d, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
         var unreadMessageCount = channel.unreadMessageCount;
         if (channelListQuery) {
             if (index$1.filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to [add to/keep in] the ChannelList
-                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel) });
+                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // Filter the channel from the ChannelList
             // Replace the currentChannel if it's filtered channel
@@ -428,7 +448,7 @@ function channelListReducer(state, action) {
         // When marking as read the channel
         unreadMessageCount === 0
             // @ts-ignore - When sending a message by the current peer
-            && ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _a === void 0 ? void 0 : _a.sender) === null || _b === void 0 ? void 0 : _b.userId) !== currentUserId) {
+            && ((_c = (_b = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _b === void 0 ? void 0 : _b.sender) === null || _c === void 0 ? void 0 : _c.userId) !== currentUserId) {
             // Don't move to the top
             return _tslib.__assign(_tslib.__assign({}, state), { allChannels: allChannels.map(function (ch) { return (ch.url === (channel === null || channel === void 0 ? void 0 : channel.url) ? channel : ch); }) });
         }
@@ -445,12 +465,13 @@ function channelListReducer(state, action) {
         return _tslib.__assign(_tslib.__assign({}, state), { allChannels: state.allChannels.map(function (channel) { return (channel === null || channel === void 0 ? void 0 : channel.url) === action.payload.url ? action.payload : channel; }) });
     })
         .with({ type: ON_CHANNEL_FROZEN }, function (action) {
+        var _a;
         var channel = action.payload;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
         if (channelListQuery) {
             if (index$1.filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to [add to/keep in] the ChannelList
-                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel) });
+                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // Filter the channel from the ChannelList
             // Replace the currentChannel if it's filtered channel
@@ -475,12 +496,13 @@ function channelListReducer(state, action) {
             }) });
     })
         .with({ type: ON_CHANNEL_UNFROZEN }, function (action) {
+        var _a;
         var channel = action.payload;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
         if (channelListQuery) {
             if (index$1.filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to [add to/keep in] the ChannelList
-                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel) });
+                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: index$1.getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // Filter the channel from the ChannelList
             // Replace the currentChannel if it's filtered channel
@@ -504,17 +526,6 @@ function channelListReducer(state, action) {
                 }
                 return ch;
             }) });
-    })
-        .with({ type: CHANNEL_REPLACED_TO_TOP }, function (action) {
-        if (state.channelListQuery) {
-            if (index$1.filterChannelListParams(state.channelListQuery, action.payload, state.currentUserId)) {
-                return _tslib.__assign(_tslib.__assign({}, state), { allChannels: _tslib.__spreadArray([
-                        action.payload
-                    ], state.allChannels.filter(function (channel) { return (channel === null || channel === void 0 ? void 0 : channel.url) !== action.payload.url; }), true) });
-            }
-            return state;
-        }
-        return _tslib.__assign(_tslib.__assign({}, state), { allChannels: _tslib.__spreadArray([action.payload], state.allChannels.filter(function (channel) { return (channel === null || channel === void 0 ? void 0 : channel.url) !== action.payload.url; }), true) });
     })
         .with({ type: CHANNEL_LIST_PARAMS_UPDATED }, function (action) { return (_tslib.__assign(_tslib.__assign({}, state), { channelListQuery: action.payload.channelListQuery, currentUserId: action.payload.currentUserId })); })
         .otherwise(function () { return state; }));
@@ -608,6 +619,86 @@ var useFetchChannelList = function (_a, _b) {
     ]);
 };
 
+function useHandleReconnectForChannelList(_a) {
+    var isOnline = _a.isOnline, reconnectOnIdle = _a.reconnectOnIdle, logger = _a.logger, sdk = _a.sdk, currentGroupChannel = _a.currentGroupChannel, channelListDispatcher = _a.channelListDispatcher, setChannelSource = _a.setChannelSource, userFilledChannelListQuery = _a.userFilledChannelListQuery, sortChannelList = _a.sortChannelList, disableAutoSelect = _a.disableAutoSelect, markAsDeliveredScheduler = _a.markAsDeliveredScheduler, disableMarkAsDelivered = _a.disableMarkAsDelivered;
+    var shouldReconnect = useReconnectOnIdle.useReconnectOnIdle(isOnline, currentGroupChannel, reconnectOnIdle).shouldReconnect;
+    React.useEffect(function () {
+        return function () {
+            var _a, _b, _c, _d;
+            // state changed from offline to online AND tab is visible
+            if (shouldReconnect) {
+                logger.info('ChannelList refresh - creating query', { userFilledChannelListQuery: userFilledChannelListQuery });
+                var channelListQuery = createChannelListQuery({ sdk: sdk, userFilledChannelListQuery: userFilledChannelListQuery });
+                logger.info('ChannelList refresh - created query', channelListQuery);
+                setChannelSource(channelListQuery);
+                channelListDispatcher({
+                    type: INIT_CHANNELS_START,
+                    payload: {
+                        currentUserId: (_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _a === void 0 ? void 0 : _a.userId) !== null && _b !== void 0 ? _b : '',
+                    },
+                });
+                if (userFilledChannelListQuery) {
+                    logger.info('ChannelList refresh - setting up channelListQuery', channelListQuery);
+                    channelListDispatcher({
+                        type: CHANNEL_LIST_PARAMS_UPDATED,
+                        payload: {
+                            channelListQuery: channelListQuery,
+                            currentUserId: (_d = (_c = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _c === void 0 ? void 0 : _c.userId) !== null && _d !== void 0 ? _d : '',
+                        },
+                    });
+                }
+                logger.info('ChannelList refresh - fetching channels');
+                if (channelListQuery.hasNext) {
+                    channelListQuery
+                        .next()
+                        .then(function (channelList) {
+                        var _a, _b;
+                        logger.info('ChannelList refresh - fetched channels', channelList);
+                        var sortedChannelList = channelList;
+                        if (sortChannelList && typeof sortChannelList === 'function') {
+                            sortedChannelList = sortChannelList(channelList);
+                            logger.info('ChannelList refresh - channel list sorted', sortedChannelList);
+                        }
+                        // select first channel
+                        var newCurrentChannel = !disableAutoSelect ? sortedChannelList[0] : null;
+                        if (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) {
+                            var foundChannel = sortedChannelList.find(function (channel) { return (channel.url === currentGroupChannel.url); });
+                            if (foundChannel) {
+                                newCurrentChannel = foundChannel;
+                            }
+                        }
+                        logger.info('ChannelList refresh - highlight channel', newCurrentChannel);
+                        channelListDispatcher({
+                            type: REFRESH_CHANNELS_SUCCESS,
+                            payload: {
+                                channelList: sortedChannelList,
+                                currentChannel: newCurrentChannel,
+                            },
+                        });
+                        var canSetMarkAsDelivered = (_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.premiumFeatureList) === null || _b === void 0 ? void 0 : _b.find(function (feature) { return feature === consts.DELIVERY_RECEIPT; });
+                        if (canSetMarkAsDelivered && !disableMarkAsDelivered) {
+                            sortedChannelList.forEach(function (channel) {
+                                markAsDeliveredScheduler.push(channel);
+                            });
+                        }
+                    })
+                        .catch(function (err) {
+                        if (err) {
+                            logger.error('ChannelList refresh - could not fetch channels', err);
+                            channelListDispatcher({
+                                type: INIT_CHANNELS_FAILURE,
+                            });
+                        }
+                    });
+                }
+                else {
+                    logger.info('ChannelList refresh - there are no more channels');
+                }
+            }
+        };
+    }, [shouldReconnect]);
+}
+
 var ChannelListContext = React.createContext({
     disableUserProfile: true,
     allowProfileEdit: true,
@@ -627,11 +718,12 @@ var ChannelListContext = React.createContext({
     channelSource: null,
     typingChannels: [],
     fetchChannelList: utils.noop,
+    reconnectOnIdle: true,
 });
 var ChannelListProvider = function (props) {
     var _a, _b;
     // destruct props
-    var children = props.children, className = props.className, disableUserProfile = props.disableUserProfile, allowProfileEdit = props.allowProfileEdit, queries = props.queries, onProfileEditSuccess = props.onProfileEditSuccess, onThemeChange = props.onThemeChange, onBeforeCreateChannel = props.onBeforeCreateChannel, sortChannelList = props.sortChannelList, overrideInviteUser = props.overrideInviteUser, activeChannelUrl = props.activeChannelUrl, _c = props.isTypingIndicatorEnabled, isTypingIndicatorEnabled = _c === void 0 ? null : _c, _d = props.isMessageReceiptStatusEnabled, isMessageReceiptStatusEnabled = _d === void 0 ? null : _d;
+    var children = props.children, className = props.className, disableUserProfile = props.disableUserProfile, allowProfileEdit = props.allowProfileEdit, queries = props.queries, onProfileEditSuccess = props.onProfileEditSuccess, onThemeChange = props.onThemeChange, onBeforeCreateChannel = props.onBeforeCreateChannel, sortChannelList = props.sortChannelList, overrideInviteUser = props.overrideInviteUser, activeChannelUrl = props.activeChannelUrl, _c = props.isTypingIndicatorEnabled, isTypingIndicatorEnabled = _c === void 0 ? null : _c, _d = props.isMessageReceiptStatusEnabled, isMessageReceiptStatusEnabled = _d === void 0 ? null : _d, reconnectOnIdle = props.reconnectOnIdle;
     // disable autoselect, if activeChannelUrl is provided
     // useActiveChannelUrl should be executed when activeChannelUrl is present
     var disableAutoSelect = (props === null || props === void 0 ? void 0 : props.disableAutoSelect) || !!activeChannelUrl;
@@ -641,7 +733,7 @@ var ChannelListProvider = function (props) {
     var config = globalStore.config, stores = globalStore.stores;
     var sdkStore = stores.sdkStore;
     var pubSub = config.pubSub, logger = config.logger, onUserProfileMessage = config.onUserProfileMessage;
-    var markAsDeliveredScheduler = config.markAsDeliveredScheduler, _e = config.disableMarkAsDelivered, disableMarkAsDelivered = _e === void 0 ? false : _e, _f = config.isTypingIndicatorEnabledOnChannelList, isTypingIndicatorEnabledOnChannelList = _f === void 0 ? false : _f, _g = config.isMessageReceiptStatusEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = _g === void 0 ? false : _g;
+    var markAsDeliveredScheduler = config.markAsDeliveredScheduler, _e = config.disableMarkAsDelivered, disableMarkAsDelivered = _e === void 0 ? false : _e, _f = config.isTypingIndicatorEnabledOnChannelList, isTypingIndicatorEnabledOnChannelList = _f === void 0 ? false : _f, _g = config.isMessageReceiptStatusEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = _g === void 0 ? false : _g, isOnline = config.isOnline;
     var sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
     var _h = ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) !== null && _a !== void 0 ? _a : {}).premiumFeatureList, premiumFeatureList = _h === void 0 ? [] : _h;
     // derive some variables
@@ -819,6 +911,20 @@ var ChannelListProvider = function (props) {
         logger: logger,
         channelListDispatcher: channelListDispatcher,
     });
+    useHandleReconnectForChannelList({
+        isOnline: isOnline,
+        reconnectOnIdle: reconnectOnIdle,
+        logger: logger,
+        sdk: sdk,
+        currentGroupChannel: currentChannel,
+        channelListDispatcher: channelListDispatcher,
+        setChannelSource: setChannelSource,
+        userFilledChannelListQuery: userFilledChannelListQuery,
+        sortChannelList: sortChannelList,
+        disableAutoSelect: disableAutoSelect,
+        markAsDeliveredScheduler: markAsDeliveredScheduler,
+        disableMarkAsDelivered: disableMarkAsDelivered,
+    });
     var fetchChannelList = useFetchChannelList({
         channelSource: channelSource,
         disableMarkAsDelivered: disableMarkAsDelivered || !premiumFeatureList.some(function (feature) { return feature === consts.DELIVERY_RECEIPT; }),
@@ -842,4 +948,4 @@ exports.ChannelListProvider = ChannelListProvider;
 exports.LEAVE_CHANNEL_SUCCESS = LEAVE_CHANNEL_SUCCESS;
 exports.SET_CURRENT_CHANNEL = SET_CURRENT_CHANNEL;
 exports.useChannelListContext = useChannelListContext;
-//# sourceMappingURL=bundle-2_VQBtF9.js.map
+//# sourceMappingURL=bundle-zGSEOOdl.js.map

package/{chunks/bundle-pnJu3fWb.js.map → cjs/chunks/bundle-zGSEOOdl.js.map}

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

package/cjs/chunks/bundle-zHDXCFIb.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var React = require('react');
+var consts = require('./bundle-UAspU0bH.js');
+var utils = require('./bundle-CrbMqpah.js');
+var uikitTools = require('@sendbird/uikit-tools');
+var useThrottleCallback = require('./bundle-Njt4gDEW.js');
+
+var BUFFER_DELAY = 100;
+function useOnScrollPositionChangeDetector(params) {
+    var onReachedTop = params.onReachedTop, onReachedBottom = params.onReachedBottom, onInBetween = params.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;
+            var positionEvent = {
+                distanceFromBottom: scrollHeight - scrollTop - clientHeight,
+            };
+            if (onReachedTop && utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
+                onReachedTop(positionEvent);
+            }
+            else if (onReachedBottom && utils.isAboutSame(scrollHeight, clientHeight + scrollTop, consts.SCROLL_BUFFER)) {
+                onReachedBottom(positionEvent);
+            }
+            else if (onInBetween) {
+                onInBetween(positionEvent);
+            }
+        }
+    });
+    return useThrottleCallback.useThrottleCallback(cb, BUFFER_DELAY, { trailing: true });
+}
+function useOnScrollPositionChangeDetectorWithRef(scrollRef, params) {
+    var _params = React.useRef(params);
+    _params.current = params;
+    React.useLayoutEffect(function () {
+        var elem = scrollRef.current;
+        if (elem) {
+            var callback_1 = useThrottleCallback.throttle(function () {
+                var scrollTop = elem.scrollTop, scrollHeight = elem.scrollHeight, clientHeight = elem.clientHeight;
+                var event = {
+                    distanceFromBottom: scrollHeight - scrollTop - clientHeight,
+                };
+                if (_params.current.onReachedTop && utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
+                    _params.current.onReachedTop(event);
+                }
+                else if (_params.current.onReachedBottom && utils.isAboutSame(scrollHeight, clientHeight + scrollTop, consts.SCROLL_BUFFER)) {
+                    _params.current.onReachedBottom(event);
+                }
+                else if (_params.current.onInBetween) {
+                    _params.current.onInBetween(event);
+                }
+            }, BUFFER_DELAY, { trailing: true });
+            elem.addEventListener('scroll', callback_1);
+            return function () { return elem.removeEventListener('scroll', callback_1); };
+        }
+    }, [scrollRef.current]);
+}
+
+exports.useOnScrollPositionChangeDetector = useOnScrollPositionChangeDetector;
+exports.useOnScrollPositionChangeDetectorWithRef = useOnScrollPositionChangeDetectorWithRef;
+//# sourceMappingURL=bundle-zHDXCFIb.js.map

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

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

package/cjs/chunks/{bundle-ImsJYvdy.js → bundle-zLoe4MOM.js}

@@ -5,9 +5,9 @@ var ui_PlaybackTime = require('../ui/PlaybackTime.js');
 var ui_ProgressBar = require('../ui/ProgressBar.js');
 var ui_TextButton = require('../ui/TextButton.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-wDJ0vmp7.js');
-var LocalizationContext = require('./bundle-M_JdGFB9.js');
-var consts = require('./bundle-trkwub16.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var consts = require('./bundle-UAspU0bH.js');
 
 /* eslint-disable no-redeclare */
 var VoiceMessageInputStatus = {
@@ -96,4 +96,4 @@ var VoiceMessageInput = function (_a) {
 
 exports.VoiceMessageInput = VoiceMessageInput;
 exports.VoiceMessageInputStatus = VoiceMessageInputStatus;
-//# sourceMappingURL=bundle-ImsJYvdy.js.map
+//# sourceMappingURL=bundle-zLoe4MOM.js.map

package/{chunks/bundle-edTAi5zj.js.map → cjs/chunks/bundle-zLoe4MOM.js.map}

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

package/cjs/chunks/bundle-zRJE2NjU.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var _tslib = require('./bundle-DhtZdKsr.js');
+var React = require('react');
+var ui_IconButton = require('../ui/IconButton.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+var ui_ChannelAvatar = require('../ui/ChannelAvatar.js');
+var utils = require('./bundle-s--ExKtj.js');
+var MediaQueryContext = require('./bundle-6zBNmPOP.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var Channel_context = require('../Channel/context.js');
+
+var GroupChannelHeaderView = function (_a) {
+    var _b;
+    var className = _a.className, currentChannel = _a.currentChannel, showSearchIcon = _a.showSearchIcon, onBackClick = _a.onBackClick, onSearchClick = _a.onSearchClick, onChatHeaderActionClick = _a.onChatHeaderActionClick;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var userId = config.userId, theme = config.theme;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var isMuted = (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myMutedState) === 'muted';
+    var subTitle = ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members)
+        && ((_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members) === null || _b === void 0 ? void 0 : _b.length) !== 2);
+    return (React.createElement("div", { className: "sendbird-chat-header ".concat(className) },
+        React.createElement("div", { className: "sendbird-chat-header__left" },
+            isMobile && (React.createElement(ui_Icon.default, { className: "sendbird-chat-header__icon_back", onClick: onBackClick, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px", type: ui_Icon.IconTypes.ARROW_LEFT })),
+            React.createElement(ui_ChannelAvatar, { theme: theme, channel: currentChannel, userId: userId, height: 32, width: 32 }),
+            React.createElement(ui_Label.Label, { className: "sendbird-chat-header__left__title", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, utils.getChannelTitle(currentChannel, userId, stringSet)),
+            React.createElement(ui_Label.Label, { className: "sendbird-chat-header__left__subtitle", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, subTitle)),
+        React.createElement("div", { className: "sendbird-chat-header__right" },
+            isMuted && (React.createElement(ui_Icon.default, { className: "sendbird-chat-header__right__mute", type: ui_Icon.IconTypes.NOTIFICATIONS_OFF_FILLED, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "24px", height: "24px" })),
+            (showSearchIcon && !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isEphemeral)) && (React.createElement(ui_IconButton, { className: "sendbird-chat-header__right__search", width: "32px", height: "32px", onClick: onSearchClick },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SEARCH, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" }))),
+            React.createElement(ui_IconButton, { className: "sendbird-chat-header__right__info", width: "32px", height: "32px", onClick: onChatHeaderActionClick },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.INFO, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+
+var ChannelHeader = function (_a) {
+    var className = _a.className;
+    var context = Channel_context.useChannelContext();
+    return (React.createElement(GroupChannelHeaderView, _tslib.__assign({}, context, { className: className, currentChannel: context.currentGroupChannel })));
+};
+
+exports.ChannelHeader = ChannelHeader;
+exports.GroupChannelHeaderView = GroupChannelHeaderView;
+//# sourceMappingURL=bundle-zRJE2NjU.js.map

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

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

package/cjs/hooks/useModal.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-UHsDbhGB.js');
+var _tslib = require('../chunks/bundle-DhtZdKsr.js');
 var React = require('react');
-var index = require('../chunks/bundle-X1vsWmGi.js');
-var utils = require('../chunks/bundle-wTtkySLW.js');
-var ui_Modal = require('../chunks/bundle-7iyslQY5.js');
+var index = require('../chunks/bundle-xM2DAzE6.js');
+var utils = require('../chunks/bundle-Y-_KhZFq.js');
+var ui_Modal = require('../chunks/bundle-6L4HCLmb.js');
 require('react-dom');
-require('../chunks/bundle-M_JdGFB9.js');
-require('../chunks/bundle-FJe6Dl-f.js');
-require('../chunks/bundle-lk7syGfV.js');
-require('../chunks/bundle-R55qwYIC.js');
+require('../chunks/bundle-6SzyBwQ5.js');
+require('../chunks/bundle-H9rcn1PJ.js');
+require('../chunks/bundle-AN4eZ2xs.js');
+require('../chunks/bundle-6zBNmPOP.js');
 require('../ui/IconButton.js');
 require('../ui/Button.js');
-require('../chunks/bundle-wDJ0vmp7.js');
+require('../chunks/bundle-VxcYXhwp.js');
 require('../ui/Icon.js');
 
 var GlobalModalContext = React.createContext({