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

package/cjs/chunks/{bundle-VogwjxgI.js → bundle--A9iQL7y.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var pubSub_topics = require('./bundle-135pRm7i.js');
+var pubSub_topics = require('./bundle-77qvrXp8.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var _tslib = require('./bundle-bXLZZTmP.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
 
 exports.OpenChannelListFetchingStatus = void 0;
 (function (OpenChannelListFetchingStatus) {
@@ -357,4 +357,4 @@ exports.OpenChannelListActionTypes = OpenChannelListActionTypes$1;
 exports.OpenChannelListProvider = OpenChannelListProvider;
 exports.OpenChannelListProvider$1 = OpenChannelListProvider$1;
 exports.useOpenChannelListContext = useOpenChannelListContext;
-//# sourceMappingURL=bundle-VogwjxgI.js.map
+//# sourceMappingURL=bundle--A9iQL7y.js.map

package/cjs/chunks/{bundle-VogwjxgI.js.map → bundle--A9iQL7y.js.map}

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

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

@@ -0,0 +1,183 @@
+'use strict';
+
+var React = require('react');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Avatar = require('./bundle-w0ATt2gt.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var uuid = require('./bundle-TB_UEIPg.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var _const = require('./bundle--tki3Ejh.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
+
+var MAX_USER_MENTION_COUNT = 10;
+var MAX_USER_SUGGESTION_COUNT = 15;
+var USER_MENTION_TEMP_CHAR = '@';
+var ThreadReplySelectType;
+(function (ThreadReplySelectType) {
+    ThreadReplySelectType["PARENT"] = "PARENT";
+    ThreadReplySelectType["THREAD"] = "THREAD";
+})(ThreadReplySelectType || (ThreadReplySelectType = {}));
+
+function SuggestedUserMentionItem(props) {
+    var member = props.member, _a = props.isFocused, isFocused = _a === void 0 ? false : _a, parentScrollRef = props.parentScrollRef, onClick = props.onClick, onMouseOver = props.onMouseOver, onMouseMove = props.onMouseMove, renderUserMentionItem = props.renderUserMentionItem;
+    var scrollRef = React.useRef(null);
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    React.useEffect(function () {
+        if (isFocused && (parentScrollRef === null || parentScrollRef === void 0 ? void 0 : parentScrollRef.current) != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) != null
+            && (parentScrollRef.current.scrollTop >= scrollRef.current.offsetTop
+                || parentScrollRef.current.scrollTop + parentScrollRef.current.clientHeight <= scrollRef.current.offsetTop)) {
+            scrollRef.current.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+    }, [isFocused]);
+    var customMentionItem = React.useMemo(function () {
+        if (renderUserMentionItem) {
+            return (React.createElement("div", { className: "sendbird-mention-suggest-list__user-item", onClick: function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick({ event: event, member: member, itemRef: scrollRef }); }, onMouseOver: function (event) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver({ event: event, member: member, itemRef: scrollRef }); }, onMouseMove: function (event) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove({ event: event, member: member, itemRef: scrollRef }); }, key: (member === null || member === void 0 ? void 0 : member.userId) || uuid.uuidv4(), ref: scrollRef }, renderUserMentionItem({ user: member })));
+        }
+    }, [renderUserMentionItem]);
+    if (customMentionItem) {
+        return customMentionItem;
+    }
+    return (React.createElement("div", { className: "sendbird-mention-suggest-list__user-item ".concat(isFocused ? 'focused' : ''), onClick: function (event) { return onClick === null || onClick === void 0 ? void 0 : onClick({ event: event, member: member, itemRef: scrollRef }); }, onMouseOver: function (event) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver({ event: event, member: member, itemRef: scrollRef }); }, onMouseMove: function (event) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove({ event: event, member: member, itemRef: scrollRef }); }, key: (member === null || member === void 0 ? void 0 : member.userId) || uuid.uuidv4(), ref: scrollRef },
+        React.createElement(ui_Avatar.Avatar, { className: "sendbird-mention-suggest-list__user-item__avatar", src: member === null || member === void 0 ? void 0 : member.profileUrl, alt: "user-profile", width: "24px", height: "24px" }),
+        React.createElement(ui_Label.Label, { className: "sendbird-mention-suggest-list__user-item__nickname", type: ui_Label.LabelTypography.SUBTITLE_2, color: (member === null || member === void 0 ? void 0 : member.nickname) ? ui_Label.LabelColors.ONBACKGROUND_1 : ui_Label.LabelColors.ONBACKGROUND_3 }, (member === null || member === void 0 ? void 0 : member.nickname) || (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MENTION_NAME__NO_NAME)),
+        React.createElement(ui_Label.Label, { className: "sendbird-mention-suggest-list__user-item__user-id", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, member === null || member === void 0 ? void 0 : member.userId)));
+}
+
+function fetchMembersFromChannel(currentUserId, channel, maxSuggestionCount, searchString) {
+    return _tslib.__awaiter(this, void 0, void 0, function () {
+        return _tslib.__generator(this, function (_a) {
+            return [2 /*return*/, channel.members
+                    .sort(function (a, b) { var _a; return (_a = a.nickname) === null || _a === void 0 ? void 0 : _a.localeCompare(b.nickname); })
+                    .filter(function (member) {
+                    var _a;
+                    return ((_a = member.nickname) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(searchString.toLowerCase()))
+                        && member.userId !== currentUserId
+                        && member.isActive;
+                }).slice(0, maxSuggestionCount)];
+        });
+    });
+}
+function fetchMembersFromQuery(currentUserId, channel, maxSuggestionCount, searchString) {
+    return _tslib.__awaiter(this, void 0, void 0, function () {
+        var query;
+        return _tslib.__generator(this, function (_a) {
+            query = channel.createMemberListQuery({
+                limit: maxSuggestionCount + 1,
+                nicknameStartsWithFilter: searchString,
+            });
+            return [2 /*return*/, query.next()
+                    .then(function (memberList) {
+                    return memberList
+                        .filter(function (member) { return currentUserId !== (member === null || member === void 0 ? void 0 : member.userId); })
+                        .slice(0, maxSuggestionCount);
+                })];
+        });
+    });
+}
+
+var DEBOUNCING_TIME = 300;
+var SuggestedMentionListView = function (props) {
+    var _a, _b, _c;
+    var className = props.className, currentChannel = props.currentChannel, _d = props.targetNickname, targetNickname = _d === void 0 ? '' : _d, 
+    // memberListQuery,
+    onUserItemClick = props.onUserItemClick, onFocusItemChange = props.onFocusItemChange, onFetchUsers = props.onFetchUsers, renderUserMentionItem = props.renderUserMentionItem, inputEvent = props.inputEvent, _e = props.ableAddMention, ableAddMention = _e === void 0 ? true : _e, _f = props.maxMentionCount, maxMentionCount = _f === void 0 ? MAX_USER_MENTION_COUNT : _f, _g = props.maxSuggestionCount, maxSuggestionCount = _g === void 0 ? MAX_USER_SUGGESTION_COUNT : _g;
+    var _h = useSendbirdStateContext.useSendbirdStateContext(), config = _h.config, stores = _h.stores;
+    var logger = config.logger;
+    var currentUserId = ((_c = (_b = (_a = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _a === void 0 ? void 0 : _a.sdk) === null || _b === void 0 ? void 0 : _b.currentUser) === null || _c === void 0 ? void 0 : _c.userId) || '';
+    var scrollRef = React.useRef(null);
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var _j = React.useState(null), timer = _j[0], setTimer = _j[1];
+    var _k = React.useState(''), searchString = _k[0], setSearchString = _k[1];
+    var _l = React.useState(''), lastSearchString = _l[0], setLastSearchString = _l[1];
+    var _m = React.useState(null), currentFocusedMember = _m[0], setCurrentFocusedMember = _m[1];
+    var _o = React.useState([]), currentMemberList = _o[0], setCurrentMemberList = _o[1];
+    React.useEffect(function () {
+        clearTimeout(timer);
+        setTimer(setTimeout(function () {
+            setSearchString(targetNickname);
+        }, DEBOUNCING_TIME));
+    }, [targetNickname]);
+    React.useEffect(function () {
+        if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === _const.MessageInputKeys.Enter) {
+            if (currentMemberList.length > 0) {
+                onUserItemClick(currentFocusedMember);
+            }
+        }
+        if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === _const.MessageInputKeys.ArrowUp) {
+            var currentUserIndex = currentMemberList.findIndex(function (member) { return (member === null || member === void 0 ? void 0 : member.userId) === (currentFocusedMember === null || currentFocusedMember === void 0 ? void 0 : currentFocusedMember.userId); });
+            if (0 < currentUserIndex) {
+                setCurrentFocusedMember(currentMemberList[currentUserIndex - 1]);
+                onFocusItemChange(currentMemberList[currentUserIndex - 1]);
+            }
+        }
+        if ((inputEvent === null || inputEvent === void 0 ? void 0 : inputEvent.key) === _const.MessageInputKeys.ArrowDown) {
+            var currentUserIndex = currentMemberList.findIndex(function (member) { return (member === null || member === void 0 ? void 0 : member.userId) === (currentFocusedMember === null || currentFocusedMember === void 0 ? void 0 : currentFocusedMember.userId); });
+            if (currentUserIndex < currentMemberList.length - 1) {
+                setCurrentFocusedMember(currentMemberList[currentUserIndex + 1]);
+                onFocusItemChange(currentMemberList[currentUserIndex + 1]);
+            }
+        }
+    }, [inputEvent]);
+    React.useEffect(function () {
+        if (lastSearchString && searchString.indexOf(lastSearchString) === 0 && currentMemberList.length === 0) {
+            // Don't need to request query again
+            return;
+        }
+        if (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isSuper) {
+            if (!(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.createMemberListQuery)) {
+                logger.warning('SuggestedMentionList: Creating member list query failed');
+                return;
+            }
+        }
+        var fetcher = (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isSuper) ? fetchMembersFromQuery : fetchMembersFromChannel;
+        fetcher(currentUserId, currentChannel, maxSuggestionCount, searchString.slice(USER_MENTION_TEMP_CHAR.length))
+            .then(function (suggestingMembers) {
+            if (suggestingMembers.length < 1) {
+                logger.info('SuggestedMentionList: Fetched member list is empty');
+            }
+            else {
+                logger.info('SuggestedMentionList: Fetching member list succeeded', { memberList: suggestingMembers });
+                setCurrentFocusedMember(suggestingMembers[0]);
+            }
+            setLastSearchString(searchString);
+            onFetchUsers(suggestingMembers);
+            setCurrentMemberList(suggestingMembers);
+        })
+            .catch(function (error) {
+            if (error) {
+                logger.error('SuggestedMentionList: Fetching member list failed', error);
+            }
+        });
+    }, [
+        currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
+        // We have to be specific like this or React would not recognize the changes in instances.
+        currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members.map(function (member) { return member.nickname; }).join(),
+        currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members.map(function (member) { return member.isActive; }).join(),
+        searchString,
+        maxSuggestionCount,
+        currentUserId,
+        currentMemberList.length,
+        lastSearchString,
+    ]);
+    if (!ableAddMention && currentMemberList.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "sendbird-mention-suggest-list ".concat(className), key: "sendbird-mention-suggest-list", ref: scrollRef },
+        ableAddMention
+            && (currentMemberList === null || currentMemberList === void 0 ? void 0 : currentMemberList.map(function (member) { return (React.createElement(SuggestedUserMentionItem, { key: (member === null || member === void 0 ? void 0 : member.userId) || uuid.uuidv4(), member: member, isFocused: (member === null || member === void 0 ? void 0 : member.userId) === (currentFocusedMember === null || currentFocusedMember === void 0 ? void 0 : currentFocusedMember.userId), parentScrollRef: scrollRef, onClick: function (_a) {
+                    var member = _a.member;
+                    onUserItemClick(member);
+                }, onMouseOver: function (_a) {
+                    var member = _a.member;
+                    setCurrentFocusedMember(member);
+                }, renderUserMentionItem: renderUserMentionItem })); })),
+        !ableAddMention && (React.createElement("div", { className: "sendbird-mention-suggest-list__notice-item" },
+            React.createElement(ui_Icon.default, { className: "sendbird-mention-suggest-list__notice-item__icon", type: ui_Icon.IconTypes.INFO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "20px", height: "20px" }),
+            React.createElement(ui_Label.Label, { className: "sendbird-mention-suggest-list__notice-item__text", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.MENTION_COUNT__OVER_LIMIT.replace('%d', String(maxMentionCount)))))));
+};
+
+exports.MAX_USER_MENTION_COUNT = MAX_USER_MENTION_COUNT;
+exports.MAX_USER_SUGGESTION_COUNT = MAX_USER_SUGGESTION_COUNT;
+exports.SuggestedMentionListView = SuggestedMentionListView;
+//# sourceMappingURL=bundle--QPuGnli.js.map

package/{chunks/bundle-ucXG1Py7.js.map → cjs/chunks/bundle--QPuGnli.js.map}

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

package/cjs/chunks/bundle--t85OO-4.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var _tslib = require('./bundle-DhtZdKsr.js');
+var React = require('react');
+var ui_Modal = require('./bundle-6L4HCLmb.js');
+require('./bundle-VxcYXhwp.js');
+var ui_Button = require('../ui/Button.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var stringFormatterUtils = require('./bundle-wZDX1pVR.js');
+var Channel_context = require('../Channel/context.js');
+
+var RemoveMessageModalView = function (props) {
+    var _a;
+    var _b = props.onSubmit, onSubmit = _b === void 0 ? function () {
+        /* noop */
+    } : _b, onCancel = props.onCancel, message = props.message, deleteMessage = props.deleteMessage;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement(ui_Modal.Modal, { type: ui_Button.ButtonTypes.DANGER, disabled: ((_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) > 0, onCancel: onCancel, onSubmit: function () {
+            if (message.isUserMessage() || message.isFileMessage() || message.isMultipleFilesMessage()) {
+                deleteMessage(message).then(function () {
+                    // For other status such as PENDING, SCHEDULED, and CANCELED,
+                    // invalid parameters error is thrown so nothing happens.
+                    onSubmit();
+                    onCancel();
+                });
+            }
+        }, submitText: stringSet.MESSAGE_MENU__DELETE, titleText: stringFormatterUtils.getModalDeleteMessageTitle(stringSet, message) }));
+};
+
+var RemoveMessageModal = function (props) {
+    var deleteMessage = Channel_context.useChannelContext().deleteMessage;
+    return React.createElement(RemoveMessageModalView, _tslib.__assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+exports.RemoveMessageModal = RemoveMessageModal;
+exports.RemoveMessageModalView = RemoveMessageModalView;
+//# sourceMappingURL=bundle--t85OO-4.js.map

package/cjs/chunks/bundle--t85OO-4.js.map

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

package/cjs/chunks/{bundle-zgoic8x9.js → bundle--tki3Ejh.js}

@@ -19,4 +19,4 @@ var NodeNames = {
 exports.MessageInputKeys = MessageInputKeys;
 exports.NodeNames = NodeNames;
 exports.NodeTypes = NodeTypes;
-//# sourceMappingURL=bundle-zgoic8x9.js.map
+//# sourceMappingURL=bundle--tki3Ejh.js.map

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

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

package/cjs/chunks/{bundle-OVfymd1y.js → bundle-0zagc7hR.js}

@@ -3,4 +3,4 @@
 var OG_MESSAGE_BODY_CLASSNAME = 'sendbird-og-message-item-body__text-bubble';
 
 exports.OG_MESSAGE_BODY_CLASSNAME = OG_MESSAGE_BODY_CLASSNAME;
-//# sourceMappingURL=bundle-OVfymd1y.js.map
+//# sourceMappingURL=bundle-0zagc7hR.js.map

package/cjs/chunks/bundle-0zagc7hR.js.map

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

package/cjs/chunks/{bundle-1dUHK2qC.js → bundle-1dcvUZjP.js}

@@ -27,4 +27,4 @@ var copyToClipboard = function (text) {
 };
 
 exports.copyToClipboard = copyToClipboard;
-//# sourceMappingURL=bundle-1dUHK2qC.js.map
+//# sourceMappingURL=bundle-1dcvUZjP.js.map

package/cjs/chunks/bundle-1dcvUZjP.js.map

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

package/cjs/chunks/bundle-1tu4OFP8.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('./bundle-6SzyBwQ5.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-6L4HCLmb.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-1tu4OFP8.js.map

package/cjs/chunks/bundle-1tu4OFP8.js.map

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

package/cjs/chunks/{bundle-TFo3Eb8z.js → bundle-2hJhRu5W.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('./bundle-bXLZZTmP.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
 var React = require('react');
-var MediaQueryContext = require('./bundle-WzrocC57.js');
+var MediaQueryContext = require('./bundle-6zBNmPOP.js');
 
 var DEFAULT_DURATION = 300;
 function preventDefault(e) {
@@ -76,4 +76,4 @@ function useLongPress(_a, _b) {
 }
 
 exports.useLongPress = useLongPress;
-//# sourceMappingURL=bundle-TFo3Eb8z.js.map
+//# sourceMappingURL=bundle-2hJhRu5W.js.map

package/cjs/chunks/bundle-2hJhRu5W.js.map

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

package/cjs/chunks/{bundle-TxdziCwH.js → bundle-3_XFLnnt.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var React = require('react');
-var index = require('./bundle-65IwoStx.js');
-var tokenize = require('./bundle-9iE0HY96.js');
+var index = require('./bundle-xM2DAzE6.js');
+var tokenize = require('./bundle-haAptps1.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-7J3nX_hP.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
 
 // this function is used to generate a unique key for token in message
 // it changes with updated time and index
@@ -35,4 +35,4 @@ function TextFragment(_a) {
 }
 
 exports.TextFragment = TextFragment;
-//# sourceMappingURL=bundle-TxdziCwH.js.map
+//# sourceMappingURL=bundle-3_XFLnnt.js.map

package/cjs/chunks/bundle-3_XFLnnt.js.map

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

package/cjs/chunks/bundle-3eaFVTUX.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+
+var LOG_PRESET = 'useToggleReactionCallback:';
+function useToggleReactionCallback(currentChannel, logger) {
+    return React.useCallback(function (message, key, isReacted) {
+        if (!currentChannel) {
+            logger.warning("".concat(LOG_PRESET, " currentChannel doesn't exist"), currentChannel);
+            return;
+        }
+        if (isReacted) {
+            currentChannel
+                .deleteReaction(message, key)
+                .then(function (res) {
+                logger.info("".concat(LOG_PRESET, " Delete reaction success"), res);
+            })
+                .catch(function (err) {
+                logger.warning("".concat(LOG_PRESET, " Delete reaction failed"), err);
+            });
+        }
+        else {
+            currentChannel
+                .addReaction(message, key)
+                .then(function (res) {
+                logger.info("".concat(LOG_PRESET, " Add reaction success"), res);
+            })
+                .catch(function (err) {
+                logger.warning("".concat(LOG_PRESET, " Add reaction failed"), err);
+            });
+        }
+    }, [currentChannel]);
+}
+
+exports.useToggleReactionCallback = useToggleReactionCallback;
+//# sourceMappingURL=bundle-3eaFVTUX.js.map

package/cjs/chunks/bundle-3eaFVTUX.js.map

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

package/cjs/chunks/bundle-5UyAossc.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var groupChannel = require('@sendbird/chat/groupChannel');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var uuid = require('./bundle-TB_UEIPg.js');
+
+var TypingIndicatorText = function (_a) {
+    var members = _a.members;
+    function getText() {
+        var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+        if (!members || members.length === 0) {
+            return '';
+        }
+        if (members && members.length === 1) {
+            return "".concat(members[0].nickname, " ").concat(stringSet.TYPING_INDICATOR__IS_TYPING);
+        }
+        if (members && members.length === 2) {
+            return "".concat(members[0].nickname, " ").concat(stringSet.TYPING_INDICATOR__AND, " ").concat(members[1].nickname, " ").concat(stringSet.TYPING_INDICATOR__ARE_TYPING);
+        }
+        return stringSet.TYPING_INDICATOR__MULTIPLE_TYPING;
+    }
+    return React.createElement(React.Fragment, null, getText());
+};
+var TypingIndicator = function (_a) {
+    var _b, _c, _d;
+    var channelUrl = _a.channelUrl;
+    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+    var sb = (_c = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
+    var logger = (_d = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _d === void 0 ? void 0 : _d.logger;
+    var _e = React.useState(uuid.uuidv4()), handlerId = _e[0], setHandlerId = _e[1];
+    var _f = React.useState([]), typingMembers = _f[0], setTypingMembers = _f[1];
+    React.useEffect(function () {
+        var _a;
+        if ((_a = sb === null || sb === void 0 ? void 0 : sb.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
+            sb.groupChannel.removeGroupChannelHandler(handlerId);
+            var newHandlerId = uuid.uuidv4();
+            var handler = new groupChannel.GroupChannelHandler({
+                onTypingStatusUpdated: function (groupChannel) {
+                    // there is a possible warning in here - setState called after unmount
+                    logger.info('Channel > Typing Indicator: onTypingStatusUpdated', groupChannel);
+                    if (groupChannel.url === channelUrl) {
+                        var members = groupChannel.getTypingUsers();
+                        setTypingMembers(members);
+                    }
+                },
+            });
+            sb.groupChannel.addGroupChannelHandler(newHandlerId, handler);
+            setHandlerId(newHandlerId);
+        }
+        return function () {
+            var _a;
+            setTypingMembers([]);
+            if ((_a = sb === null || sb === void 0 ? void 0 : sb.groupChannel) === null || _a === void 0 ? void 0 : _a.removeGroupChannelHandler) {
+                sb.groupChannel.removeGroupChannelHandler(handlerId);
+            }
+        };
+    }, [channelUrl]);
+    return (React.createElement(ui_Label.Label, { className: "sendbird-conversation__footer__typing-indicator__text", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 },
+        React.createElement(TypingIndicatorText, { members: typingMembers })));
+};
+
+exports.TypingIndicator = TypingIndicator;
+exports.TypingIndicatorText = TypingIndicatorText;
+//# sourceMappingURL=bundle-5UyAossc.js.map

package/cjs/chunks/bundle-5UyAossc.js.map

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

package/cjs/chunks/{bundle-7QMU-JU1.js → bundle-66GvrL2V.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var consts = require('./bundle-JbxviE94.js');
+var consts = require('./bundle-UAspU0bH.js');
 var lame_all = require('../lame.all.js');
 
 // Thanks to https://codesandbox.io/s/media-recorder-api-downsampling-16k-mp3-encode-using-lame-js-forked-n1pblw
@@ -125,4 +125,4 @@ function bufferToWav(abuffer, len) {
 
 exports.downsampleToWav = downsampleToWav;
 exports.encodeMp3 = encodeMp3;
-//# sourceMappingURL=bundle-7QMU-JU1.js.map
+//# sourceMappingURL=bundle-66GvrL2V.js.map

package/cjs/chunks/bundle-66GvrL2V.js.map

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

package/cjs/chunks/{bundle-Oc2T5_VP.js → bundle-6L4HCLmb.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var _tslib = require('./bundle-bXLZZTmP.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var utils = require('./bundle-LRCFL23q.js');
-var LocalizationContext = require('./bundle-qtXdbPNE.js');
-var MediaQueryContext = require('./bundle-WzrocC57.js');
+var utils = require('./bundle-Y-_KhZFq.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var MediaQueryContext = require('./bundle-6zBNmPOP.js');
 var ui_IconButton = require('../ui/IconButton.js');
 var ui_Button = require('../ui/Button.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-7J3nX_hP.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
 
 // simple component to be used as modal root
 var MODAL_ROOT = 'sendbird-modal-root';
@@ -69,4 +69,4 @@ exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.ModalRoot = ModalRoot;
-//# sourceMappingURL=bundle-Oc2T5_VP.js.map
+//# sourceMappingURL=bundle-6L4HCLmb.js.map

package/cjs/chunks/bundle-6L4HCLmb.js.map

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

package/cjs/chunks/{bundle-qtXdbPNE.js → bundle-6SzyBwQ5.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var stringSet = require('./bundle-kSScygqj.js');
-var index = require('./bundle-RSklGv-u.js');
+var stringSet = require('./bundle-H9rcn1PJ.js');
+var index = require('./bundle-AN4eZ2xs.js');
 
 var LocalizationContext = React.createContext({
     stringSet: stringSet.getStringSet('en'),
@@ -17,4 +17,4 @@ var useLocalization = function () { return React.useContext(LocalizationContext)
 exports.LocalizationContext = LocalizationContext;
 exports.LocalizationProvider = LocalizationProvider;
 exports.useLocalization = useLocalization;
-//# sourceMappingURL=bundle-qtXdbPNE.js.map
+//# sourceMappingURL=bundle-6SzyBwQ5.js.map

package/cjs/chunks/bundle-6SzyBwQ5.js.map

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

package/cjs/chunks/{bundle-WzrocC57.js → bundle-6zBNmPOP.js}

@@ -76,4 +76,4 @@ var useMediaQueryContext = function () { return React.useContext(MediaQueryConte
 
 exports.MediaQueryProvider = MediaQueryProvider;
 exports.useMediaQueryContext = useMediaQueryContext;
-//# sourceMappingURL=bundle-WzrocC57.js.map
+//# sourceMappingURL=bundle-6zBNmPOP.js.map

package/cjs/chunks/bundle-6zBNmPOP.js.map

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

package/cjs/chunks/{bundle-135pRm7i.js → bundle-77qvrXp8.js}

@@ -43,4 +43,4 @@ var pubSubTopics = exports.PUBSUB_TOPICS;
 exports.pubSubTopics = pubSubTopics;
 exports.shouldPubSubPublishToChannel = shouldPubSubPublishToChannel;
 exports.shouldPubSubPublishToThread = shouldPubSubPublishToThread;
-//# sourceMappingURL=bundle-135pRm7i.js.map
+//# sourceMappingURL=bundle-77qvrXp8.js.map

package/cjs/chunks/bundle-77qvrXp8.js.map

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

package/cjs/chunks/{bundle-RSklGv-u.js → bundle-AN4eZ2xs.js}

@@ -485,4 +485,4 @@ var locale = {
 var defaultLocale = locale;
 
 exports.defaultLocale = defaultLocale;
-//# sourceMappingURL=bundle-RSklGv-u.js.map
+//# sourceMappingURL=bundle-AN4eZ2xs.js.map