@sendbird/uikit-react 3.9.0 → 3.9.1-rc-0

package/dist/cjs/Channel.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var React = require('react');
+var Channel_context = require('./chunks/bundle-cimsvery.js');
+var Channel_components_ChannelUI = require('./Channel/components/ChannelUI.js');
+require('./chunks/bundle-O5wLOxN7.js');
+require('./useSendbirdStateContext.js');
+require('./withSendbird.js');
+require('./chunks/bundle-RmtoGD4w.js');
+require('./chunks/bundle-H-T9QzU6.js');
+require('./chunks/bundle-4eGWgY9M.js');
+require('./chunks/bundle-isd9KugI.js');
+require('./chunks/bundle-PwiP9Ezo.js');
+require('./chunks/bundle-CDhpLgdo.js');
+require('./utils/message/getOutgoingMessageState.js');
+require('./chunks/bundle--sK1aluY.js');
+require('@sendbird/chat/message');
+require('./chunks/bundle-rN2rLxDW.js');
+require('./chunks/bundle-Mswmp_1O.js');
+require('@sendbird/chat/groupChannel');
+require('./chunks/bundle-2B2B2GGi.js');
+require('./Channel/hooks/useInitialMessagesFetch.js');
+require('./chunks/bundle-NyrRrrQE.js');
+require('./chunks/bundle-98hUmAMo.js');
+require('./chunks/bundle-EW9CHi3w.js');
+require('./chunks/bundle-GmkLfTb8.js');
+require('./ui/PlaceHolder.js');
+require('./chunks/bundle-AkDULw2F.js');
+require('./chunks/bundle-Sx--KyLX.js');
+require('./ui/Icon.js');
+require('./chunks/bundle-3WvVLPrn.js');
+require('./chunks/bundle-41kBJWv1.js');
+require('./ui/Loader.js');
+require('./ui/ConnectionStatus.js');
+require('./Channel/components/ChannelHeader.js');
+require('./chunks/bundle-LFMgWHoT.js');
+require('./ui/IconButton.js');
+require('./ui/ChannelAvatar.js');
+require('./chunks/bundle-Ep-tjaav.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-sQoST7ZS.js');
+require('./chunks/bundle-PBiPabbQ.js');
+require('./chunks/bundle-2utPAHKj.js');
+require('./chunks/bundle-uWB1AoIz.js');
+require('./Channel/components/Message.js');
+require('./Channel/components/SuggestedMentionList.js');
+require('./chunks/bundle-NtafuClb.js');
+require('./Thread/context.js');
+require('./Thread/context/types.js');
+require('@sendbird/chat');
+require('./ui/DateSeparator.js');
+require('./chunks/bundle-2aaytxwj.js');
+require('./ui/MessageInput.js');
+require('./ui/Button.js');
+require('./chunks/bundle-VXYKCjcf.js');
+require('dompurify');
+require('./chunks/bundle-PxOOmulx.js');
+require('./chunks/bundle-SiCT4KKh.js');
+require('./chunks/bundle-T16VOUoM.js');
+require('./chunks/bundle-dR2UsXRP.js');
+require('./ui/MessageContent.js');
+require('./chunks/bundle--xyql9Ig.js');
+require('./chunks/bundle-29H6Jsc5.js');
+require('./chunks/bundle-SY-8B8r8.js');
+require('./ui/MessageItemMenu.js');
+require('./ui/ContextMenu.js');
+require('react-dom');
+require('./ui/SortByRow.js');
+require('./chunks/bundle-Y1a8RrT8.js');
+require('./ui/MessageItemReactionMenu.js');
+require('./ui/ReactionButton.js');
+require('./chunks/bundle-q2F5p3vc.js');
+require('./ui/EmojiReactions.js');
+require('./ui/ReactionBadge.js');
+require('./ui/BottomSheet.js');
+require('./hooks/useModal.js');
+require('./chunks/bundle-stRq_8W4.js');
+require('./ui/UserListItem.js');
+require('./ui/MutedAvatarOverlay.js');
+require('./ui/Checkbox.js');
+require('./ui/UserProfile.js');
+require('./sendbirdSelectors.js');
+require('./ui/Tooltip.js');
+require('./ui/TooltipWrapper.js');
+require('./Message/context.js');
+require('./ui/AdminMessage.js');
+require('./ui/QuoteMessage.js');
+require('./chunks/bundle-WOnMwb1P.js');
+require('./chunks/bundle-yPWVmQGL.js');
+require('./ui/ThreadReplies.js');
+require('./ui/OGMessageItemBody.js');
+require('./chunks/bundle-DFMVl_Mm.js');
+require('./ui/MentionLabel.js');
+require('./ui/LinkLabel.js');
+require('./ui/TextMessageItemBody.js');
+require('./ui/FileMessageItemBody.js');
+require('./ui/TextButton.js');
+require('./chunks/bundle-MP2S1vK8.js');
+require('./chunks/bundle-fXAUBZTE.js');
+require('./ui/VoiceMessageItemBody.js');
+require('./ui/ProgressBar.js');
+require('./VoicePlayer/useVoicePlayer.js');
+require('./chunks/bundle-cbDU-09l.js');
+require('./VoiceRecorder/context.js');
+require('./ui/PlaybackTime.js');
+require('./ui/ThumbnailMessageItemBody.js');
+require('./ui/UnknownMessageItemBody.js');
+require('./Channel/components/FileViewer.js');
+require('./Channel/components/RemoveMessageModal.js');
+require('./chunks/bundle-QcbgU9KW.js');
+require('./chunks/bundle-AD4Oflxo.js');
+require('./Message/hooks/useDirtyGetMentions.js');
+require('./Channel/utils/getMessagePartsInfo.js');
+require('./Channel/utils/compareMessagesForGrouping.js');
+require('./Channel/components/UnreadCount.js');
+require('./Channel/components/FrozenNotification.js');
+require('./ui/TypingIndicatorBubble.js');
+require('@sendbird/uikit-tools');
+require('./Channel/components/TypingIndicator.js');
+require('./Channel/components/MessageInput.js');
+require('./ui/QuoteMessageInput.js');
+require('./chunks/bundle-oImpAjjb.js');
+require('./VoiceRecorder/useVoiceRecorder.js');
+require('./chunks/bundle-ujHFJVoU.js');
+require('./Channel/hooks/useHandleUploadFiles.js');
+
+var Channel = function (props) {
+    return (React.createElement(Channel_context.ChannelProvider, { channelUrl: props === null || props === void 0 ? void 0 : props.channelUrl, isReactionEnabled: props === null || props === void 0 ? void 0 : props.isReactionEnabled, isMessageGroupingEnabled: props === null || props === void 0 ? void 0 : props.isMessageGroupingEnabled, isMultipleFilesMessageEnabled: props === null || props === void 0 ? void 0 : props.isMultipleFilesMessageEnabled, showSearchIcon: props === null || props === void 0 ? void 0 : props.showSearchIcon, animatedMessage: props === null || props === void 0 ? void 0 : props.animatedMessage, highlightedMessage: props === null || props === void 0 ? void 0 : props.highlightedMessage, startingPoint: props === null || props === void 0 ? void 0 : props.startingPoint, onBeforeSendUserMessage: props === null || props === void 0 ? void 0 : props.onBeforeSendUserMessage, onBeforeSendFileMessage: props === null || props === void 0 ? void 0 : props.onBeforeSendFileMessage, onBeforeUpdateUserMessage: props === null || props === void 0 ? void 0 : props.onBeforeUpdateUserMessage, onBeforeSendVoiceMessage: props === null || props === void 0 ? void 0 : props.onBeforeSendVoiceMessage, onBeforeSendMultipleFilesMessage: props === null || props === void 0 ? void 0 : props.onBeforeSendMultipleFilesMessage, onChatHeaderActionClick: props === null || props === void 0 ? void 0 : props.onChatHeaderActionClick, onSearchClick: props === null || props === void 0 ? void 0 : props.onSearchClick, onBackClick: props === null || props === void 0 ? void 0 : props.onBackClick, replyType: props === null || props === void 0 ? void 0 : props.replyType, threadReplySelectType: props === null || props === void 0 ? void 0 : props.threadReplySelectType, queries: props === null || props === void 0 ? void 0 : props.queries, renderUserProfile: props === null || props === void 0 ? void 0 : props.renderUserProfile, filterMessageList: props === null || props === void 0 ? void 0 : props.filterMessageList, disableUserProfile: props === null || props === void 0 ? void 0 : props.disableUserProfile, disableMarkAsRead: props === null || props === void 0 ? void 0 : props.disableMarkAsRead, onReplyInThread: props === null || props === void 0 ? void 0 : props.onReplyInThread, onQuoteMessageClick: props === null || props === void 0 ? void 0 : props.onQuoteMessageClick, onMessageAnimated: props === null || props === void 0 ? void 0 : props.onMessageAnimated, onMessageHighlighted: props === null || props === void 0 ? void 0 : props.onMessageHighlighted, scrollBehavior: props.scrollBehavior, reconnectOnIdle: props.reconnectOnIdle },
+        React.createElement(Channel_components_ChannelUI, { isLoading: props === null || props === void 0 ? void 0 : props.isLoading, renderPlaceholderLoader: props === null || props === void 0 ? void 0 : props.renderPlaceholderLoader, renderPlaceholderInvalid: props === null || props === void 0 ? void 0 : props.renderPlaceholderInvalid, renderPlaceholderEmpty: props === null || props === void 0 ? void 0 : props.renderPlaceholderEmpty, renderChannelHeader: props === null || props === void 0 ? void 0 : props.renderChannelHeader, renderMessage: props === null || props === void 0 ? void 0 : props.renderMessage, renderMessageInput: props === null || props === void 0 ? void 0 : props.renderMessageInput, renderTypingIndicator: props === null || props === void 0 ? void 0 : props.renderTypingIndicator, renderCustomSeparator: props === null || props === void 0 ? void 0 : props.renderCustomSeparator, renderFileUploadIcon: props === null || props === void 0 ? void 0 : props.renderFileUploadIcon, renderVoiceMessageIcon: props === null || props === void 0 ? void 0 : props.renderVoiceMessageIcon, renderSendMessageIcon: props === null || props === void 0 ? void 0 : props.renderSendMessageIcon, renderFrozenNotification: props === null || props === void 0 ? void 0 : props.renderFrozenNotification })));
+};
+
+module.exports = Channel;
+//# sourceMappingURL=Channel.js.map

package/dist/cjs/ChannelList/components/AddChannel.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui_IconButton = require('../../ui/IconButton.js');
+var ui_Icon = require('../../ui/Icon.js');
+var CreateChannel = require('../../CreateChannel.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var ChannelList_context = require('../../chunks/bundle-EXbRHVSB.js');
+require('../../chunks/bundle-RmtoGD4w.js');
+require('../../chunks/bundle-3WvVLPrn.js');
+require('../../CreateChannel/components/CreateChannelUI.js');
+require('../../chunks/bundle-S4LTyQ30.js');
+require('../../sendbirdSelectors.js');
+require('../../chunks/bundle-NyrRrrQE.js');
+require('../../CreateChannel/components/InviteUsers.js');
+require('../../chunks/bundle-AkDULw2F.js');
+require('../../chunks/bundle-Sx--KyLX.js');
+require('../../chunks/bundle-PwiP9Ezo.js');
+require('../../chunks/bundle-stRq_8W4.js');
+require('react-dom');
+require('../../chunks/bundle-2utPAHKj.js');
+require('../../ui/Button.js');
+require('../../chunks/bundle-41kBJWv1.js');
+require('../../ui/UserListItem.js');
+require('../../chunks/bundle-O5wLOxN7.js');
+require('../../chunks/bundle-Ep-tjaav.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-2B2B2GGi.js');
+require('../../chunks/bundle-sQoST7ZS.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
+require('../../ui/UserProfile.js');
+require('../../ui/ContextMenu.js');
+require('../../ui/SortByRow.js');
+require('../../chunks/bundle-CDhpLgdo.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle--sK1aluY.js');
+require('../../CreateChannel/components/SelectChannelType.js');
+require('../../withSendbird.js');
+require('@sendbird/chat/groupChannel');
+require('../../chunks/bundle-98hUmAMo.js');
+
+var AddChannel = function () {
+    var _a;
+    var _b = React.useState(false), showModal = _b[0], setShowModal = _b[1];
+    var state = useSendbirdStateContext.useSendbirdStateContext();
+    var isOnline = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.isOnline;
+    var disabled = !isOnline;
+    var _c = ChannelList_context.useChannelListContext(), overrideInviteUser = _c.overrideInviteUser, onBeforeCreateChannel = _c.onBeforeCreateChannel;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ui_IconButton, { height: "32px", width: "32px", onClick: function () {
+                setShowModal(true);
+            }, disabled: disabled },
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CREATE, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" })),
+        showModal && (React.createElement(CreateChannel, { onCancel: function () {
+                setShowModal(false);
+            }, overrideInviteUser: overrideInviteUser, onCreateChannel: function () {
+                setShowModal(false);
+            }, onBeforeCreateChannel: onBeforeCreateChannel }))));
+};
+
+exports.AddChannel = AddChannel;
+exports.default = AddChannel;
+//# sourceMappingURL=AddChannel.js.map

package/dist/cjs/ChannelList/components/ChannelListHeader.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../../chunks/bundle-AkDULw2F.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var ui_Label = require('../../chunks/bundle-41kBJWv1.js');
+var ui_Avatar = require('../../chunks/bundle-Ep-tjaav.js');
+require('../../chunks/bundle-Sx--KyLX.js');
+require('../../chunks/bundle-PwiP9Ezo.js');
+require('../../withSendbird.js');
+require('../../chunks/bundle-RmtoGD4w.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-2B2B2GGi.js');
+require('../../chunks/bundle-sQoST7ZS.js');
+require('../../ui/Icon.js');
+require('../../chunks/bundle-3WvVLPrn.js');
+
+var ChannelListHeader = function (_a) {
+    var renderHeader = _a.renderHeader, renderTitle = _a.renderTitle, renderIconButton = _a.renderIconButton, onEdit = _a.onEdit, allowProfileEdit = _a.allowProfileEdit;
+    var _b = useSendbirdStateContext.useSendbirdStateContext(), stores = _b.stores, config = _b.config;
+    var user = stores.userStore.user;
+    var logger = config.logger;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    if (renderHeader) {
+        logger === null || logger === void 0 ? void 0 : logger.warning('Recomend to use "renderTitle" instead of "renderHeader". It will be deprecated.');
+    }
+    // renderTitle should have higher priority
+    var titleRenderer = renderHeader || renderTitle;
+    return (React.createElement("div", { className: [
+            'sendbird-channel-header',
+            allowProfileEdit ? 'sendbird-channel-header--allow-edit' : '',
+        ].join(' ') },
+        (titleRenderer === null || titleRenderer === void 0 ? void 0 : titleRenderer()) || (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())));
+};
+
+module.exports = ChannelListHeader;
+//# sourceMappingURL=ChannelListHeader.js.map

package/dist/cjs/ChannelList/components/ChannelListUI.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var React = require('react');
+var ChannelList_components_ChannelListHeader = require('./ChannelListHeader.js');
+var ChannelList_components_AddChannel = require('./AddChannel.js');
+var ChannelList_components_ChannelPreview = require('./ChannelPreview.js');
+var ChannelList_components_ChannelPreviewAction = require('./ChannelPreviewAction.js');
+var ChannelList_context = require('../../chunks/bundle-EXbRHVSB.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var EditUserProfile = require('../../EditUserProfile.js');
+var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
+var utils = require('../../chunks/bundle-3WvVLPrn.js');
+require('../../chunks/bundle-AkDULw2F.js');
+require('../../chunks/bundle-Sx--KyLX.js');
+require('../../chunks/bundle-PwiP9Ezo.js');
+require('../../chunks/bundle-41kBJWv1.js');
+require('../../chunks/bundle-RmtoGD4w.js');
+require('../../chunks/bundle-Ep-tjaav.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-2B2B2GGi.js');
+require('../../chunks/bundle-sQoST7ZS.js');
+require('../../ui/Icon.js');
+require('../../ui/IconButton.js');
+require('../../CreateChannel.js');
+require('../../CreateChannel/components/CreateChannelUI.js');
+require('../../chunks/bundle-S4LTyQ30.js');
+require('../../sendbirdSelectors.js');
+require('../../chunks/bundle-NyrRrrQE.js');
+require('../../CreateChannel/components/InviteUsers.js');
+require('../../chunks/bundle-stRq_8W4.js');
+require('react-dom');
+require('../../chunks/bundle-2utPAHKj.js');
+require('../../ui/Button.js');
+require('../../ui/UserListItem.js');
+require('../../chunks/bundle-O5wLOxN7.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
+require('../../ui/UserProfile.js');
+require('../../ui/ContextMenu.js');
+require('../../ui/SortByRow.js');
+require('../../chunks/bundle-CDhpLgdo.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle--sK1aluY.js');
+require('../../CreateChannel/components/SelectChannelType.js');
+require('../../ui/ChannelAvatar.js');
+require('../../chunks/bundle-PBiPabbQ.js');
+require('../../ui/Badge.js');
+require('../../chunks/bundle--xyql9Ig.js');
+require('../../chunks/bundle-isd9KugI.js');
+require('../../ui/Loader.js');
+require('../../chunks/bundle-29H6Jsc5.js');
+require('../../chunks/bundle-SY-8B8r8.js');
+require('../../ui/MentionUserLabel.js');
+require('../../chunks/bundle-PxOOmulx.js');
+require('../../ui/TextButton.js');
+require('../../chunks/bundle-2aaytxwj.js');
+require('../../Channel/components/TypingIndicator.js');
+require('@sendbird/chat/groupChannel');
+require('../../chunks/bundle-cimsvery.js');
+require('../../chunks/bundle-H-T9QzU6.js');
+require('../../chunks/bundle-4eGWgY9M.js');
+require('@sendbird/chat/message');
+require('../../chunks/bundle-rN2rLxDW.js');
+require('../../chunks/bundle-Mswmp_1O.js');
+require('../../Channel/hooks/useInitialMessagesFetch.js');
+require('../../chunks/bundle-98hUmAMo.js');
+require('../../chunks/bundle-EW9CHi3w.js');
+require('../../chunks/bundle-GmkLfTb8.js');
+require('../../chunks/bundle-q2F5p3vc.js');
+require('../../withSendbird.js');
+require('../../EditUserProfile/context.js');
+require('../../EditUserProfile/components/EditUserProfileUI.js');
+require('../../chunks/bundle-hAYm1E9a.js');
+require('../../ui/Input.js');
+
+var ChannelListUI = function (props) {
+    var _a;
+    var renderHeader = props.renderHeader, renderChannelPreview = props.renderChannelPreview, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList;
+    var _b = React.useState(false), showProfileEdit = _b[0], setShowProfileEdit = _b[1];
+    var _c = ChannelList_context.useChannelListContext(), onThemeChange = _c.onThemeChange, allowProfileEdit = _c.allowProfileEdit, allChannels = _c.allChannels, loading = _c.loading, currentChannel = _c.currentChannel, channelListDispatcher = _c.channelListDispatcher, typingChannels = _c.typingChannels, initialized = _c.initialized, fetchChannelList = _c.fetchChannelList, onProfileEditSuccess = _c.onProfileEditSuccess;
+    var state = useSendbirdStateContext.useSendbirdStateContext();
+    var sdkStore = (_a = state === null || state === void 0 ? void 0 : state.stores) === null || _a === void 0 ? void 0 : _a.sdkStore;
+    var config = state === null || state === void 0 ? void 0 : state.config;
+    var logger = config.logger, _d = config.isOnline, isOnline = _d === void 0 ? false : _d;
+    var sdkError = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.error;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "sendbird-channel-list__header" }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React.createElement(ChannelList_components_ChannelListHeader, { onEdit: function () {
+                if (allowProfileEdit) {
+                    setShowProfileEdit(true);
+                }
+            }, allowProfileEdit: allowProfileEdit, renderIconButton: function () { return (React.createElement(ChannelList_components_AddChannel.AddChannel, null)); } }))),
+        showProfileEdit && (React.createElement(EditUserProfile, { onThemeChange: onThemeChange, onCancel: function () { setShowProfileEdit(false); }, onEditProfile: function (user) {
+                setShowProfileEdit(false);
+                onProfileEditSuccess(user);
+            } })),
+        React.createElement("div", { className: "sendbird-channel-list__body", onScroll: function (e) {
+                var target = e === null || e === void 0 ? void 0 : e.target;
+                if (utils.isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 10)) {
+                    fetchChannelList();
+                }
+            } },
+            (sdkError && !loading) && ((renderPlaceHolderError && typeof renderPlaceHolderError === 'function') ? (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) : (React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG }))),
+            React.createElement("div", null, allChannels && allChannels.map(function (channel, idx) {
+                // todo: Refactor and move this inside channel - preview
+                var onLeaveChannel = function (c, cb) {
+                    logger.info('ChannelList: Leaving channel', c);
+                    c.leave()
+                        .then(function (res) {
+                        logger.info('ChannelList: Leaving channel success', res);
+                        if (cb && typeof cb === 'function') {
+                            cb(res, null);
+                        }
+                        channelListDispatcher({
+                            type: ChannelList_context.LEAVE_CHANNEL_SUCCESS,
+                            payload: channel === null || channel === void 0 ? void 0 : channel.url,
+                        });
+                    })
+                        .catch(function (err) {
+                        logger.error('ChannelList: Leaving channel failed', err);
+                        if (cb && typeof cb === 'function') {
+                            cb(null, err);
+                        }
+                    });
+                };
+                var onClick = function () {
+                    if (!isOnline) {
+                        return;
+                    }
+                    logger.info('ChannelList: Clicked on channel:', channel);
+                    channelListDispatcher({
+                        type: ChannelList_context.SET_CURRENT_CHANNEL,
+                        payload: channel,
+                    });
+                };
+                return ((renderChannelPreview)
+                    ? (
+                    // eslint-disable-next-line
+                    React.createElement("div", { key: channel === null || channel === void 0 ? void 0 : channel.url, onClick: onClick }, renderChannelPreview({ channel: channel, onLeaveChannel: onLeaveChannel })))
+                    : (React.createElement(ChannelList_components_ChannelPreview, { key: channel === null || channel === void 0 ? void 0 : channel.url, tabIndex: idx, onClick: onClick, channel: channel, onLeaveChannel: function () { return onLeaveChannel(channel, null); }, isActive: (channel === null || channel === void 0 ? void 0 : channel.url) === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url), isTyping: typingChannels === null || typingChannels === void 0 ? void 0 : typingChannels.some(function (_a) {
+                            var url = _a.url;
+                            return url === (channel === null || channel === void 0 ? void 0 : channel.url);
+                        }), renderChannelAction: (function () { return (React.createElement(ChannelList_components_ChannelPreviewAction, { channel: channel, disabled: !isOnline, onLeaveChannel: function () { return onLeaveChannel(channel, null); } })); }) })));
+            })),
+            (!initialized && loading) && ((renderPlaceHolderLoading && typeof renderPlaceHolderLoading === 'function') ? (renderPlaceHolderLoading === null || renderPlaceHolderLoading === void 0 ? void 0 : renderPlaceHolderLoading()) : (React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING }))),
+            (initialized && (allChannels === null || allChannels === void 0 ? void 0 : allChannels.length) === 0) && ((renderPlaceHolderEmptyList && typeof renderPlaceHolderEmptyList === 'function') ? (renderPlaceHolderEmptyList === null || renderPlaceHolderEmptyList === void 0 ? void 0 : renderPlaceHolderEmptyList()) : (React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS }))))));
+};
+
+module.exports = ChannelListUI;
+//# sourceMappingURL=ChannelListUI.js.map

package/dist/cjs/ChannelList/components/ChannelPreview.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var _tslib = require('../../chunks/bundle-RmtoGD4w.js');
+var React = require('react');
+var ui_ChannelAvatar = require('../../ui/ChannelAvatar.js');
+var ui_Badge = require('../../ui/Badge.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_Label = require('../../chunks/bundle-41kBJWv1.js');
+var ui_MessageStatus = require('../../chunks/bundle--xyql9Ig.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var LocalizationContext = require('../../chunks/bundle-AkDULw2F.js');
+var ui_MentionUserLabel = require('../../ui/MentionUserLabel.js');
+var ui_Modal = require('../../chunks/bundle-stRq_8W4.js');
+var ui_TextButton = require('../../ui/TextButton.js');
+var ChannelList_context = require('../../chunks/bundle-EXbRHVSB.js');
+var Channel_components_TypingIndicator = require('../../Channel/components/TypingIndicator.js');
+var index = require('../../chunks/bundle-CDhpLgdo.js');
+var MediaQueryContext = require('../../chunks/bundle-2utPAHKj.js');
+var useLongPress = require('../../chunks/bundle-q2F5p3vc.js');
+require('../../chunks/bundle-Ep-tjaav.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-2B2B2GGi.js');
+require('../../chunks/bundle-sQoST7ZS.js');
+require('../../chunks/bundle-PBiPabbQ.js');
+require('../../chunks/bundle-3WvVLPrn.js');
+require('../../chunks/bundle-Sx--KyLX.js');
+require('../../chunks/bundle-isd9KugI.js');
+require('../../chunks/bundle-PwiP9Ezo.js');
+require('../../ui/Loader.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle-29H6Jsc5.js');
+require('../../chunks/bundle-SY-8B8r8.js');
+require('../../withSendbird.js');
+require('../../chunks/bundle-PxOOmulx.js');
+require('react-dom');
+require('../../ui/IconButton.js');
+require('../../ui/Button.js');
+require('../../chunks/bundle-2aaytxwj.js');
+require('@sendbird/chat/groupChannel');
+require('../../chunks/bundle-NyrRrrQE.js');
+require('../../chunks/bundle-98hUmAMo.js');
+require('../../chunks/bundle-O5wLOxN7.js');
+require('../../chunks/bundle--sK1aluY.js');
+require('../../chunks/bundle-cimsvery.js');
+require('../../chunks/bundle-H-T9QzU6.js');
+require('../../chunks/bundle-4eGWgY9M.js');
+require('@sendbird/chat/message');
+require('../../chunks/bundle-rN2rLxDW.js');
+require('../../chunks/bundle-Mswmp_1O.js');
+require('../../Channel/hooks/useInitialMessagesFetch.js');
+require('../../chunks/bundle-EW9CHi3w.js');
+require('../../chunks/bundle-GmkLfTb8.js');
+
+var ChannelPreview = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var channel = _a.channel, _l = _a.isActive, isActive = _l === void 0 ? false : _l, _m = _a.isTyping, isTyping = _m === void 0 ? false : _m, renderChannelAction = _a.renderChannelAction, onLeaveChannel = _a.onLeaveChannel, onClick = _a.onClick, tabIndex = _a.tabIndex;
+    var sbState = useSendbirdStateContext.useSendbirdStateContext();
+    var _o = ChannelList_context.useChannelListContext(), _p = _o.isTypingIndicatorEnabled, isTypingIndicatorEnabled = _p === void 0 ? false : _p, _q = _o.isMessageReceiptStatusEnabled, isMessageReceiptStatusEnabled = _q === void 0 ? false : _q;
+    var _r = LocalizationContext.useLocalization(), dateLocale = _r.dateLocale, stringSet = _r.stringSet;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var _s = React.useState(false), showMobileLeave = _s[0], setShowMobileLeave = _s[1];
+    var userId = (_d = (_c = (_b = sbState === null || sbState === void 0 ? void 0 : sbState.stores) === null || _b === void 0 ? void 0 : _b.userStore) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.userId;
+    var theme = (_e = sbState === null || sbState === void 0 ? void 0 : sbState.config) === null || _e === void 0 ? void 0 : _e.theme;
+    var isMentionEnabled = (_f = sbState === null || sbState === void 0 ? void 0 : sbState.config) === null || _f === void 0 ? void 0 : _f.isMentionEnabled;
+    var isFrozen = (channel === null || channel === void 0 ? void 0 : channel.isFrozen) || false;
+    var isBroadcast = (channel === null || channel === void 0 ? void 0 : channel.isBroadcast) || false;
+    var isChannelTyping = isTypingIndicatorEnabled && isTyping;
+    var isMessageStatusEnabled = isMessageReceiptStatusEnabled
+        && (((_g = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _g === void 0 ? void 0 : _g.messageType) === 'user' || ((_h = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _h === void 0 ? void 0 : _h.messageType) === 'file')
+        && ((_k = (_j = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _j === void 0 ? void 0 : _j.sender) === null || _k === void 0 ? void 0 : _k.userId) === userId;
+    var onLongPress = useLongPress.useLongPress({
+        onLongPress: function () {
+            if (isMobile) {
+                setShowMobileLeave(true);
+            }
+        },
+        onClick: onClick,
+    }, {
+        delay: 1000,
+    });
+    var channelName = ui_MessageStatus.getChannelTitle(channel, userId, stringSet);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", _tslib.__assign({ className: [
+                'sendbird-channel-preview',
+                isActive ? 'sendbird-channel-preview--active' : '',
+            ].join(' '), role: "link", tabIndex: tabIndex }, (isMobile ? _tslib.__assign({}, onLongPress) : { onClick: onClick })),
+            React.createElement("div", { className: "sendbird-channel-preview__avatar" },
+                React.createElement(ui_ChannelAvatar, { channel: channel, userId: userId, theme: theme })),
+            React.createElement("div", { className: "sendbird-channel-preview__content" },
+                React.createElement("div", { className: "sendbird-channel-preview__content__upper" },
+                    React.createElement("div", { className: "sendbird-channel-preview__content__upper__header" },
+                        isBroadcast
+                            && (React.createElement("div", { className: "sendbird-channel-preview__content__upper__header__broadcast-icon" },
+                                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.SECONDARY, height: "16px", width: "16px" }))),
+                        React.createElement(ui_Label.Label, { className: "sendbird-channel-preview__content__upper__header__channel-name", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, channelName),
+                        React.createElement(ui_Label.Label, { className: "sendbird-channel-preview__content__upper__header__total-members", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ui_MessageStatus.getTotalMembers(channel)),
+                        isFrozen
+                            && (React.createElement("div", { title: "Frozen", className: "sendbird-channel-preview__content__upper__header__frozen-icon" },
+                                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.FREEZE, fillColor: ui_Icon.IconColors.PRIMARY, height: 12, width: 12 })))),
+                    (!(channel === null || channel === void 0 ? void 0 : channel.isEphemeral) && isMessageStatusEnabled) && (React.createElement(ui_MessageStatus.MessageStatus, { className: "sendbird-channel-preview__content__upper__last-message-at", channel: channel, message: channel === null || channel === void 0 ? void 0 : channel.lastMessage, isDateSeparatorConsidered: false })),
+                    (!(channel === null || channel === void 0 ? void 0 : channel.isEphemeral) && !isMessageStatusEnabled) && (React.createElement(ui_Label.Label, { className: "sendbird-channel-preview__content__upper__last-message-at", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ui_MessageStatus.getLastMessageCreatedAt({
+                        channel: channel,
+                        locale: dateLocale,
+                        stringSet: stringSet,
+                    })))),
+                React.createElement("div", { className: "sendbird-channel-preview__content__lower" },
+                    React.createElement(ui_Label.Label, { className: "sendbird-channel-preview__content__lower__last-message", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_3 },
+                        isChannelTyping && (React.createElement(Channel_components_TypingIndicator.TypingIndicatorText, { members: channel === null || channel === void 0 ? void 0 : channel.getTypingUsers() })),
+                        !isChannelTyping && !index.isVoiceMessage(channel === null || channel === void 0 ? void 0 : channel.lastMessage) && (ui_MessageStatus.getLastMessage(channel, stringSet)),
+                        !isChannelTyping && index.isVoiceMessage(channel === null || channel === void 0 ? void 0 : channel.lastMessage) && (stringSet.VOICE_MESSAGE)),
+                    /**
+                     * Do not show unread count for focused channel. This is because of the limitation where
+                     * isScrollBottom and hasNext states needs to be added globally but they are from channel context
+                     * so channel list cannot see them with the current architecture.
+                     */
+                    !isActive && !(channel === null || channel === void 0 ? void 0 : channel.isEphemeral) && (React.createElement("div", { className: "sendbird-channel-preview__content__lower__unread-message-count" },
+                        (isMentionEnabled && (channel === null || channel === void 0 ? void 0 : channel.unreadMentionCount) > 0)
+                            ? (React.createElement(ui_MentionUserLabel, { className: "sendbird-channel-preview__content__lower__unread-message-count__mention", color: "purple" }, '@'))
+                            : null,
+                        ui_MessageStatus.getChannelUnreadMessageCount(channel) // return number
+                            ? React.createElement(ui_Badge, { count: ui_MessageStatus.getChannelUnreadMessageCount(channel) })
+                            : null)))),
+            !isMobile && (React.createElement("div", { className: "sendbird-channel-preview__action" }, renderChannelAction({ channel: channel })))),
+        showMobileLeave && isMobile && (React.createElement(ui_Modal.Modal, { className: "sendbird-channel-preview__leave--mobile", titleText: channelName, hideFooter: true, isCloseOnClickOutside: true, onCancel: function () { return setShowMobileLeave(false); } },
+            React.createElement(ui_TextButton, { onClick: function () {
+                    onLeaveChannel();
+                    setShowMobileLeave(false);
+                }, className: "sendbird-channel-preview__leave-label--mobile" },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.CHANNEL_PREVIEW_MOBILE_LEAVE))))));
+};
+
+module.exports = ChannelPreview;
+//# sourceMappingURL=ChannelPreview.js.map

package/dist/cjs/ChannelList/components/ChannelPreviewAction.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../../chunks/bundle-AkDULw2F.js');
+var ui_ContextMenu = require('../../ui/ContextMenu.js');
+var ui_IconButton = require('../../ui/IconButton.js');
+var ui_Icon = require('../../ui/Icon.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var utils = require('../../chunks/bundle-3WvVLPrn.js');
+var ui_Modal = require('../../chunks/bundle-stRq_8W4.js');
+var ChannelList_context = require('../../chunks/bundle-EXbRHVSB.js');
+require('../../chunks/bundle-Sx--KyLX.js');
+require('../../chunks/bundle-PwiP9Ezo.js');
+require('../../chunks/bundle-RmtoGD4w.js');
+require('react-dom');
+require('../../ui/SortByRow.js');
+require('../../chunks/bundle-2B2B2GGi.js');
+require('../../chunks/bundle-CDhpLgdo.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle--sK1aluY.js');
+require('../../chunks/bundle-41kBJWv1.js');
+require('../../withSendbird.js');
+require('../../chunks/bundle-2utPAHKj.js');
+require('../../ui/Button.js');
+require('@sendbird/chat/groupChannel');
+require('../../chunks/bundle-NyrRrrQE.js');
+require('../../chunks/bundle-98hUmAMo.js');
+require('../../chunks/bundle-O5wLOxN7.js');
+
+var LeaveChannel = function (props) {
+    var _a, _b, _c;
+    var _d = props.channel, channel = _d === void 0 ? null : _d, _e = props.onSubmit, onSubmit = _e === void 0 ? utils.noop : _e, _f = props.onCancel, onCancel = _f === void 0 ? utils.noop : _f;
+    var channelFromContext = (_a = ChannelList_context.useChannelListContext()) === null || _a === void 0 ? void 0 : _a.currentChannel;
+    var leavingChannel = channel || channelFromContext;
+    var state = useSendbirdStateContext.useSendbirdStateContext();
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var logger = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.logger;
+    var isOnline = (_c = state === null || state === void 0 ? void 0 : state.config) === null || _c === void 0 ? void 0 : _c.isOnline;
+    if (leavingChannel) {
+        return (React.createElement(ui_Modal.Modal, { disabled: !isOnline, onCancel: onCancel, onSubmit: function () {
+                logger.info('ChannelSettings: Leaving channel', leavingChannel);
+                leavingChannel === null || leavingChannel === void 0 ? void 0 : leavingChannel.leave().then(function () {
+                    logger.info('ChannelSettings: Leaving channel successful!', leavingChannel);
+                    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(LeaveChannel, { channel: channel, onSubmit: function () {
+                setShowModal(false);
+                onLeaveChannel();
+            }, onCancel: function () { return setShowModal(false); } }))));
+}
+
+module.exports = ChannelPreviewAction;
+//# sourceMappingURL=ChannelPreviewAction.js.map

package/dist/cjs/ChannelList/context.js

@@ -0,0 +1,22 @@
+'use strict';
+
+require('../chunks/bundle-RmtoGD4w.js');
+require('react');
+require('@sendbird/chat/groupChannel');
+var ChannelList_context = require('../chunks/bundle-EXbRHVSB.js');
+require('../chunks/bundle-2B2B2GGi.js');
+require('../chunks/bundle-3WvVLPrn.js');
+require('../chunks/bundle-98hUmAMo.js');
+require('../chunks/bundle-O5wLOxN7.js');
+require('../useSendbirdStateContext.js');
+require('../chunks/bundle-NyrRrrQE.js');
+require('../chunks/bundle--sK1aluY.js');
+require('../chunks/bundle-CDhpLgdo.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../withSendbird.js');
+
+
+
+exports.ChannelListProvider = ChannelList_context.ChannelListProvider;
+exports.useChannelListContext = ChannelList_context.useChannelListContext;
+//# sourceMappingURL=context.js.map