@sendbird/uikit-react 3.10.1 → 3.11.0

package/cjs/chunks/{bundle-Jcrboe06.js → bundle-9ZxGYXTj.js}

@@ -1,16 +1,17 @@
 'use strict';
 
-var _tslib = require('./bundle-bXLZZTmP.js');
+var _tslib = require('./bundle-RVs527mS.js');
 var React = require('react');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var pubSub_topics = require('./bundle-135pRm7i.js');
-var uuid = require('./bundle-INJtS58R.js');
-var utils = require('./bundle-LRCFL23q.js');
-var consts = require('./bundle-JbxviE94.js');
-var UserProfileContext = require('./bundle-7AS0Rcch.js');
+var pubSub_topics = require('./bundle-K8ngPNTR.js');
+var uuid = require('./bundle-sW6CpN9W.js');
+var utils = require('./bundle-nQDclaWr.js');
+var consts = require('./bundle-SggLEV_z.js');
+var UserProfileContext = require('./bundle-3S8jBmCV.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var index = require('./bundle-65IwoStx.js');
-var index$1 = require('./bundle-p6kWiWDv.js');
+var index = require('./bundle--RWWGoZo.js');
+var index$1 = require('./bundle-fnv2bNo-.js');
+var useReconnectOnIdle = require('./bundle-4hsD0CCh.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';
@@ -140,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) {
@@ -305,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; });
@@ -373,22 +381,41 @@ function channelListReducer(state, action) {
         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, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order);
+        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 });
     })
@@ -592,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,
@@ -611,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;
@@ -625,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
@@ -803,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; }),
@@ -826,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-Jcrboe06.js.map
+//# sourceMappingURL=bundle-9ZxGYXTj.js.map

package/{chunks/bundle-ipC2A4Tb.js.map → cjs/chunks/bundle-9ZxGYXTj.js.map}

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

package/cjs/chunks/bundle-9fFxVdSK.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('./bundle-WLD9KKbn.js');
+var ui_ContextMenu = require('../ui/ContextMenu.js');
+var ui_IconButton = require('../ui/IconButton.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Modal = require('./bundle-lnLwvZ7H.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+
+var LeaveGroupChannel = function (_a) {
+    var channel = _a.channel, onSubmit = _a.onSubmit, onCancel = _a.onCancel;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var logger = config.logger, isOnline = config.isOnline;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    if (channel) {
+        return (React.createElement(ui_Modal.Modal, { disabled: !isOnline, onCancel: onCancel, onSubmit: function () {
+                logger.info('LeaveGroupChannel: Leaving channel', channel);
+                channel.leave().then(function () {
+                    logger.info('LeaveGroupChannel: Leaving channel successful!', channel);
+                    onSubmit();
+                });
+            }, submitText: stringSet.MODAL__LEAVE_CHANNEL__FOOTER, titleText: stringSet.MODAL__LEAVE_CHANNEL__TITLE }));
+    }
+};
+
+function ChannelPreviewAction(_a) {
+    var channel = _a.channel, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onLeaveChannel = _a.onLeaveChannel;
+    var parentRef = React.useRef(null);
+    var parentContainerRef = React.useRef(null);
+    var _c = React.useState(false), showModal = _c[0], setShowModal = _c[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { ref: parentContainerRef, tabIndex: 0, role: "button", style: { display: 'inline-block' }, onKeyDown: function (e) { return e.stopPropagation(); }, onClick: function (e) { return e.stopPropagation(); } },
+        React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { ref: parentRef, onClick: toggleDropdown, height: "32px", width: "32px" },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentRef: parentRef, parentContainRef: parentContainerRef, closeDropdown: closeDropdown },
+                React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                        if (disabled) {
+                            return;
+                        }
+                        setShowModal(true);
+                        closeDropdown();
+                    }, dataSbId: "channel_list_item_context_menu_leave_channel" }, stringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE))); } }),
+        showModal && (React.createElement(LeaveGroupChannel, { channel: channel, onSubmit: function () {
+                setShowModal(false);
+                onLeaveChannel();
+            }, onCancel: function () { return setShowModal(false); } }))));
+}
+
+exports.ChannelPreviewAction = ChannelPreviewAction;
+exports.LeaveGroupChannel = LeaveGroupChannel;
+//# sourceMappingURL=bundle-9fFxVdSK.js.map

package/cjs/chunks/bundle-9fFxVdSK.js.map

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

package/cjs/chunks/{bundle-r8Z3GYqh.js → bundle-BRRuC2D3.js}

@@ -14,26 +14,27 @@ exports.CHANNEL_TYPE = void 0;
 var CreateChannelContext = React.createContext(undefined);
 var CreateChannelProvider = function (props) {
     var _a;
-    var children = props.children, onCreateChannel = props.onCreateChannel, onBeforeCreateChannel = props.onBeforeCreateChannel, overrideInviteUser = props.overrideInviteUser, userListQuery = props.userListQuery;
+    var children = props.children, onCreateChannelClick = props.onCreateChannelClick, onBeforeCreateChannel = props.onBeforeCreateChannel, onChannelCreated = props.onChannelCreated, userListQuery = props.userListQuery, onCreateChannel = props.onCreateChannel, overrideInviteUser = props.overrideInviteUser;
     var store = useSendbirdStateContext.useSendbirdStateContext();
-    var userListQuery_ = (_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.userListQuery;
-    var createChannel = sendbirdSelectors.getCreateGroupChannel(store);
+    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: {
+            createChannel: sendbirdSelectors.getCreateGroupChannel(store),
+            onCreateChannelClick: onCreateChannelClick,
             onBeforeCreateChannel: onBeforeCreateChannel,
-            createChannel: createChannel,
-            onCreateChannel: onCreateChannel,
-            overrideInviteUser: overrideInviteUser,
-            userListQuery: userListQuery || userListQuery_,
+            onChannelCreated: onChannelCreated,
+            userListQuery: _userListQuery,
             step: step,
             setStep: setStep,
             type: type,
             setType: setType,
+            onCreateChannel: onCreateChannel,
+            overrideInviteUser: overrideInviteUser,
         } }, children));
 };
 var useCreateChannelContext = function () { return (React.useContext(CreateChannelContext)); };
 
 exports.CreateChannelProvider = CreateChannelProvider;
 exports.useCreateChannelContext = useCreateChannelContext;
-//# sourceMappingURL=bundle-r8Z3GYqh.js.map
+//# sourceMappingURL=bundle-BRRuC2D3.js.map

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

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

package/cjs/chunks/bundle-Bx0FCMKL.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var React = require('react');
+var ui_Icon = require('../ui/Icon.js');
+var message = require('@sendbird/chat/message');
+var ui_ImageRenderer = require('../ui/ImageRenderer.js');
+var index = require('./bundle-fnv2bNo-.js');
+var ui_FileViewer = require('./bundle-3GWdY_5G.js');
+var index$1 = require('./bundle--RWWGoZo.js');
+var _tslib = require('./bundle-RVs527mS.js');
+
+function ImageGrid(_a) {
+    var _b;
+    var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
+    return (React.createElement("div", { className: 'sendbird-image-grid-wrap' },
+        React.createElement("div", { className: index.getClassName([
+                className,
+                'sendbird-image-grid',
+                (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+            ]) }, children)));
+}
+
+var GRID_WIDTH_CHAT_WEB = 400;
+var GRID_SIDE_PADDING = 8;
+var GRID_GAP = 4;
+var TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 54;
+var PROFILE_IMAGE_WIDTH = 40;
+var CHAT_MOBILE_SIDE_PADDING = 48;
+var THREAD_PARENT_WIDTH = 320;
+var THREAD_PARENT_SIDE_PADDING = 28;
+var THREAD_PARENT_GRID_MARGIN_LEFT = 12;
+var THREAD_CHILD_WIDTH = 200;
+var THREAD_CHILD_SIDE_PADDING = 8;
+var THREAD_CHILD_MOBILE_SIDE_PADDING = 32;
+var THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 60;
+var MULTIPLE_FILES_IMAGE_SIDE_LENGTH = {
+    CHAT_WEB: "calc(".concat(GRID_WIDTH_CHAT_WEB / 2, "px - ").concat((GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    CHAT_MOBILE: "calc(50vw - ".concat((CHAT_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    THREAD_PARENT_WEB: "calc(".concat((THREAD_PARENT_WIDTH - (THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP)) / 2, "px)"),
+    THREAD_PARENT_MOBILE: "calc(50vw - ".concat((THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_WEB: "calc(".concat((THREAD_CHILD_WIDTH - THREAD_CHILD_SIDE_PADDING - GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_MOBILE: "calc(50vw - ".concat((THREAD_CHILD_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+};
+var MULTIPLE_FILES_IMAGE_BORDER_RADIUS = {
+    CHAT_WEB: '6px',
+    CHAT_MOBILE: '6px',
+    THREAD_PARENT_WEB: '6px',
+    THREAD_PARENT_MOBILE: '6px',
+    THREAD_CHILD_WEB: '6px',
+    THREAD_CHILD_MOBILE: '6px',
+};
+var MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH = '34px';
+
+var ThreadMessageKind = {
+    PARENT: 'parent',
+    CHILD: 'child',
+};
+function MultipleFilesMessageItemBody(_a) {
+    var className = _a.className, message$1 = _a.message, _b = _a.isReactionEnabled, isReactionEnabled = _b === void 0 ? false : _b, threadMessageKindKey = _a.threadMessageKindKey, _c = _a.statefulFileInfoList, statefulFileInfoList = _c === void 0 ? [] : _c;
+    var _d = React.useState(-1), currentFileViewerIndex = _d[0], setCurrentFileViewerIndex = _d[1];
+    function onClose() {
+        setCurrentFileViewerIndex(-1);
+    }
+    function onClickLeft() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === 0 ? statefulFileInfoList.length - 1 : currentFileViewerIndex - 1);
+    }
+    function onClickRight() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1 ? 0 : currentFileViewerIndex + 1);
+    }
+    return (threadMessageKindKey && (React.createElement(React.Fragment, null,
+        currentFileViewerIndex > -1 && (React.createElement(ui_FileViewer.FileViewer, { message: message$1, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose })),
+        React.createElement(ImageGrid, { className: className, message: message$1, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index$1) {
+            var _a, _b, _c;
+            return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer-wrapper", onClick: message$1.sendingStatus === message.SendingStatus.SUCCEEDED ? function () { return setCurrentFileViewerIndex(index$1); } : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index$1, "-").concat(fileInfo.url) },
+                React.createElement(ui_ImageRenderer.default, { url: (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url, fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: ui_ImageRenderer.getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index$1, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (_a) {
+                        var style = _a.style;
+                        if (index.isGif(fileInfo.mimeType))
+                            return React.createElement(ImagePlaceholder.GIF, { style: style });
+                        return React.createElement(ImagePlaceholder.Default, { style: style });
+                    }, defaultComponent: React.createElement(ImagePlaceholder.LoadError, null) })));
+        })))));
+}
+var ImagePlaceholder = {
+    Default: function (_a) {
+        var style = _a.style;
+        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })));
+    },
+    GIF: function (_a) {
+        var style = _a.style;
+        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.GIF, fillColor: ui_Icon.IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))));
+    },
+    LoadError: function () { return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" },
+        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.THUMBNAIL_NONE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); },
+};
+
+function useThreadMessageKindKeySelector(_a) {
+    var threadMessageKind = _a.threadMessageKind, isMobile = _a.isMobile;
+    var threadMessageKindKey = React.useMemo(function () {
+        return index$1.K(threadMessageKind)
+            .with(ThreadMessageKind.PARENT, function () { return (isMobile
+            ? 'THREAD_PARENT_MOBILE'
+            : 'THREAD_PARENT_WEB'); })
+            .with(ThreadMessageKind.CHILD, function () { return (isMobile
+            ? 'THREAD_CHILD_MOBILE'
+            : 'THREAD_CHILD_WEB'); })
+            .otherwise(function () { return (isMobile
+            ? 'CHAT_MOBILE'
+            : 'CHAT_WEB'); });
+    }, [isMobile, threadMessageKind]);
+    return threadMessageKindKey;
+}
+
+// SendingStatus.SCHEDULED is currently not covered in UIKit
+//  So we can ignore for now, but for future, it is better to explicitly use PENDING, FAILED, or CANCELED.
+var useFileInfoListWithUploaded = function (message$1) {
+    var blobHandler = React.useRef(new Map());
+    var getObjectURL = function (index, blob) {
+        if (!blobHandler.current.has(index) && blob)
+            blobHandler.current.set(index, URL.createObjectURL(blob));
+        return blobHandler.current.get(index);
+    };
+    var revokeURLs = function () {
+        if (blobHandler.current.size > 0) {
+            blobHandler.current.forEach(function (url) { return URL.revokeObjectURL(url); });
+            blobHandler.current.clear();
+        }
+    };
+    React.useEffect(function () {
+        return function () { return revokeURLs(); };
+    }, []);
+    if (!message$1 || !message$1.isMultipleFilesMessage || !message$1.isMultipleFilesMessage()) {
+        return [];
+    }
+    else if (message$1.sendingStatus === message.SendingStatus.SUCCEEDED) {
+        revokeURLs();
+        return message$1.fileInfoList.map(function (it) { return (_tslib.__assign(_tslib.__assign({}, it), { url: it.url, isUploaded: true })); });
+    }
+    else {
+        return message$1.messageParams.fileInfoList.map(function (it, index) {
+            var _a, _b;
+            return (_tslib.__assign(_tslib.__assign({}, it), { url: (_b = (_a = getObjectURL(index)) !== null && _a !== void 0 ? _a : it.fileUrl) !== null && _b !== void 0 ? _b : (it.file instanceof Blob ? getObjectURL(index, it.file) : undefined), isUploaded: !it.file && typeof it.fileUrl === 'string' && it.fileUrl.length > 0 }));
+        });
+    }
+};
+
+exports.MultipleFilesMessageItemBody = MultipleFilesMessageItemBody;
+exports.ThreadMessageKind = ThreadMessageKind;
+exports.useFileInfoListWithUploaded = useFileInfoListWithUploaded;
+exports.useThreadMessageKindKeySelector = useThreadMessageKindKeySelector;
+//# sourceMappingURL=bundle-Bx0FCMKL.js.map

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

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

package/cjs/chunks/bundle-C42WLw1z.js

@@ -0,0 +1,40 @@
+'use strict';
+
+function getComponentKeyFromMessage(message) {
+    if ('sendingStatus' in message) {
+        if (message.sendingStatus === 'succeeded')
+            return String(message.messageId);
+        return message.reqId;
+    }
+    return String(message.messageId);
+}
+function isContextMenuClosed() {
+    var _a, _b;
+    return (((_a = document.getElementById('sendbird-dropdown-portal')) === null || _a === void 0 ? void 0 : _a.childElementCount) === 0
+        && ((_b = document.getElementById('sendbird-emoji-list-portal')) === null || _b === void 0 ? void 0 : _b.childElementCount) === 0);
+}
+function getMessageTopOffset(messageCreatedAt) {
+    var _a;
+    var element = (_a = document.querySelectorAll("[data-sb-created-at=\"".concat(messageCreatedAt, "\"]"))) === null || _a === void 0 ? void 0 : _a[0];
+    if (element instanceof HTMLElement) {
+        return element.offsetTop;
+    }
+    return null;
+}
+var isDisabledBecauseFrozen = function (groupChannel) {
+    if (!groupChannel)
+        return false;
+    return groupChannel.isFrozen && groupChannel.myRole !== 'operator';
+};
+var isDisabledBecauseMuted = function (groupChannel) {
+    if (!groupChannel)
+        return false;
+    return groupChannel.myMutedState === 'muted';
+};
+
+exports.getComponentKeyFromMessage = getComponentKeyFromMessage;
+exports.getMessageTopOffset = getMessageTopOffset;
+exports.isContextMenuClosed = isContextMenuClosed;
+exports.isDisabledBecauseFrozen = isDisabledBecauseFrozen;
+exports.isDisabledBecauseMuted = isDisabledBecauseMuted;
+//# sourceMappingURL=bundle-C42WLw1z.js.map

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

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

package/cjs/chunks/bundle-GRS8tlu-.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('./bundle-WLD9KKbn.js');
+var ui_Label = require('./bundle-JaD2Ao-u.js');
+
+var FrozenNotification = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: "sendbird-notification sendbird-notification--frozen ".concat(className) },
+        React.createElement(ui_Label.Label, { className: "sendbird-notification__text", type: ui_Label.LabelTypography.CAPTION_2 }, stringSet.CHANNEL_FROZEN)));
+};
+
+exports.FrozenNotification = FrozenNotification;
+//# sourceMappingURL=bundle-GRS8tlu-.js.map

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

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

package/cjs/chunks/{bundle-B5gH_etT.js → bundle-HbkwcKgM.js}

@@ -1,25 +1,25 @@
 'use strict';
 
-var _tslib = require('./bundle-bXLZZTmP.js');
+var _tslib = require('./bundle-RVs527mS.js');
 var React = require('react');
 var ui_Button = require('../ui/Button.js');
 var ui_ContextMenu = require('../ui/ContextMenu.js');
 var ui_Icon = require('../ui/Icon.js');
 var ui_IconButton = require('../ui/IconButton.js');
-var ui_Label = require('./bundle-7J3nX_hP.js');
-var LocalizationContext = require('./bundle-qtXdbPNE.js');
-var UserProfileContext = require('./bundle-7AS0Rcch.js');
-require('./bundle-y8EiLlDT.js');
-var ui_Avatar = require('./bundle-7VJjqIPJ.js');
+var ui_Label = require('./bundle-JaD2Ao-u.js');
+var LocalizationContext = require('./bundle-WLD9KKbn.js');
+var UserProfileContext = require('./bundle-3S8jBmCV.js');
+require('./bundle-QCo3MNRk.js');
+var ui_Avatar = require('./bundle-rUpy0DGt.js');
 require('react-dom');
-require('./bundle-WzrocC57.js');
+require('./bundle-2ToiwW-_.js');
 var ui_MutedAvatarOverlay = require('../ui/MutedAvatarOverlay.js');
 var ui_UserProfile = require('../ui/UserProfile.js');
 var OpenChannelSettings_context = require('../OpenChannelSettings/context.js');
 require('../withSendbird.js');
-var ui_Modal = require('./bundle-Oc2T5_VP.js');
+var ui_Modal = require('./bundle-lnLwvZ7H.js');
 var ui_UserListItem = require('../ui/UserListItem.js');
-var utils = require('./bundle-LRCFL23q.js');
+var utils = require('./bundle-nQDclaWr.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 
 function ParticipantsModal(_a) {
@@ -235,4 +235,4 @@ function ParticipantList(_a) {
 
 exports.ParticipantList = ParticipantList;
 exports.UserListItem = UserListItem;
-//# sourceMappingURL=bundle-B5gH_etT.js.map
+//# sourceMappingURL=bundle-HbkwcKgM.js.map

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

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