@sendbird/uikit-react 3.9.1-rc-2 → 3.9.1

package/cjs/chunks/bundle-UuwNVlVV.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var React = require('react');
+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-GBjPe_zz.js');
+var LocalizationContext = require('./bundle-6JxglfHi.js');
+var consts = require('./bundle-noiyvZaq.js');
+
+/* eslint-disable no-redeclare */
+var VoiceMessageInputStatus = {
+    READY_TO_RECORD: 'READY_TO_RECORD',
+    RECORDING: 'RECORDING',
+    READY_TO_PLAY: 'READY_TO_PLAY',
+    PLAYING: 'PLAYING',
+};
+
+var ControlerIcon = function (_a) {
+    var inputState = _a.inputState;
+    switch (inputState) {
+        case VoiceMessageInputStatus.READY_TO_RECORD: {
+            return (React.createElement("div", { className: "sendbird-controler-icon record-icon" }));
+        }
+        case VoiceMessageInputStatus.RECORDING: {
+            return (React.createElement("div", { className: "sendbird-controler-icon stop-icon" }));
+        }
+        case VoiceMessageInputStatus.READY_TO_PLAY: {
+            return (React.createElement(ui_Icon.default, { className: "sendbird-controler-icon play-icon", width: "20px", height: "20px", type: ui_Icon.IconTypes.PLAY, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1 }));
+        }
+        case VoiceMessageInputStatus.PLAYING: {
+            return (React.createElement("div", { className: "sendbird-controler-icon pause-icon" },
+                React.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" }),
+                React.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" })));
+        }
+        default:
+            return null;
+    }
+};
+
+var VoiceMessageInput = function (_a) {
+    var _b = _a.minRecordTime, minRecordTime = _b === void 0 ? consts.VOICE_RECORDER_DEFAULT_MIN : _b, maximumValue = _a.maximumValue, _c = _a.currentValue, currentValue = _c === void 0 ? 0 : _c, currentType = _a.currentType, onCancelClick = _a.onCancelClick, onControlClick = _a.onControlClick, onSubmitClick = _a.onSubmitClick, renderCancelButton = _a.renderCancelButton, renderControlButton = _a.renderControlButton, renderSubmitButton = _a.renderSubmitButton;
+    var _d = React.useState(0), lastClickTime = _d[0], setLastClickTime = _d[1];
+    var isReadyToRecord = React.useMemo(function () { return currentType === VoiceMessageInputStatus.READY_TO_RECORD; }, [currentType]);
+    var isRecording = React.useMemo(function () { return currentType === VoiceMessageInputStatus.RECORDING; }, [currentType]);
+    var isSendButtonDisabled = React.useMemo(function () {
+        if (currentType === VoiceMessageInputStatus.READY_TO_RECORD
+            || currentType === VoiceMessageInputStatus.RECORDING) {
+            return minRecordTime > currentValue;
+        }
+        return false;
+    }, [currentType, minRecordTime, currentValue]);
+    var isPlayMode = React.useMemo(function () {
+        return (currentType === VoiceMessageInputStatus.READY_TO_PLAY
+            || currentType === VoiceMessageInputStatus.PLAYING);
+    }, [currentType]);
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var handleOnCancelClick = function () {
+        var currentTime = Date.now();
+        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
+            onCancelClick();
+            setLastClickTime(currentTime);
+        }
+    };
+    var handleOnControlClick = React.useCallback(function () {
+        var currentTime = Date.now();
+        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
+            onControlClick(currentType);
+            setLastClickTime(currentTime);
+        }
+    }, [currentType]);
+    var handleOnSubmitClick = function () {
+        var currentTime = Date.now();
+        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
+            if (!isSendButtonDisabled) {
+                onSubmitClick();
+            }
+            setLastClickTime(currentTime);
+        }
+    };
+    return (React.createElement("div", { className: "sendbird-voice-message-input" },
+        React.createElement("div", { className: "sendbird-voice-message-input__indicator" },
+            React.createElement("div", { className: "sendbird-voice-message-input__indicator__progress-bar" },
+                React.createElement(ui_ProgressBar.ProgressBar, { className: "sendbird-voice-message-input__indicator__progress-bar__bar", disabled: isReadyToRecord, maxSize: maximumValue, currentSize: currentValue })),
+            (isRecording) ? (React.createElement("div", { className: "sendbird-voice-message-input__indicator__on-rec" })) : null,
+            React.createElement(ui_PlaybackTime.PlaybackTime, { className: "sendbird-voice-message-input__indicator__playback-time", time: isPlayMode ? maximumValue - currentValue : currentValue, labelColor: isReadyToRecord ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONCONTENT_1 })),
+        React.createElement("div", { className: "sendbird-voice-message-input__controler" },
+            (renderCancelButton === null || renderCancelButton === void 0 ? void 0 : renderCancelButton()) || (React.createElement(ui_TextButton, { className: "sendbird-voice-message-input__controler__cancel", onClick: handleOnCancelClick, disableUnderline: true },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.PRIMARY }, stringSet.BUTTON__CANCEL))),
+            (renderControlButton === null || renderControlButton === void 0 ? void 0 : renderControlButton(currentType)) || (React.createElement("div", { className: "sendbird-voice-message-input__controler__main", onClick: handleOnControlClick },
+                React.createElement(ControlerIcon, { inputState: currentType }))),
+            (renderSubmitButton === null || renderSubmitButton === void 0 ? void 0 : renderSubmitButton()) || (React.createElement("div", { className: "sendbird-voice-message-input__controler__submit ".concat(isSendButtonDisabled ? 'voice-message--disabled' : ''), onClick: handleOnSubmitClick },
+                React.createElement(ui_Icon.default, { width: "19px", height: "19px", type: ui_Icon.IconTypes.SEND, fillColor: isSendButtonDisabled ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.CONTENT }))))));
+};
+
+exports.VoiceMessageInput = VoiceMessageInput;
+exports.VoiceMessageInputStatus = VoiceMessageInputStatus;
+//# sourceMappingURL=bundle-UuwNVlVV.js.map

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

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

package/cjs/chunks/bundle-Vk8BUCRm.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var index_module = require('./bundle-0Ja4l4WD.js');
+var tokenize = require('./bundle-h09WWCLD.js');
+var Message_context = require('../Message/context.js');
+var ui_MentionLabel = require('../ui/MentionLabel.js');
+var ui_LinkLabel = require('../ui/LinkLabel.js');
+var ui_Label = require('./bundle-GBjPe_zz.js');
+
+// this function is used to generate a unique key for token in message
+// it changes with updated time and index
+// messageUpdatedAt is the key part of this key generator
+function keyGenerator(createdAt, messageUpdatedAt, index) {
+    return "sb-msg_".concat(createdAt, "_").concat(messageUpdatedAt, "_").concat(index);
+}
+
+function TextFragment(_a) {
+    var tokens = _a.tokens;
+    var messageStore = Message_context.useMessageContext();
+    var message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
+    var isByMe = messageStore === null || messageStore === void 0 ? void 0 : messageStore.isByMe;
+    var updatedAt = message.updatedAt, createdAt = message.createdAt;
+    return (React.createElement(React.Fragment, null, tokens === null || tokens === void 0 ? void 0 : tokens.map(function (token, idx) {
+        var key = keyGenerator(createdAt, updatedAt, idx);
+        return index_module.K(token.type)
+            .with(tokenize.TOKEN_TYPES.mention, function () { return (React.createElement("span", { className: "sendbird-word", key: key },
+            React.createElement(ui_MentionLabel, { mentionTemplate: tokenize.USER_MENTION_PREFIX, 
+                // @ts-ignore
+                mentionedUserId: token.userId, mentionedUserNickname: token.value, isByMe: isByMe }))); })
+            .with(tokenize.TOKEN_TYPES.url, function () { return (React.createElement("span", { className: "sendbird-word", key: key },
+            React.createElement(ui_LinkLabel.default, { className: "sendbird-word__url", src: token.value, type: ui_Label.LabelTypography.BODY_1 }, token.value))); })
+            .otherwise(function () { return React.createElement(React.Fragment, { key: key }, tokenize.getWhiteSpacePreservedText(token.value)); });
+    })));
+}
+
+exports.TextFragment = TextFragment;
+//# sourceMappingURL=bundle-Vk8BUCRm.js.map

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

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

package/cjs/chunks/bundle-W4NFKk4o.js

@@ -0,0 +1,238 @@
+'use strict';
+
+var _tslib = require('./bundle-crXcinmk.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-GBjPe_zz.js');
+var LocalizationContext = require('./bundle-6JxglfHi.js');
+var UserProfileContext = require('./bundle-YOewBep4.js');
+require('./bundle-Xr9HRCcW.js');
+var ui_Avatar = require('./bundle-LOvxZyn6.js');
+require('react-dom');
+require('./bundle-Csb8JrWu.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-IJoXsg7h.js');
+var ui_UserListItem = require('../ui/UserListItem.js');
+var utils = require('./bundle-gEqE3TId.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+
+function ParticipantsModal(_a) {
+    var _b, _c, _d;
+    var onCancel = _a.onCancel;
+    var state = useSendbirdStateContext.useSendbirdStateContext();
+    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _e = React.useState([]), participants = _e[0], setParticipants = _e[1];
+    var _f = React.useState(null), participantListQuery = _f[0], setParticipantListQuery = _f[1];
+    var userId = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var sdk = (_d = (_c = state === null || state === void 0 ? void 0 : state.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
+    var isOperatorView = channel === null || channel === void 0 ? void 0 : channel.isOperator(userId);
+    React.useEffect(function () {
+        if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({});
+        setParticipantListQuery(participantListQuery);
+        participantListQuery.next().then(function (participantList) {
+            setParticipants(participantList);
+        });
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(ui_Modal.Modal, { hideFooter: true, isFullScreenOnMobile: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE },
+            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: function (e) {
+                    var hasNext = participantListQuery.hasNext;
+                    var target = e.target;
+                    var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
+                    if (hasNext && fetchMore) {
+                        participantListQuery.next().then(function (fetchedParticipants) {
+                            setParticipants(_tslib.__spreadArray(_tslib.__spreadArray([], participants, true), fetchedParticipants, true));
+                        });
+                    }
+                } }, participants.map(function (p) {
+                var _a;
+                var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+                return (React.createElement(ui_UserListItem, { user: p, key: p.userId, currentUser: (_a = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _a === void 0 ? void 0 : _a.userId, action: (userId !== p.userId && isOperatorView)
+                        ? function (_a) {
+                            var actionRef = _a.actionRef, parentRef = _a.parentRef;
+                            return (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: toggleDropdown },
+                                    React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentContainRef: parentRef, parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            if (isOperator) {
+                                                channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(function () {
+                                                    closeDropdown();
+                                                });
+                                            }
+                                            else {
+                                                channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(function () {
+                                                    closeDropdown();
+                                                });
+                                            }
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_".concat((isOperator) ? 'unregister_operator' : 'register_as_operator') }, isOperator
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            if (p.isMuted) {
+                                                channel === null || channel === void 0 ? void 0 : channel.unmuteUser(p).then(function () {
+                                                    closeDropdown();
+                                                });
+                                            }
+                                            else {
+                                                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(function () {
+                                                    closeDropdown();
+                                                });
+                                            }
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_".concat(p.isMuted ? 'unmute' : 'mute') }, p.isMuted
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
+                                                closeDropdown();
+                                            });
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_ban" }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))); } }));
+                        }
+                        : null }));
+            })))));
+}
+
+var UserListItem = function (_a) {
+    var user = _a.user, currentUser = _a.currentUser, isOperator = _a.isOperator, action = _a.action;
+    var avatarRef = React.useRef(null);
+    var actionRef = React.useRef(null);
+    var _b = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _b.disableUserProfile, renderUserProfile = _b.renderUserProfile;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: "sendbird-participants-accordion__member" },
+        React.createElement("div", { className: "sendbird-participants-accordion__member-avatar" },
+            React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(React.Fragment, null,
+                    React.createElement(ui_Avatar.Avatar, { className: "sendbird-participants-accordion__member-avatar__avatar", onClick: function () {
+                            if (!disableUserProfile) {
+                                toggleDropdown();
+                            }
+                        }, ref: avatarRef, src: user.profileUrl, width: 24, height: 24 }),
+                    (user === null || user === void 0 ? void 0 : user.isMuted) ? (React.createElement(ui_MutedAvatarOverlay, null)) : '')); }, menuItems: function (closeDropdown) { return (renderUserProfile
+                    ? renderUserProfile({
+                        user: user,
+                        currentUserId: currentUser,
+                        close: closeDropdown,
+                        avatarRef: avatarRef,
+                    })
+                    : (React.createElement(ui_ContextMenu.MenuItems, { openLeft: true, parentRef: avatarRef, 
+                        // for catching location(x, y) of MenuItems
+                        parentContainRef: avatarRef, 
+                        // for toggling more options(menus & reactions)
+                        closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } },
+                        React.createElement(ui_UserProfile, { disableMessaging: true, user: user, currentUserId: currentUser, onSuccess: closeDropdown })))); } })),
+        React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 },
+            user.nickname || stringSet.NO_NAME,
+            (currentUser === user.userId) && (stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__YOU)),
+        !user.nickname && (React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title user-id", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, user.userId)),
+        isOperator && (React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title\n                ".concat((user === null || user === void 0 ? void 0 : user.userId) !== currentUser ? 'operator' : '', "\n                ").concat((user === null || user === void 0 ? void 0 : user.userId) === currentUser ? 'self-operator' : '', "\n              "), type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__OPERATOR)),
+        action && (React.createElement("div", { className: "sendbird-participants-accordion__member__action", ref: actionRef }, action({ actionRef: actionRef })))));
+};
+
+function ParticipantList(_a) {
+    var _b;
+    var _c = _a.isOperatorView, isOperatorView = _c === void 0 ? false : _c;
+    var globalState = useSendbirdStateContext.useSendbirdStateContext();
+    var currentUserId = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _d = React.useState(null), participants = _d[0], setParticipants = _d[1];
+    var _e = React.useState(null), participantListQuery = _e[0], setParticipantListQuery = _e[1];
+    var _f = React.useState(false), showParticipantsModal = _f[0], setShowParticipantsModal = _f[1];
+    React.useEffect(function () {
+        if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({ limit: 10 });
+        setParticipantListQuery(participantListQuery);
+        participantListQuery.next().then(function (participants) {
+            setParticipants(participants);
+        });
+    }, [channel]);
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setParticipants([]);
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({ limit: 10 });
+        participantListQuery.next().then(function (participants) {
+            setParticipants(participants);
+        });
+    }, [channel]);
+    return (React.createElement("div", { className: "sendbird-openchannel-settings__participant-list", onScroll: function (e) {
+            var hasNext = participantListQuery.hasNext;
+            var target = e.target;
+            var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
+            if (hasNext && fetchMore) {
+                participantListQuery.next().then(function (fetchedParticipants) {
+                    setParticipants(_tslib.__spreadArray(_tslib.__spreadArray([], participants, true), fetchedParticipants, true));
+                });
+            }
+        } },
+        React.createElement("div", null, participants === null || participants === void 0 ? void 0 :
+            participants.map(function (p) {
+                var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+                return (React.createElement(UserListItem, { user: p, currentUser: currentUserId, key: p.userId, isOperator: isOperator, action: function (_a) {
+                        var actionRef = _a.actionRef;
+                        return ((isOperatorView && currentUserId !== (p === null || p === void 0 ? void 0 : p.userId))
+                            ? (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-openchannel-participant-list__menu", width: "32px", height: "32px", onClick: toggleDropdown },
+                                    React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            if (isOperator) {
+                                                channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(function () {
+                                                    closeDropdown();
+                                                    refreshList();
+                                                });
+                                            }
+                                            else {
+                                                channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(function () {
+                                                    closeDropdown();
+                                                    refreshList();
+                                                });
+                                            }
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_".concat((isOperator) ? 'unregister_operator' : 'register_as_operator') }, isOperator
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            if (p.isMuted) {
+                                                channel === null || channel === void 0 ? void 0 : channel.unmuteUser(p).then(function () {
+                                                    closeDropdown();
+                                                    refreshList();
+                                                });
+                                            }
+                                            else {
+                                                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(function () {
+                                                    closeDropdown();
+                                                    refreshList();
+                                                });
+                                            }
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_".concat(p.isMuted ? 'unmute' : 'mute') }, p.isMuted
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
+                                                closeDropdown();
+                                                refreshList();
+                                            });
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_ban" }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))); } }))
+                            : null);
+                    } }));
+            }),
+            (participants && participants.length === 0)
+                ? (React.createElement(ui_Label.Label, { className: "sendbird-channel-settings__empty-list", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST)) : null,
+            React.createElement("div", { className: "sendbird-openchannel-participant-list__footer" }, (participantListQuery === null || participantListQuery === void 0 ? void 0 : participantListQuery.hasNext) && (React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowParticipantsModal(true); } }, stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE))),
+            showParticipantsModal && (React.createElement(ParticipantsModal, { onCancel: function () {
+                    setShowParticipantsModal(false);
+                    refreshList();
+                } })))));
+}
+
+exports.ParticipantList = ParticipantList;
+exports.UserListItem = UserListItem;
+//# sourceMappingURL=bundle-W4NFKk4o.js.map

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

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

package/cjs/chunks/bundle-Xr9HRCcW.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var utils = require('./bundle-gEqE3TId.js');
+
+var Context = React.createContext({
+    opened: '',
+    setOpened: utils.noop,
+});
+var Consumer = Context.Consumer;
+var Provider = Context.Provider;
+
+exports.Consumer = Consumer;
+exports.Provider = Provider;
+//# sourceMappingURL=bundle-Xr9HRCcW.js.map

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

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

package/cjs/chunks/bundle-YOewBep4.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * user profile goes deep inside the component tree
+ * use this context as a short circuit to send in values
+ */
+var UserProfileContext = React.createContext({
+    disableUserProfile: true,
+    isOpenChannel: false,
+    renderUserProfile: null,
+    onUserProfileMessage: null,
+});
+var UserProfileProvider = function (_a) {
+    var _b = _a.isOpenChannel, isOpenChannel = _b === void 0 ? false : _b, _c = _a.disableUserProfile, disableUserProfile = _c === void 0 ? false : _c, _d = _a.renderUserProfile, renderUserProfile = _d === void 0 ? null : _d, _e = _a.onUserProfileMessage, onUserProfileMessage = _e === void 0 ? null : _e, children = _a.children;
+    return (React.createElement(UserProfileContext.Provider, { value: {
+            isOpenChannel: isOpenChannel,
+            disableUserProfile: disableUserProfile,
+            renderUserProfile: renderUserProfile,
+            onUserProfileMessage: onUserProfileMessage,
+        } }, children));
+};
+
+exports.UserProfileContext = UserProfileContext;
+exports.UserProfileProvider = UserProfileProvider;
+//# sourceMappingURL=bundle-YOewBep4.js.map

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

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

package/cjs/chunks/bundle-_0eKxSxF.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var _tslib = require('./bundle-crXcinmk.js');
+var React = require('react');
+var index$1 = require('./bundle-Epp2z49V.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Label = require('./bundle-GBjPe_zz.js');
+var ui_Loader = require('../ui/Loader.js');
+var index$2 = require('./bundle-rXNfPqQR.js');
+var utils_message_getOutgoingMessageState = require('../utils/message/getOutgoingMessageState.js');
+var index = require('./bundle-LasQs8iu.js');
+var LocalizationContext = require('./bundle-6JxglfHi.js');
+
+var getChannelTitle = function (channel, currentUserId, stringSet) {
+    var _a;
+    if (stringSet === void 0) { stringSet = ui_Label.LabelStringSet; }
+    if (!(channel === null || channel === void 0 ? void 0 : channel.name) && !(channel === null || channel === void 0 ? void 0 : channel.members)) {
+        return stringSet.NO_TITLE;
+    }
+    if ((channel === null || channel === void 0 ? void 0 : channel.name) && channel.name !== 'Group Channel') {
+        return channel.name;
+    }
+    if (((_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+        return stringSet.NO_MEMBERS;
+    }
+    return ((channel === null || channel === void 0 ? void 0 : channel.members) || [])
+        .filter(function (_a) {
+        var userId = _a.userId;
+        return userId !== currentUserId;
+    })
+        .map(function (_a) {
+        var nickname = _a.nickname;
+        return nickname || stringSet.NO_NAME;
+    })
+        .join(', ');
+};
+var getLastMessageCreatedAt = function (_a) {
+    var _b;
+    var channel = _a.channel, locale = _a.locale, _c = _a.stringSet, stringSet = _c === void 0 ? ui_Label.LabelStringSet : _c;
+    var createdAt = (_b = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _b === void 0 ? void 0 : _b.createdAt;
+    var optionalParam = locale ? { locale: locale } : null;
+    if (!createdAt) {
+        return '';
+    }
+    if (index.isToday(createdAt)) {
+        return index$1.format(createdAt, 'p', optionalParam);
+    }
+    if (index.isYesterday(createdAt)) {
+        return stringSet.MESSAGE_STATUS__YESTERDAY || 'Yesterday';
+    }
+    if (index.isThisYear(createdAt)) {
+        return index$1.format(createdAt, 'MMM d', optionalParam);
+    }
+    return index$1.format(createdAt, 'yyyy/M/d', optionalParam);
+};
+var getTotalMembers = function (channel) { return ((channel === null || channel === void 0 ? void 0 : channel.memberCount) ? channel.memberCount : 0); };
+var getChannelPreviewFileDisplayString = function (mimeType, stringSet) {
+    var _a, _b, _c, _d, _e, _f;
+    if (stringSet === void 0) { stringSet = ui_Label.LabelStringSet; }
+    if (index$2.isGif(mimeType)) {
+        return (_a = stringSet === null || stringSet === void 0 ? void 0 : stringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_GIF) !== null && _a !== void 0 ? _a : '';
+    }
+    if (index$2.isImage(mimeType)) {
+        return (_b = stringSet === null || stringSet === void 0 ? void 0 : stringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_PHOTO) !== null && _b !== void 0 ? _b : '';
+    }
+    if (index$2.isVideo(mimeType)) {
+        return (_c = stringSet === null || stringSet === void 0 ? void 0 : stringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_VIDEO) !== null && _c !== void 0 ? _c : '';
+    }
+    if (index$2.isAudio(mimeType)) {
+        return (_d = stringSet === null || stringSet === void 0 ? void 0 : stringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_AUDIO) !== null && _d !== void 0 ? _d : '';
+    }
+    if (index$2.isVoiceMessageMimeType(mimeType)) {
+        return (_e = stringSet === null || stringSet === void 0 ? void 0 : stringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_VOICE_MESSAGE) !== null && _e !== void 0 ? _e : '';
+    }
+    return (_f = stringSet === null || stringSet === void 0 ? void 0 : stringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_GENERAL) !== null && _f !== void 0 ? _f : '';
+};
+var getPrettyLastMessage = function (message, stringSet) {
+    var _a, _b, _c, _d;
+    if (message === void 0) { message = null; }
+    if (stringSet === void 0) { stringSet = ui_Label.LabelStringSet; }
+    if (!message)
+        return '';
+    if (message.isFileMessage()) {
+        return getChannelPreviewFileDisplayString(message.type, stringSet);
+    }
+    if (message.isMultipleFilesMessage()) {
+        var mimeType = (_b = (_a = message.fileInfoList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.mimeType;
+        if (index$2.isImage(mimeType) || index$2.isGif(mimeType)) {
+            return (_c = stringSet === null || stringSet === void 0 ? void 0 : stringSet.CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_PHOTO) !== null && _c !== void 0 ? _c : '';
+        }
+        return getChannelPreviewFileDisplayString(mimeType, stringSet);
+    }
+    return (_d = message.message) !== null && _d !== void 0 ? _d : '';
+};
+var getLastMessage = function (channel, stringSet) {
+    if (stringSet === void 0) { stringSet = ui_Label.LabelStringSet; }
+    return (channel === null || channel === void 0 ? void 0 : channel.lastMessage) ? getPrettyLastMessage(channel === null || channel === void 0 ? void 0 : channel.lastMessage, stringSet) : '';
+};
+var getChannelUnreadMessageCount = function (channel) { return (channel === null || channel === void 0 ? void 0 : channel.unreadMessageCount) ? channel.unreadMessageCount : 0; };
+
+var MessageStatusTypes = utils_message_getOutgoingMessageState.OutgoingMessageStates;
+function MessageStatus(_a) {
+    var _b, _c;
+    var _d;
+    var className = _a.className, message = _a.message, channel = _a.channel, _e = _a.isDateSeparatorConsidered, isDateSeparatorConsidered = _e === void 0 ? true : _e;
+    var _f = LocalizationContext.useLocalization(), stringSet = _f.stringSet, dateLocale = _f.dateLocale;
+    var status = utils_message_getOutgoingMessageState.getOutgoingMessageState(channel, message);
+    var hideMessageStatusIcon = ((_d = channel === null || channel === void 0 ? void 0 : channel.isGroupChannel) === null || _d === void 0 ? void 0 : _d.call(channel)) && ((channel.isSuper || channel.isPublic || channel.isBroadcast)
+        && !(status === utils_message_getOutgoingMessageState.OutgoingMessageStates.PENDING || status === utils_message_getOutgoingMessageState.OutgoingMessageStates.FAILED));
+    var iconType = (_b = {},
+        _b[utils_message_getOutgoingMessageState.OutgoingMessageStates.SENT] = ui_Icon.IconTypes.DONE,
+        _b[utils_message_getOutgoingMessageState.OutgoingMessageStates.DELIVERED] = ui_Icon.IconTypes.DONE_ALL,
+        _b[utils_message_getOutgoingMessageState.OutgoingMessageStates.READ] = ui_Icon.IconTypes.DONE_ALL,
+        _b[utils_message_getOutgoingMessageState.OutgoingMessageStates.FAILED] = ui_Icon.IconTypes.ERROR,
+        _b);
+    var iconColor = (_c = {},
+        _c[utils_message_getOutgoingMessageState.OutgoingMessageStates.SENT] = ui_Icon.IconColors.SENT,
+        _c[utils_message_getOutgoingMessageState.OutgoingMessageStates.DELIVERED] = ui_Icon.IconColors.SENT,
+        _c[utils_message_getOutgoingMessageState.OutgoingMessageStates.READ] = ui_Icon.IconColors.READ,
+        _c[utils_message_getOutgoingMessageState.OutgoingMessageStates.FAILED] = ui_Icon.IconColors.ERROR,
+        _c);
+    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-message-status',
+        ], false).join(' ') },
+        (status === utils_message_getOutgoingMessageState.OutgoingMessageStates.PENDING) ? (React.createElement(ui_Loader, { className: "sendbird-message-status__icon", width: "16px", height: "16px" },
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SPINNER, fillColor: ui_Icon.IconColors.PRIMARY, width: "16px", height: "16px" }))) : (React.createElement(ui_Icon.default, { className: "sendbird-message-status__icon ".concat(hideMessageStatusIcon ? 'hide-icon' : '', " ").concat(status === utils_message_getOutgoingMessageState.OutgoingMessageStates.FAILED ? '' : 'sendbird-message-status--sent'), type: iconType[status] || ui_Icon.IconTypes.ERROR, fillColor: iconColor[status], width: "16px", height: "16px" })),
+        index$2.isSentStatus(status) && (React.createElement(ui_Label.Label, { className: "sendbird-message-status__text", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, isDateSeparatorConsidered
+            ? index$1.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', { locale: dateLocale })
+            : getLastMessageCreatedAt({ channel: channel, locale: dateLocale, stringSet: stringSet })))));
+}
+
+exports.MessageStatus = MessageStatus;
+exports.MessageStatusTypes = MessageStatusTypes;
+exports.getChannelTitle = getChannelTitle;
+exports.getChannelUnreadMessageCount = getChannelUnreadMessageCount;
+exports.getLastMessage = getLastMessage;
+exports.getLastMessageCreatedAt = getLastMessageCreatedAt;
+exports.getTotalMembers = getTotalMembers;
+//# sourceMappingURL=bundle-_0eKxSxF.js.map

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

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